In the last section we meet a container out of the newly created book detail component so we can now 2
make use of this dot props dot book inside of the container because we mapped our state our application 3
state to the props of this particular component here. 4
OK so now that we've got that let's go ahead and print out the title of the currently selected book 5
. 6
So I'm going to remove our placeholder text in here and we replace it with an H three and we'll say 7
details for and then we'll add another div and inside of here we'll put our curly braces with this dot 8
props dot dot title. 9
OK. 10
So make it simple enough here right. 11
We've got this dot props dot book title that will print out the title of the book and save this and 12
flip back over to the browser. 13
So we've got our stuff on the left and we've got our book details on top. 14
I'm going to go ahead now and refresh the page and you'll notice that we get a big ole error message 15
here says cannot read property title of NULL. 16
So let's think about exactly what's going on here. 17
I'm going to flip open our active book reducer 18
whenever our application first boots up. 19
We don't have any existing application state right. 20
It hasn't been defined yet. 21
Remember our application state is assembled entirely by all of our reducers. 22
So under the hood what redux does is it sends a couple of kind of like booting up actions through all 23
the reducers. 24
So you know at this point in time we've only created one action. 25
The book's collective action but there actually are some other actions that redux will throw through 26
here by default. 27
Just to say like OK you know like I'm warming up on starting up here let's make sure everything is working 28
just fine right. 29
Since our active book producer is getting called when the application first starts up let's think about 30
what happens there. 31
We're going to say OK some light action comes through. 32
We don't know what the type is but it's definitely not books selected. 33
And so what happens is we have this statement right here says you know just returns state. 34
Well what is the state in that case we defaulted it to null appear right. 35
So what that means is when our application first boots up are active book Peace of state is always going 36
to be. 37
No it doesn't exist. 38
We haven't actually clicked on anything yet so we don't have anything selected. 39
What that means is our component is going to render and it's going to try to say this. 40
Prop stock book title where this part right here is more. 41
So we're trying to read property title of null which throws an error in Javascript. 42
So how do we deal with this. 43
You know this is something that comes across and redux apps all the time. 44
If we don't have a reasonable default for our state or application state it might cause some of our 45
components to just flat out throw an error because they expect some you know property to be defined 46
in here. 47
But we're not giving it that property. 48
So what I usually do is add a initial check and the render method. 49
And inside of it I'll say if not this doc prob stop book and the words if this doc Propst up book doesn't 50
exist yet then will return early. 51
And when we return early we'll say select a book to get started. 52
So it's going to happen here when we first put the app up this dot Propst art book is null which means 53
we're going to enter this case right here if we enter this case. 54
We're going to return early from the render function with this kind of like you know warm up message 55
that says hey you know you haven't really done anything yet. 56
I don't have any information to that to show you yet. 57
Please click on the book to get started. 58
Once they actually click on a book it's going to update our application state which is going to cause 59
our container to re render because we've hooked up this container to redux right when it renders. 60
We will then have this dot Props dot book defined which means we'll successfully get down to this block 61
of code right here and we'll successfully print out the book's title. 62
So let's go ahead and give this a shot. 63
I'm going go back over to my browser let's refresh and it looks like we successfully have a top select 64
a book to get started. 65
So I'm going to go ahead and let's give this a shot. 66
See if everything works in a click on Javascript the good parts and we get details for javascript. 67
The good parts. 68
Harry Potter. 69
Dark Tower eloquent Ruby. 70
Awesome. 71
So this is exactly what we're going for when we click on a book. 72
It selects it and we can see some information about it. 73
So the key here is that we are manipulating our application state over time through the use of action 74
creators. 75
OK so let's spice up the application just a little bit just to show how easy it is to add you know tiny 76
changes over time. 77
I can open up the books reducer and we're going to say that all these books have a length to them in 78
the form of pages so say pages is a number and it just describes how many pages are in the book say 79
have five pages. 80
And Ruby tends to be pretty terse in its syntax. 81
So they only need one page to describe Ruby. 82
Fantastic. 83
All right let's save this and then go back over to the book detail and we'll say that the title right 84
here. 85
Let's put on a nice little thing that says hey this is the title of the book and I'll add another div 86
that says pages. 87
This stop Propst float dot pages 88
and save this and then flip back over to the browser. 89
Refresh. 90
We don't have a initialed book. 91
You know this stuff or are active book of state starts off as. 92
In our application. 93
And so we will say Here we go. 94
Click on one and we get title Javascript the good parts pages Well one Harry Potter Dark Tower eloquent 95
Ruby suite. 96
This looks good. 97
Let's go ahead and review what we've done in the next section