In the last section we finished promoting our book list from a normal Riak component to being a container 2
. 3
So we finished wiring up our first container and our first reducer the book's reducer I take a second 4
to review exactly what's going on here. 5
You know the flow throughout the entire application right now just in case stuff is a little bit confusing 6
still. 7
If you feel comfortable with where everything is out feel free to go the next section. 8
Otherwise sit around for a little bit and let's go through the walkthrough of what's going on one more 9
time just make sure that it's nice and extra clear here. 10
Truthfully to me some of this still seems a little bit like magic. 11
And so you know I still find it a little bit challenging to sometimes trace data you know okay we've 12
got to reducers somehow that's showing up inside the booklist blah blah. 13
Kind of hard to you know trace the flow of the application. 14
So let's review this one more time first. 15
An overall note. 16
Remember that redux serves to construct the application state and re-act provides the views to display 17
that stee the two libraries are inherently disconnected and it's only through the use of re-act redux 18
that we get any clear connection between the two. 19
Next our application state is generated by reducer functions. 20
We created one reducer called reducer. 21
Books are books reducer the book's producer always returns an array of books. 22
No matter what. 23
Always the same array. 24
The array contains a list of objects where each object represents one book and it has just the title 25
of a book. 26
For right now we added this book's reducer to our combined reducers call right here inside of index 27
Stut J us inside of 30 reducers folder. 28
This reducers going to add a key to our global application state called books where the key is books 29
and the value is whatever gets returned from the books reducer which in this case is our array of books 30
. 31
That's essentially the end of this thread here. 32
Our state is really just always going to be equal to an object with a key of books and a value of an 33
array of books. 34
That's it. 35
Next we created a component book list that started off as a component but then we decided that it needed 36
to be aware of our state within our read redux within the redux side of the application because booklist 37
had to be aware that state. 38
We decided to promote it to a container we promoted bookless to a container by first importing the connect 39
function from re-act redux and then we defined map state to props and we hooked our component together 40
with MAP state to props using the connect function. 41
We chose the component booklist to connect to the redux store specifically because only booklist in 42
our application really cares about the list of books. 43
The OP doesn't really care about it it doesn't need to know about the list of books at all. 44
Finally we made sure that app actually rendered that booklist here and last of all we refreshed our 45
application in the browser and we saw that code in action read X generated a state object that contained 46
our books and then mapped that state as props to our component because the state was updated through 47
our producer our component re rendered with that list of books. 48
So one last reminder here for the probably fifth or sixth time a container is a normal re-act component 49
that gets bonded to the application state and we connect the two we meld the two together whenever the 50
application state changes. 51
The container will read render as well. 52
OK so without review complete let's move forward towards the next part of our application which is selecting 53
a particular book