1

00:00:00,840  -->  00:00:07,200
In the last section we meet a container out of the newly created book detail component so we can now

2

00:00:07,200  -->  00:00:13,720
make use of this dot props dot book inside of the container because we mapped our state our application

3

00:00:13,720  -->  00:00:18,450
state to the props of this particular component here.

4

00:00:18,550  -->  00:00:24,600
OK so now that we've got that let's go ahead and print out the title of the currently selected book

5

00:00:24,600  -->  00:00:25,230
.

6

00:00:25,440  -->  00:00:31,440
So I'm going to remove our placeholder text in here and we replace it with an H three and we'll say

7

00:00:31,440  -->  00:00:40,320
details for and then we'll add another div and inside of here we'll put our curly braces with this dot

8

00:00:40,490  -->  00:00:43,540
props dot dot title.

9

00:00:44,530  -->  00:00:44,930
OK.

10

00:00:44,940  -->  00:00:47,000
So make it simple enough here right.

11

00:00:47,010  -->  00:00:53,580
We've got this dot props dot book title that will print out the title of the book and save this and

12

00:00:53,580  -->  00:00:55,520
flip back over to the browser.

13

00:00:55,560  -->  00:00:59,100
So we've got our stuff on the left and we've got our book details on top.

14

00:00:59,100  -->  00:01:05,820
I'm going to go ahead now and refresh the page and you'll notice that we get a big ole error message

15

00:01:05,820  -->  00:01:10,700
here says cannot read property title of NULL.

16

00:01:11,280  -->  00:01:14,170
So let's think about exactly what's going on here.

17

00:01:14,910  -->  00:01:18,780
I'm going to flip open our active book reducer

18

00:01:21,450  -->  00:01:24,450
whenever our application first boots up.

19

00:01:24,480  -->  00:01:27,520
We don't have any existing application state right.

20

00:01:27,550  -->  00:01:29,290
It hasn't been defined yet.

21

00:01:29,310  -->  00:01:34,730
Remember our application state is assembled entirely by all of our reducers.

22

00:01:34,730  -->  00:01:40,560
So under the hood what redux does is it sends a couple of kind of like booting up actions through all

23

00:01:40,560  -->  00:01:41,770
the reducers.

24

00:01:41,940  -->  00:01:45,100
So you know at this point in time we've only created one action.

25

00:01:45,120  -->  00:01:49,800
The book's collective action but there actually are some other actions that redux will throw through

26

00:01:49,800  -->  00:01:50,800
here by default.

27

00:01:50,820  -->  00:01:55,290
Just to say like OK you know like I'm warming up on starting up here let's make sure everything is working

28

00:01:55,290  -->  00:01:57,680
just fine right.

29

00:01:57,840  -->  00:02:04,200
Since our active book producer is getting called when the application first starts up let's think about

30

00:02:04,200  -->  00:02:05,460
what happens there.

31

00:02:05,640  -->  00:02:08,510
We're going to say OK some light action comes through.

32

00:02:08,700  -->  00:02:12,390
We don't know what the type is but it's definitely not books selected.

33

00:02:12,390  -->  00:02:17,800
And so what happens is we have this statement right here says you know just returns state.

34

00:02:18,540  -->  00:02:24,780
Well what is the state in that case we defaulted it to null appear right.

35

00:02:25,020  -->  00:02:32,010
So what that means is when our application first boots up are active book Peace of state is always going

36

00:02:32,010  -->  00:02:32,860
to be.

37

00:02:32,950  -->  00:02:34,430
No it doesn't exist.

38

00:02:34,440  -->  00:02:38,340
We haven't actually clicked on anything yet so we don't have anything selected.

39

00:02:38,340  -->  00:02:43,600
What that means is our component is going to render and it's going to try to say this.

40

00:02:43,620  -->  00:02:47,980
Prop stock book title where this part right here is more.

41

00:02:48,000  -->  00:02:53,940
So we're trying to read property title of null which throws an error in Javascript.

42

00:02:53,940  -->  00:02:55,140
So how do we deal with this.

43

00:02:55,140  -->  00:02:58,230
You know this is something that comes across and redux apps all the time.

44

00:02:58,260  -->  00:03:05,070
If we don't have a reasonable default for our state or application state it might cause some of our

45

00:03:05,070  -->  00:03:10,260
components to just flat out throw an error because they expect some you know property to be defined

46

00:03:10,260  -->  00:03:10,810
in here.

47

00:03:10,980  -->  00:03:13,150
But we're not giving it that property.

48

00:03:13,170  -->  00:03:18,700
So what I usually do is add a initial check and the render method.

49

00:03:19,380  -->  00:03:27,120
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

00:03:27,120  -->  00:03:32,850
exist yet then will return early.

51

00:03:35,820  -->  00:03:45,850
And when we return early we'll say select a book to get started.

52

00:03:46,050  -->  00:03:51,330
So it's going to happen here when we first put the app up this dot Propst art book is null which means

53

00:03:51,330  -->  00:03:55,470
we're going to enter this case right here if we enter this case.

54

00:03:55,470  -->  00:04:00,400
We're going to return early from the render function with this kind of like you know warm up message

55

00:04:00,400  -->  00:04:02,830
that says hey you know you haven't really done anything yet.

56

00:04:02,850  -->  00:04:05,270
I don't have any information to that to show you yet.

57

00:04:05,280  -->  00:04:07,570
Please click on the book to get started.

58

00:04:07,680  -->  00:04:12,510
Once they actually click on a book it's going to update our application state which is going to cause

59

00:04:12,510  -->  00:04:19,580
our container to re render because we've hooked up this container to redux right when it renders.

60

00:04:19,680  -->  00:04:25,590
We will then have this dot Props dot book defined which means we'll successfully get down to this block

61

00:04:25,590  -->  00:04:30,120
of code right here and we'll successfully print out the book's title.

62

00:04:30,150  -->  00:04:32,660
So let's go ahead and give this a shot.

63

00:04:32,730  -->  00:04:39,120
I'm going go back over to my browser let's refresh and it looks like we successfully have a top select

64

00:04:39,120  -->  00:04:41,430
a book to get started.

65

00:04:42,810  -->  00:04:45,010
So I'm going to go ahead and let's give this a shot.

66

00:04:45,010  -->  00:04:50,880
See if everything works in a click on Javascript the good parts and we get details for javascript.

67

00:04:50,880  -->  00:04:52,230
The good parts.

68

00:04:52,290  -->  00:04:53,450
Harry Potter.

69

00:04:53,610  -->  00:04:56,040
Dark Tower eloquent Ruby.

70

00:04:56,470  -->  00:04:56,900
Awesome.

71

00:04:56,940  -->  00:04:59,660
So this is exactly what we're going for when we click on a book.

72

00:04:59,700  -->  00:05:02,300
It selects it and we can see some information about it.

73

00:05:02,400  -->  00:05:08,730
So the key here is that we are manipulating our application state over time through the use of action

74

00:05:08,730  -->  00:05:10,560
creators.

75

00:05:11,620  -->  00:05:17,280
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

00:05:17,280  -->  00:05:19,000
changes over time.

77

00:05:19,250  -->  00:05:26,430
I can open up the books reducer and we're going to say that all these books have a length to them in

78

00:05:26,430  -->  00:05:36,920
the form of pages so say pages is a number and it just describes how many pages are in the book say

79

00:05:37,040  -->  00:05:38,990
have five pages.

80

00:05:39,510  -->  00:05:43,090
And Ruby tends to be pretty terse in its syntax.

81

00:05:43,140  -->  00:05:46,070
So they only need one page to describe Ruby.

82

00:05:46,350  -->  00:05:47,440
Fantastic.

83

00:05:47,880  -->  00:05:54,300
All right let's save this and then go back over to the book detail and we'll say that the title right

84

00:05:54,300  -->  00:05:54,530
here.

85

00:05:54,540  -->  00:05:59,400
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

00:05:59,550  -->  00:06:01,620
that says pages.

87

00:06:01,880  -->  00:06:05,070
This stop Propst float dot pages

88

00:06:08,210  -->  00:06:12,560
and save this and then flip back over to the browser.

89

00:06:12,930  -->  00:06:13,980
Refresh.

90

00:06:14,190  -->  00:06:15,880
We don't have a initialed book.

91

00:06:15,900  -->  00:06:20,200
You know this stuff or are active book of state starts off as.

92

00:06:20,250  -->  00:06:21,440
In our application.

93

00:06:21,900  -->  00:06:24,050
And so we will say Here we go.

94

00:06:24,090  -->  00:06:31,170
Click on one and we get title Javascript the good parts pages Well one Harry Potter Dark Tower eloquent

95

00:06:31,170  -->  00:06:33,000
Ruby suite.

96

00:06:33,030  -->  00:06:34,280
This looks good.

97

00:06:34,830  -->  00:06:37,480
Let's go ahead and review what we've done in the next section