Wiring Entities to the Component

[00:00:00]
>> Lukas Ruebbelke: Because we are now using EntityState instead of this initial state that we created, we're going to just seed it a little bit differently for now. So I am exporting initialProjects and then if we go into the barrel roll, I am going to
>> Lukas Ruebbelke: Just add this to this, so.

[00:00:27]
>> Lukas Ruebbelke: We'll see where this comes in in just a moment.
>> Lukas Ruebbelke: Let's go into our Projects component and now you notice getProjects was on hiatus. Well, now what we're going to do, is we're going to go this store dispatch(newLoadProj)
>> Lukas Ruebbelke: You know what, I may have gotten slightly ahead of myself, let's go to our actions real quick and make sure I have that.

[00:01:06]
All right, so easy enough, LoadProjects =
>> Lukas Ruebbelke: Little data, there we go
>> Lukas Ruebbelke: We'll just add this, let's go here, export class LoadProjects implement Action readonly type =
>> Lukas Ruebbelke: Projects.
>> Lukas Ruebbelke: So what's interesting about this, is that this action, well, initially, you'll see here that we're not going to send a payload eventually.

[00:02:16]
But for now we are going to say load this projects.
>> Lukas Ruebbelke: Payload: and, in this case it's going to be an array of projects, okay, and then if we go into our reducer,
>> Lukas Ruebbelke: Let's actually just create a case for this, this is actually kind of convenient that we can see this all together, Projects

[00:02:51]
>> Lukas Ruebbelke: ActionTypes.LoadProjects.
>> Lukas Ruebbelke: Return adapter.add
>> Lukas Ruebbelke: Many
>> Lukas Ruebbelke: state.
>> Lukas Ruebbelke: There we go, let me just make sure that
>> Lukas Ruebbelke: ActionTypes
>> Lukas Ruebbelke: All right, so I just added the low projects action, I added it to the reducer, and then if we go here,
>> Lukas Ruebbelke: This, one other thing I've forgotten, I apologize, I need to LoadProjects, very good, now we go back to the barrel roll.

[00:04:02]
So I think that if anybody, and I believe this is for across the board, that when you're starting to assemble things together, like so. It's easy to, there's nothing wrong with your code, but the way that you wire it up could be a bit odd, or you can miss something.

[00:04:32]
>> Lukas Ruebbelke: Just break this down so we can see that it's there, now we go to getprojects. LoadProjects and we're going to pass in initialProjects.
>> Lukas Ruebbelke: So when we save this, I expect that nothing is going to happen here, why? Well, thank you for asking,
>> Lukas Ruebbelke: If we look in the

[00:05:09]
>> Lukas Ruebbelke: Template here.
>> Lukas Ruebbelke: Pre{{projects,
>> Lukas Ruebbelke: async and json.
>> Lukas Ruebbelke: As you notice, init, init, so there's another thing, you expect something to happen, I expected it to load, but nothing's happening.
>> Lukas Ruebbelke: Like did my Action get fired? Well, I don't see it here, so let's go and see, like I'm definitely firing right here, it's firing here.

[00:05:51]
>> Lukas Ruebbelke: So let's see what the problem may be, let's just, so this is another thing. With Redux Dev Tools is you can start to see your control flow as it's going through your application. So we wait for this to build, let me just double check, Projects does not exist on ProjectState, well, look at that.

[00:06:16]
So we're not even gonna get that far because in our selector here.
>> Lukas Ruebbelke: Let's do.
>> Lukas Ruebbelke: I'm gonna take this off, so I'm trying to map out something that doesn't exist, let's save this again. And I just really want to see if I can get this to dump.

[00:06:43]
Yeah, well notice the entire shape of this structure, its IDs and its entities. And we're no longer dealing directly with the project's collection. And so what we need to do here, and this is going to be not super pretty, but this is going to set the stage for selectives.

[00:07:07]
So for now we're saying, okay, we've got projects, we want to pull off of this data. Let's go data.Entities, and then from there, I'm going to do this not from memory, I have this written down.
>> Lukas Ruebbelke: Keys(data).map, little k.
>> Lukas Ruebbelke: All right, so we're looping over, we're grabbing the keys that were looping over that.

[00:07:51]
And we're just matching up the key with the value, all right, let's save this, now let's see what we're dealing with. We're back to our collection, so now we have a very efficient way to look up data and connect our models. But it does create some additional steps here to get us back into a state where we can just dump it right into our template.

[00:08:24]
Which we will solve with selectors and lunch.