1

00:00:00,710  -->  00:00:07,200
In the last section we finished fleshing fleshing out our action create or select a book by returning

2

00:00:07,200  -->  00:00:13,030
an actual action from it with a type and a payload let's refer to our diagram again.

3

00:00:13,110  -->  00:00:16,790
So we're now basically at this step right here.

4

00:00:17,000  -->  00:00:18,630
We have made our auction creator.

5

00:00:18,630  -->  00:00:22,980
We know it's getting called and the auction creators are turning in actual action.

6

00:00:23,430  -->  00:00:29,070
The end of the last section we also spoke about how because we wired up our booklist as a container

7

00:00:29,460  -->  00:00:34,490
the results of the action creator is being automatically sent to all of our different reducers.

8

00:00:34,680  -->  00:00:40,100
So all we really have to do now is create our active book reducer and we're going to be good to go.

9

00:00:40,820  -->  00:00:46,710
So back over in our code editor we'll create a new reducer by making a new file inside of our inducers

10

00:00:46,710  -->  00:00:56,100
folder and we'll call this one reducer active book just like our existing books reducer.

11

00:00:56,180  -->  00:01:01,040
Are we going to export a function from here.

12

00:01:01,110  -->  00:01:06,420
Now one thing that we hadn't spoken about previously was the arguments to these reducers all reducers

13

00:01:06,420  -->  00:01:12,740
get to arguments the current state and action.

14

00:01:12,890  -->  00:01:16,240
So reducers are only ever called when an action occurs.

15

00:01:16,410  -->  00:01:18,720
So it's always going to have an action here.

16

00:01:18,720  -->  00:01:21,120
The state here is a little bit more nebulous.

17

00:01:21,120  -->  00:01:24,310
This one's a little bit more confusing.

18

00:01:24,360  -->  00:01:32,940
We're going to add specifically a comment to say state argument is not application state only the state

19

00:01:32,940  -->  00:01:33,850
.

20

00:01:34,230  -->  00:01:37,670
This reducer is responsible for.

21

00:01:38,030  -->  00:01:45,970
So what I mean by that I mean that you know as we previously saw with our books reduce our books reduce

22

00:01:45,970  -->  00:01:50,400
our is responsible for creating this books property right here.

23

00:01:50,400  -->  00:01:52,930
You know the value that's responsible for books.

24

00:01:53,640  -->  00:02:00,240
So this state that gets passed as an argument to that books reducer is only the state that was previously

25

00:02:00,240  -->  00:02:02,340
generated by the book's producer.

26

00:02:02,340  -->  00:02:08,940
So in other words we are the same state that's being produced by these reducers is flowing back into

27

00:02:08,940  -->  00:02:10,500
it whenever an action occurs.

28

00:02:10,500  -->  00:02:10,940
OK.

29

00:02:11,130  -->  00:02:22,020
So you can kind of imagine if we had a piece of state here and we just said state plus equals one every

30

00:02:22,020  -->  00:02:25,890
single time any time an action was triggered the state would come in.

31

00:02:25,890  -->  00:02:28,990
And let's just say you know it's not an object in this case it's just a number.

32

00:02:29,010  -->  00:02:30,610
The state would be incremented by one.

33

00:02:30,630  -->  00:02:36,400
So if it starts by starts at zero the first time an action is triggered we're going to add one.

34

00:02:36,420  -->  00:02:41,860
So then we one next time as action is triggered then goes up to two and three and four and so on.

35

00:02:41,880  -->  00:02:49,230
In other words again same state just keeps flowing into this re reduce or over and over again not the

36

00:02:49,230  -->  00:02:51,740
application state.

37

00:02:51,900  -->  00:02:52,700
All right.

38

00:02:53,250  -->  00:03:00,440
So back on topic here are inducers going to be called whenever an action is dispatched by or out.

39

00:03:00,570  -->  00:03:05,430
This means that the function is going to get called like all the time frequently when the action doesn't

40

00:03:05,440  -->  00:03:10,870
concern concern to any particular reduce or at any time.

41

00:03:11,040  -->  00:03:15,180
So to handle the case in which an action is dispatched that we don't care about.

42

00:03:15,180  -->  00:03:18,780
We really need a base case to just return the current state.

43

00:03:18,990  -->  00:03:23,480
In other words if we don't care about the current action just pass the state back through.

44

00:03:24,000  -->  00:03:30,120
So to make this happen as like our starting case here we'll add a simpler return statement where I will

45

00:03:30,290  -->  00:03:31,470
just say returns state.

46

00:03:31,500  -->  00:03:31,920
That's it.

47

00:03:31,920  -->  00:03:34,980
Nothing else next.

48

00:03:35,100  -->  00:03:44,100
Let's do our second case the case in which we do care about the action most redux reducers are set up

49

00:03:44,280  -->  00:03:49,200
with javascript's switch statements where the at the switch statement is going to look at the actions

50

00:03:49,230  -->  00:03:57,800
type and if it's one we care about we'll return a new state civil rights which action not time.

51

00:04:00,300  -->  00:04:18,730
And then will say case book selected and if it is that case return sees me action Daut payload.

52

00:04:18,870  -->  00:04:25,640
So we only care about the books selected case is the only one we really care about here.

53

00:04:26,160  -->  00:04:33,630
If the action type is book selected no action type is book selected we will return the actions payload

54

00:04:34,140  -->  00:04:36,470
which is the selected book.

55

00:04:36,810  -->  00:04:39,280
And there's one thing that we need to be aware of here.

56

00:04:39,390  -->  00:04:45,300
We need to handle the case in which the user first boots the APAP and no book is immediately selected

57

00:04:45,300  -->  00:04:45,330
.

58

00:04:45,330  -->  00:04:46,200
Right.

59

00:04:46,800  -->  00:04:52,410
If we boot the app up and the user hasn't clicked on anything yet we're just me turning state.

60

00:04:52,440  -->  00:04:54,820
Right.

61

00:04:54,900  -->  00:05:00,750
Right now our inducer would return undefined redux doesn't really allow us to return undefined from

62

00:05:00,750  -->  00:05:02,280
or douceur it's going to throw an error.

63

00:05:02,330  -->  00:05:06,000
We must always return a non undefined value.

64

00:05:06,000  -->  00:05:13,490
So to handle this initial case we'll default the value of the state argument to null.

65

00:05:13,920  -->  00:05:14,780
So at the top.

66

00:05:14,800  -->  00:05:15,280
All right.

67

00:05:15,290  -->  00:05:16,970
State is no.

68

00:05:17,250  -->  00:05:24,030
This is a piece of ES6 syntax and basically what it says is when this argument comes in if it's undefined

69

00:05:24,030  -->  00:05:24,130
.

70

00:05:24,180  -->  00:05:27,240
Set it to nil.

71

00:05:27,270  -->  00:05:29,280
All right so this reducers looking pretty good.

72

00:05:29,580  -->  00:05:36,230
If the action has a type of books selected will return the book that was selected action not payload

73

00:05:36,240  -->  00:05:37,070
.

74

00:05:37,080  -->  00:05:41,820
If the action is anything else we just return the current state.

75

00:05:41,820  -->  00:05:43,700
One other really important item here.

76

00:05:43,710  -->  00:05:48,840
It's really important that we never Mutti our current state to produce a new version of the state the

77

00:05:48,840  -->  00:05:53,420
object that return from our producer must always be a 100 percent fresh and clean.

78

00:05:53,430  -->  00:05:55,610
In other words don't use something like.

79

00:05:55,770  -->  00:05:57,490
Instead of you know this right here.

80

00:05:57,500  -->  00:06:04,050
Don't do something like state title equals book title and then return state.

81

00:06:04,050  -->  00:06:09,290
We always want to return a fresh object.

82

00:06:09,840  -->  00:06:15,740
Remember producers need to be connected into the combined reducers statement in index dot J Yes.

83

00:06:16,060  -->  00:06:17,540
So let's hop on over there.

84

00:06:17,580  -->  00:06:22,710
Member this file right here and we'll import our active book reducer

85

00:06:29,680  -->  00:06:33,960
reducer active book

86

00:06:36,900  -->  00:06:42,210
and then we'll add it to our combined reducers call as another piece of state.

87

00:06:42,260  -->  00:06:51,210
So we'll say active book is Active book like so remember any key to the object that we provide to combine

88

00:06:51,210  -->  00:06:55,340
reducers ends up as a key on our global state.

89

00:06:56,460  -->  00:06:56,720
All right.

90

00:06:56,730  -->  00:06:59,100
So let's look at our diagram again.

91

00:06:59,100  -->  00:07:06,120
We've now created a reducer that called the book selected action and returns the payload the selected

92

00:07:06,120  -->  00:07:10,970
book will now end up as the value for active book our state.

93

00:07:11,820  -->  00:07:15,960
Let's continue in the next section where we'll verify that everything got set up correctly.