Using State Store in Components

[00:00:00]
>> Steve Kinney: So we did this before with the counter. What we want to do is we want to, we're gonna need a list plural container and a list container, right? We have those IDs, and we have that like individual like one. And so what we'll do is create those two components, and then we'll kind of flush them out.

[00:00:20]
So this will be inside of containers. I'll make a Lists, plural, Container, and we'll make a List, singular, Container.
>> Steve Kinney: Great. Now in the ListsContainer, we already have the actual component. We don't need to write anything ourselves. So we'll pull in connect from React-Redux, we'll pull in that Lists component.

[00:01:00]
>> Steve Kinney: So I have a components directory and a containers directory. [INAUDIBLE] to go into components/Lists. And now, okay, what do we wanna do? We know that there's gonna be cards, we know that there's going to be users, we know that there's gonna be all this stuff on the state tree.

[00:01:13]
What does Lists actually care about? It cares about just the lists [LAUGH]. And it doesn't even care about, like the Lists plural doesn't even care about the data. It just needs to know, what are the IDs of this list, and then the individual list will be able to figure it out, like, what list?

[00:01:32]
So what we're able to do here is, we'll just make a mapStateToProps.
>> Steve Kinney: Function that's gonna take all of our state. Like that's going to be cards, it's going to be users, it's going to be everything. And it's going to return a new object which is just the list.

[00:01:52]
That's gonna be state.lists.ids, right, so it's just gonna get that array of IDs. What this means is that since that array is not going to change, like we don't, we're not going to implement the ability to like rename a list. But that would make us make a new array of lists.

[00:02:06]
And then it would, like here, that's not gonna change any IDs, which will save us a bunch of work. So we'll make that. And all we have to do is export default. I will take that mapStateToProps. I will take that Lists component. And now we have this list container that's automatically, we can put it anywhere we want in our application.

[00:02:27]
It doesn't care about the component hierarchy, it doesn't matter with any of that stuff. We take that List container component, pop it wherever we want. It is hooked up to Redux. It will have the correct state. We don't have to worry about any prop drilling or anything along those lines.

[00:02:40]
So let's go ahead and let's swap out the Lists for the ListsContainer. So go to application. So instead of Lists, we're gonna do Lists. The one thing you will catch me do, and someone needs to be on the hook for this, is I will forget. First of all, I'm writing in the wrong file.

[00:03:03]
And then, I did export default, cool. So we'll export default. But I will forget to export default at some point. This ListsContainer, we'll get rid of the Lists.
>> Steve Kinney: Now, that's just gonna be an array of IDs. It's not gonna get us all the way there yet. As we can see, it's going through the list.cards, cuz the ID's don't have a cards on it.

[00:03:25]
So we need to get the individual list working. This is gonna involve a slightly new concept for us. Because we're gonna receive a prop that is telling us which list. Cuz while we have an array of IDs, we've got 1, 2, 3, 4, 5, and 6. If we need to go ahead and figure out which list, then we're gonna need to like take that prop that get passed in and then do it in mapStateToProps.

[00:03:49]
So let's do that real fast. So we'll go and we'll create that single List.
>> Steve Kinney: Container.
>> Steve Kinney: And we will import connect from react-redux.
>> Steve Kinney: We'll import that individual List.
>> Steve Kinney: So mapStateToProps. Here's a new concept for us. We need to figure out, all right, so the props that this receives.

[00:04:31]
We'll figure out which list we need to grab. So it turns out mapStateToProps takes a second argument.
>> Steve Kinney: It takes the entire state tree, and it takes this thing called ownProps. These are the properties passed to the container when you use it, right? So this is going to be in this case the ID of the list that we're looking for.

[00:04:51]
So here we'll say return. And we'll say, given list will be state.lists, we have that entities. And it will be ownProps.listId. So as long as we pass a listId as a prop to this List singular container, it will go and figure out the right one. We don't have to worry about any of that stuff.

[00:05:14]
And then all we need to do is export default that mapStateToProps. Cool. And now in our list, we'll just swap this out for the list container.
>> Steve Kinney: This will actually be a list ID now.
>> Steve Kinney: We're gonna take out this move card to List for a second, cuz it's still looking for the rest of that, which we'll have to implement.

[00:06:00]
So we'll go ahead in a given.
>> Steve Kinney: Card, and just comment this one out.
>> Steve Kinney: Cool, so you can see we have all of our lists. It's got some notion of cards. Right, but we had the same problem that we had before, which is then trying to get more properties off of that.

[00:06:18]
So all of our lists exist, you can see that they're the right lists. Because if we look, we have the IDs list just has the array IDs, it's creating lists, it's passing that ID in. And then Redux is doing all the work to find out the data from that list.

[00:06:31]
And creating the List singular component, all right?