In the last section we created this booklist component here and we started to discuss the topic of containers 2
. 3
Remember a container is just a component that has direct access to the state that's produced by redux 4
reactant redux are two separate libraries and it's only through this third library called re-act redux 5
that we can meld the two together and get a component that's actually aware of the state that is contained 6
within redux. 7
We kind of made the decision right off the bat that booklist would end up being a container. 8
But let's talk a little bit about how that decision was made. 9
I mean a diagram up here on the screen that kind of models or application a little bit. 10
So the question is which component do we want to return into a container. 11
And the answer is it varies. 12
In general we want the most parent component that cares about a particular piece of state to be a container 13
. 14
So your first answer might be well the whole app contains cares about the state. 15
Right. 16
Whole app needs to care about the list of books and the app needs to know about the current active book 17
. 18
And when I say app I'm talking specifically about our component called Dog James. 19
And the question in my answer there would be well you know I'm not so sure about that app doesn't really 20
care about the list of books only book list does. 21
And as far as the book detail well only book detail really changes cares about the active book 22
The app on the other hand doesn't really care about the list of books and it doesn't care about the 23
currently selected book. 24
The only thing that app is here for is to say like hey please render bookless to the page and please 25
render book detail to the page. 26
So I'm going to go ahead and say that our book list and a component that will make it a little bit here 27
the book detail should both be containers or smart components or components that have a direct connection 28
to redux whereas app should be a dumb component or just a component you know what we would call just 29
normally a component a component that doesn't have any touch or any handle on the data that's contained 30
within sight of redux. 31
If this were a real app we might just take the easy way out and say like OK we're just going to make 32
app a container and everything else will just get all the props in here and we can just you know render 33
the component all day with all of our state and not think twice about it. 34
In this example though I really want to hammer home the fact that we only create containers out of components 35
that care about a particular piece of state. 36
So we're going to do things you know divide up a little pieces a little bit state here where the booklist 37
is going to get the list of books and the book detail will get the active book. 38
One more quick note. 39
Only the most parent component that uses a particular piece of state needs to be connected to redux 40
. 41
So again the app doesn't really care about the active book. 42
Only the book detail does. 43
If the book lists however had some other child component that cared about the book list we wouldn't 44
really want to contain connect to that child component and state as well. 45
Only the parent which in this case would be the booklist. 46
OK so if determined that book list needs to be connected to the books piece of state. 47
So let's move or just verify that we do have the book list inside of the containers folder. 48
So we're going to promote booklist to be in a container. 49
So we need to now actually make use of the re-act redux library and hook it up to redux. 50
I don't want to turn this lecture into a you know 20 minute section because it might take that long 51
. 52
So let's go ahead and take care of that in the next section.