In the last section we wrote our first producer the book's producer and we wired it up to our application 2
inside of this combine reducers function where the key was the piece of state or the name of the piece 3
of state and the value was the reducer itself. 4
When we passed this object to combine reducers we're essentially telling Ridd redux how to create our 5
application state in this example that we have right now if we went ahead and ran this in the browser 6
our application have a single piece of state called books where the value was whatever gets returned 7
from the books reduce or function. 8
And right now that's just a list of objects in this section. 9
We're going to go ahead and make sure that the code we wrote is actually generating usable state for 10
application. 11
We're going to do this by creating a booklist component within react. 12
So let's go ahead and get started by creating a new file inside of our components directory. 13
We're going to call this book list. 14
Yes. 15
So again the only purpose of this component I hear is just going to be to render a list of books. 16
So we're going to kind of speed through this component real quick and then get to the back to the state 17
topic here. 18
A lot of the topics that we're going to cover in this we've already covered is just really you know 19
building a list of building a list out of a component. 20
So we'll do our boiler plate at the top right. 21
Import re-act component from react and then we'll create our class explore default class book list and 22
it's going to extend component inside of you will create or render function. 23
And we're going to have it return a UL with a class name of list group and call them for these class 24
names are just part of a bootstrap just to make things look kind of nice for us as we go through this 25
and we'll close the UL tag and we're going to go ahead and build our list. 26
Now we're going to pull the list building out to a separate function called render list. 27
When or if we ever want to call a separate function within our GSX no problem. 28
Just as before when we reference any javascript variable we write curly braces. 29
And then this Daut render list 30
so then that we'll call a new function that will define called render list like so. 31
Then inside if you're We're going to pretend we haven't done this yet we're gonna do it just a little 32
bit. 33
We're going to return this stop probs start books. 34
So we're going to imagine or we're going to plan that we're going to wire up the list of books to be 35
on this dot props for the booklist and we'll map over that array. 36
And for each element in the array will return an ally 37
with a class name of list group item and inside the illai will put book title and then close the line 38
. 39
One thing in here don't forget we've got to add a key because it is a list. 40
So add the book title. 41
Remember we just need to use a unique value for the key so we can just use the title of the book. 42
We're going to you know relatively sure that that value is always going to be unique throughout the 43
entire list. 44
OK. 45
So this component looks pretty reasonable. 46
It creates a UL and then it calls a helper function called render list this render list is going to 47
map over an array of books which we haven't passed into this component yet but we will shortly. 48
And for each book in the array we just create a lie that contains the book's title call. 49
So we've got our component here. 50
All we have to do now is plug in our application state into this somehow get it into here. 51
As this props books this is a merger that we saw in the previous state diagrams remember where we somehow 52
combine our re-act views and our read out state to generate what we call a usable application connecting 53
these two separate libraries redux and react and do keep in mind they're separate. 54
There's absolutely no intrinsic connection between react and redox is done with a separate library called 55
re-act redux re-act redux is already included in this boilerplate package so we can make use of it right 56
away. 57
So here's how we're going to make use that library. 58
We're going to define one of our components as a container instead of a component. 59
So we've been using the word you know component all the time here. 60
Kind of interchangeable with view. 61
Instead we're going to promote one of these components to what we're going to call a container. 62
A container is a re-act component that has a direct connection to the state managed by redux. 63
So again remember we have our data in our application. 64
We have the views and the application. 65
And together they form our working usable app the left hand side is redux the right hand side as react 66
in the middle. 67
You can imagine that we have this new library called re-act redux. 68
It's what forms the bridge between these two separate libraries. 69
The only time we ever get this bridge available where we can take a re-act component and inject state 70
into it you know kind of inject data into it is a component we call a container. 71
Containers are also some kind sometimes called in the official read redux docs Smar components as opposed 72
to a done component. 73
So right now we've got a dumb component right here because it does not have any direct connection to 74
redux. 75
So containers really end up looking pretty identical to that component but they are distinctly different 76
to indicate this difference. 77
We usually separate them into different directories. 78
So right now we've got a component's directory. 79
Instead we're going to put all of our containers into a different directory called containers. 80
It's going to go ahead and create a new folder here called containers 81
and then I'm going to go ahead and cut our booklist and paste it into containers. 82
So I'm moving the file over here that's all. 83
So we can now create our first container out of this booklist. 84
There's just one question left you know which components do we promote to be in the container and which 85
do we leave as normal components before we promote this booklist. 86
Let's answer that question the next section