Refactoring Reducers into Actions

[00:00:00]
>> Lukas: One of the issues, and this kind of came up, is these strings are not very scalable. In other words, what happens when I create another feature called widgets or whatever? And I wanna create that. Well, now what happens is your reducers that they have the ability to respond to every action.

[00:00:24]
There's always a kind of a weird case where maybe you might want to have it read. I don't know, like my client went back and forth on where you might want to have one place respond or two places respond to a single action. There may be a use case, maybe not.

[00:00:38]
But more importantly is what you don't want is to say, I want to create a new widget with an update action type and then over here projects is responding to that. That will create definitely some unpredictable behavior. And so you need to keep your action types unique. And so, in other words, it needs to be a single, kind of think of it is like unique key that exist in only in one place in your application.

[00:01:07]
So that they're not colliding because that can happen. As well, is if you look over here in the Dev tools, create, delete update. Well, if I didn't know I was looking at projects, like, what? What am I delete? Like, what's happening? I don't know. And so, it's also not very descriptive.

[00:01:26]
And secondly, it's very easy, as you can see, is you're manually creating these objects to create a typo or mess up the type in general. So we are going to fix that by leveraging TypeScript. So we're going to go down to projects.actions and we are going to start to build this out.

[00:01:53]
So the first thing that we are going to do is we are going to create an enum with all of the actions for the projects. So we are going to call this ProjectsActionTypes. And we'll just pick some kind of, I think, descriptive actions that could happen. So, for instance, we selected a project.

[00:02:19]
And then we give this a value of, and I like to keep this descriptive, Projects. And we'll say, Selected. And then from here, AddProject.
>> Lukas: We'll just say we're going to add some data.
>> Lukas: UpdateProject, DeleteProject, Update Data, Delete Data. All right, so now we have an enum.

[00:03:00]
And so we're keeping all of our action types, the strings, in a single spot. And then from here, let's create an action object. So let's go with AddProject. Export class, AddProject. And now here we are going to implement the action interface, and if we click into here, it has one property.

[00:03:30]
You are required to have a type.
>> Lukas: Readonly type = ProjectActionTypes.
>> Lukas: This thing is totally gonna try to import this on me.
>> Lukas: And so this is, as well, this is a lot more descriptive than just create. So just looking at this code you're like, what's happening?

[00:04:06]
Well, we're adding a project. And because we are going to send in a project,
>> Lukas: We are going to have a payload.
>> Lukas: Which is going to be of type Project.
>> Lukas: Does this make sense? So we're creating a strongly typed action object that has a type, which is also pulling from the enum.

[00:04:45]
And then because we're passing in a payload, and modifying with an access modifier, then due to constructor assignment, it's assigning it to, when this gets instantiated, the concrete instance. Then it will also have a payload property on that, makes sense? All right, and then from here, what we are going to do is we're going to create a unit type.

[00:05:18]
>> Lukas: And so we'll go AddProject.
>> Lukas: And let me go with SelectProject, and I'll create that in a second. But then what we'll would do,
>> Lukas: Is, now this is something that somebody like said you have to explain and express the detail what's happening here. I would just say, I'm kind of understand but typically, is if you reference project actions, you can basically reference multiple specific things kind of behind that unit.

[00:05:53]
>> Lukas: And if somebody who is in or a TypeScript expert wants to comment or clarify that, that would be totally fine but-
>> Speaker 2: It's just a type. It's saying that it can be this type or that type.
>> Lukas: Yeah, so that's what I kind of figured. This or this or this, and so when you-

[00:06:11]
>> Speaker 2: Or type, excuse me.
>> Lukas: So, this will be ProjectActionTypes.
>> Lukas: Did I spell this wrong?
>> Speaker 2: Projects.
>> Lukas: Projects.
>> Lukas: Why I'm still not seeing it. ProjectSelected [LAUGH] Naming things are hard.
>> Lukas: That was a little head nod to you my friend, it was like why did they call it select?

[00:06:55]
Why didn't they just call it query? And I agree.
>> Lukas: Okay, so we have two actions, let's go ahead, I'm going to just burn through and do two more.
>> Lukas: UpdateProject.
>> Lukas: DeleteProject.
>> Lukas: DeleteProject.
>> Lukas: I think we're good here.
>> Lukas: And we'll go down here and,
>> Lukas: I really hate that that just happened.

[00:07:57]
>> Lukas: I don't like that it's not in order. UpdateProject.
>> Lukas: I'm just going to import myself into myself.
>> Lukas: Super awesome.
>> Lukas: All right, so now we have created these four action objects, let's go ahead and let's just expose these two the barrel roll. Cuz we're gonna need them inside of our application.

[00:08:36]
So let's go export,
>> Lukas: /lib/state/,
>> Lukas: I was so close.
>> Lukas: There we go. And so we'll go,
>> Lukas: SelectProject, AddProject,
>> Lukas: UpdateProject,
>> Lukas: DeleteProject. And so, now we just taken care of that now, it's going to be available for our consumption inside of our projects feature.