Wiring Actions to a Component

[00:00:00]
>> Lukas Ruebbelke: Now, if we go into our reducer, what we can do is we can now take this here and we can update this to ProjectsAction,
>> Lukas Ruebbelke: Types.
>> Lukas Ruebbelke: Select project, and if we go here,
>> Lukas Ruebbelke: Is this add project, did I,
>> Lukas Ruebbelke: So here I called it AddProject, I might go back and refactor that to be create so it's consistent.

[00:00:46]
>> Lukas Ruebbelke: UpdateProject,
>> Lukas Ruebbelke: DeleteProject.
>> Lukas Ruebbelke: What's this thing angry about?
>> Lukas Ruebbelke: Double check make sure I got everything.
>> Lukas Ruebbelke: ProjectSelected, I would do that about three times and I'd be like okay, enough, and I would just refactor it. But since we are on a highway going 100 miles an hour, I will just leave it as it is.

[00:01:42]
All right, so now, in our projects component, instead of doing this right here, where we're creating something, let's go new, AddProject.
>> Lukas Ruebbelke: And we're going to pass in the project is the payload. Again, super safe, we'll go update, project, let me make sure I get the import correct,

[00:02:23]
>> Lukas Ruebbelke: Project and we'll go here.
>> Lukas Ruebbelke: So what's super cool about this is that now the code is starting to almost read kind of almost like a natural language. And so I believe that code should be self documenting. And so when you look at this it's like, okay, I know exactly what's happening, and AddProject, UpdateProject, DeleteProject.

[00:02:52]
So save this, and let's verify that everything is loading. Now look over here projects, update data, add data. So, this just got empty, and that's super great, delete data. So, as it's coming through, it's a lot easier to understand kind of what's happening.
>> Lukas Ruebbelke: Here we go, we'll just see this happen one more time.

[00:03:25]
Update data and so what we've just simply done in this particular module is we've went through and we have removed these generic object script objects, and we've made them strongly typed. So now that there's some extra citation about what this is going to do and how it's going to flow through the application.

[00:03:48]
And where it becomes really critical is in your reducer, when you're listening for an action type, then it's easy to keep it's type safe.
>> Lukas Ruebbelke: Any questions on what I've done? Taking generic objects turning them into strongly typed safe action objects that we can then pass around our application, and then not have to worry about them colliding.

[00:04:20]
I've seen that it's not possible, but it's much more unlikely versus generic strings and generic objects, yes?
>> Speaker 2: Why do you put projects in brackets and actions?
>> Lukas Ruebbelke: So when it comes here, I'm not going to put anything in there. I mean it could be even,
>> Lukas Ruebbelke: It's mainly so that I have kind of semantically, that I know okay, this is the entity that I'm working on.

[00:05:02]
And this is what happened is that I've just selected it, or I'm adding data to this, or I'm updating data. Does that makes sense?
>> Speaker 2: Yeah.
>> Lukas Ruebbelke: So you could put anything in here, but I recommend creating something that's self descriptive so that it is flying through here if you're trying to track it down.

[00:05:17]
You can look in and know exactly what, when you click on this, you know like what happened and what you're gonna see in the payload.