In the last section we discuss the difference between a container and a component at great length. 2
And we decided to promote our book list to be a container instead of just a component remember react 3
and redox are not at all intrinsically connected. 4
They're totally separate projects to form a connection between redox our application state that holds 5
all of our data and our actual components we need to use a separate library called re-act redux to forge 6
a connection there. 7
Whenever we forge a connection between a component and redux it turns that component into a container 8
or a smart component depending on what terminology you want to use. 9
So we created our bookless component here but we're not making use of it yet inside of our application 10
at all. 11
Let's flip over to abduct G-S and make sure that it's just being rendered inside of our application 12
. 13
So inside of. 14
Yes we'll import book lists from where I need to go. 15
Right now we're inside of the components directories so we're going to go up to source them into containers 16
and then we'll get a booklist. 17
So we'll go up then into containers and then we'll get booklist like so and then we'll just go ahead 18
and replace the current div with our booklist and safe. 19
Looks good. 20
You know actually before I forget. 21
Let's go ahead and wrap this in a div as well because we are going to have other components in here 22
. 23
OK. 24
So we got a div inside of it. 25
Booklist nice and simple. 26
OK. 27
So our booklist is being run inside the app. 28
Now we need to make sure that booklist actually has a connection from redux to get state into this component 29
right here. 30
So remember the end goal is our application application state has a book's property the list of books 31
we want to get that list of books to show up inside of our component here inside of our container so 32
to forge that connection. 33
As I mentioned earlier we're going to use library re-act redux. 34
So we do need to import it into this directory right here. 35
So at the top we'll write import from re-act redux and we're going to pull just a single property off 36
of it. 37
So we use our curly braces. 38
Remember if we write just a word we import the entire object from that file. 39
But if we use our curly braces we pull off just a single property. 40
So we're going to plot a single property here called Canet. 41
Note the lowercase see no capitals here. 42
So we got this connect function. 43
It is a function. 44
Let's go ahead to make use of it. 45
We're not going to export this class any more as the default. 46
Before we forget. 47
Let's go ahead and delete it. 48
So now we've just got class booklist extends component now at the bottom. 49
Here's where things are going to start getting really interesting. 50
We're going to define a function here called Map state to prop's this function is going to have one 51
argument which is state. 52
So the name of the function here is actually really telling. 53
It's very descriptive it's Believe or not telling us exactly what's happening here. 54
The purpose of this function is to take our application state as an argument. 55
Remember our state contains the array of books and the active book. 56
So it's going to take her application state and whatever gets returned from here 57
will show up as props inside of book list. 58
So usually we end up returning an object from this whatever is contained within the subject is going 59
to be set equal to this dot props of our component. 60
So if we return from here like you know SDF is one to three then our component here we said Count log 61
this dot prob start. 62
SDF 63
we would end up with 1 2 3 like so. 64
So again this function is very well-named mapped state to process. 65
It takes in the application state the entire thing all of it and whatever we return from it this function 66
is what is going to show up as props inside of our container here. 67
So I hope it starts to make a little more sense why we say that our containers are that link between 68
redox and react. 69
It's all done via the use of this map state to prop's function. 70
So we're not going to want to return this you know garbage string right here. 71
SDF one two three. 72
So let's go ahead and delete that instead. 73
Well we definitely want is a property called books that's going to be the array of books like you know 74
our list of books. 75
So we want the property to be called books because you know we're making reference to this stuff props 76
up books appear here and we want the value to be the list of books off of our state. 77
Remember our state has two properties right now books an active book. 78
Books is the array of books. 79
And that's exactly what we want. 80
So here will say state DOT books. 81
That's it. 82
This is the connection between redux and our component here our container Well actually I take that 83
back. 84
We're almost there. 85
Oh is there one more step. 86
At the very bottom we need to actually make use of that connect function that we imported up top the 87
connect function is what actually says OK you know take this component take this map state to props 88
and return a container and that's what we want to export from this file as well. 89
By the way so that's why we deleted the export default above whenever we make a container file. 90
We don't want to export. 91
You know the bookless plane component that nobody cares about. 92
We want to export the container. 93
So we'll write connect. 94
Map state to props and then we're getting close friends. 95
So it's like two separate calls here. 96
And the second thing is then you open up another set of friends and we're going to pass a booklist. 97
OK. 98
So confusing stuff here. 99
Let's go through it again. 100
At the very top we imported our connect function from re-act redux reactor redux is the glue between 101
react and redux. 102
There again they are completely separate libraries. 103
They are not developed in tandem. 104
Totally different libraries. 105
No connection. 106
It's only through this re-act redux that we get any kind of merging between the two of them specifically 107
reata redux makes this connect function available. 108
Connect takes a function and a component and produces a container. 109
The container is a component that is aware of the state that's in with with it that is aware of the 110
state that is contained by redirects the map state to prop's function is especially key here. 111
The first argument is the state and it returns an object whatever object is returned will be available 112
to our component as this props. 113
So again this is the glue for a third time now just to hammer home this function right here is really 114
the glue between react and redux. 115
Very important function right here in our case. 116
We want to have access to this prop stock books with our component. 117
So we are returning object with a key of books and a value of state DOT books because our books reducer 118
is returning the books propertied right here. 119
You know our array of books the array of objects. 120
So that's a review of what we just did. 121
I just want to throw two more notes out here that are very important. 122
The first of which is that whenever our application state changes. 123
So you know let's say we are loading a list of books from some remote server. 124
And that takes some time or a user clicks on something and that changes the list of books or you know 125
whatever reason. 126
If our state ever changes this container will instantly render with the new list of books. 127
OK. 128
So that's a very important fact number one. 129
And we're going to take use of that advantage that all over the place all the time whenever our application 130
state changes our component our container booklist will automatically remember the second important 131
fact here by using connect to create a container is that whenever the application state changes the 132
object in the state function will be assigned as props to the component. 133
And we've discussed that you know several times now just to reiterate it's going to end up as this stop 134
Propst up books. 135
OK so we've got a container here. 136
It's being rendered inside of app. 137
Let's go ahead and save this. 138
Flip over to the browser refresh and oh my gosh it actually worked totally in shock over here. 139
Not really. 140
We got lots of books. 141
So pretty crazy. 142
Crazy crazy stuff. 143
I know. 144
This is if you're getting this right off the bat you have my deep admiration. 145
You are one intelligent person over there. 146
I find this to be you know first time I went through this pretty darn confusing. 147
If you still feel and confused please do not sweat it. 148
We're going to continue to go over these topics. 149
You know just to reiterate them again and again and again just to make it clear you know what the heck 150
state is what this function is what connect is in all this different stuff when it container is all 151
it's you know all the all the terminology I have been using over time now we're going to continue to 152
use that as we go through these examples. 153
So again if it is confusing just hang on I think it's going to get a little bit more clear over time 154
. 155
If you're at a point we're thinking yourself OK I'm just totally lost no idea what's going on. 156
Please please please feel free to drop me an email. 157
I would love to hear your feedback get a better idea of how to explain these topics to people you know 158
and I'd love to clarify a topic for you as well so do drop me an email if this is starting to look really 159
really weird. 160
OK. 161
So we've hooked up our first container. 162
We've got our first reducer. 163
This is starting to look pretty good. 164
We're starting to make progress. 165
Let's go ahead and continue in the next section