In the last section we added the actor a book reducer which produced a new piece of application state 2
whenever the book selected action was triggered in this section and we're going to start to flesh out 3
the book detail view which will render whenever there is a selected book before we make this book detail 4
we need to decide whether or not we're making a component or a container. 5
Remember we make containers and we want to have a component that can touch the redux state directly 6
. 7
Now we know what our book is and we know when it changes. 8
So it really makes sense that this book detail should be a container. 9
Right. 10
Again our app doesn't really care about the active book. 11
The purpose of app is to render the book list and our soon to be created book detail only the book detail 12
component really cares about what the active book is. 13
Therefore we're going to make the active book component a container. 14
So let's go ahead and get started in our continuous folder then go ahead and create a new file book 15
detail that Jesus and inside of here we're going to go ahead and just throw down a little bit of our 16
boilerplate in here for making new component. 17
So we'll say and poor reacts and component at the top from react and then we will create our class book 18
detail and that's going to extend component will make our render method. 19
And from here right now we're just going to return some just a div that just says book detail. 20
Nice and easy going to say this. 21
And then we're going to flip back over to abduct J us and we're going to make sure that Archie gets 22
rendered within our application. 23
So the top here will import our book detail right underneath the book list. 24
So in poor book detail from up into containers and then book detail. 25
Yup looks good. 26
And then in the render method we'll add the book detail component 27
like so. 28
OK. 29
So let's flip back over to our browser refresh and just verify that our component is showing up here 30
. 31
Very good. 32
If you don't have any tech showing up here for a book detail. 33
Be sure and check your chrome console for any possible errors or perhaps your terminal. 34
You know you never know. 35
Typos come up all the time. 36
OK. 37
So we've got our book detail wired up to be displayed by the app component. 38
We need to also make sure that we hook up the book detail to the redux store. 39
So it gets told about changes to the active piece of state. 40
So let's do that next. 41
And the pattern for this is going to be the exact same as what we did in booklist will import the Kinect 42
helper and connect our state our application state to the props of this container right here. 43
And remember we do that by defining a function called Map state to process and then we connect map state 44
to prop's with book detail. 45
It's I know you know again that's something that's a little bit esoteric but it's a very reproducible 46
line of steps. 47
You know every time they want to create a container it's really the same exact number of steps. 48
So let's get to it at the top. 49
We'll import our connect function from re-act redux and then down here we'll go ahead and define our 50
helper function map state to prop's this has the argument of the application state. 51
And so we returned from here member this object that we return is going to show up as props inside of 52
our big detail. 53
So we're going to return from here will say that it's going to have a proper book and that will be state 54
DOT active book. 55
We are specifically referencing active book. 56
Let me pull it up here really quick. 57
Here we are because our active book reducer is creating the active book Peace of state. 58
OK so we've got our map state to probably the last step here is to make sure that we export our container 59
. 60
So we're going to say export default and then we'll connect map state to props and look detail. 61
Also do not forget to remove the export default appear that we just added a minute a minute ago. 62
So we'll take that off. 63
OK. 64
So we've now got a connected component in here. 65
Let's go ahead and continue in the next section