In the last section we finished fleshing fleshing out our action create or select a book by returning 2
an actual action from it with a type and a payload let's refer to our diagram again. 3
So we're now basically at this step right here. 4
We have made our auction creator. 5
We know it's getting called and the auction creators are turning in actual action. 6
The end of the last section we also spoke about how because we wired up our booklist as a container 7
the results of the action creator is being automatically sent to all of our different reducers. 8
So all we really have to do now is create our active book reducer and we're going to be good to go. 9
So back over in our code editor we'll create a new reducer by making a new file inside of our inducers 10
folder and we'll call this one reducer active book just like our existing books reducer. 11
Are we going to export a function from here. 12
Now one thing that we hadn't spoken about previously was the arguments to these reducers all reducers 13
get to arguments the current state and action. 14
So reducers are only ever called when an action occurs. 15
So it's always going to have an action here. 16
The state here is a little bit more nebulous. 17
This one's a little bit more confusing. 18
We're going to add specifically a comment to say state argument is not application state only the state 19
. 20
This reducer is responsible for. 21
So what I mean by that I mean that you know as we previously saw with our books reduce our books reduce 22
our is responsible for creating this books property right here. 23
You know the value that's responsible for books. 24
So this state that gets passed as an argument to that books reducer is only the state that was previously 25
generated by the book's producer. 26
So in other words we are the same state that's being produced by these reducers is flowing back into 27
it whenever an action occurs. 28
OK. 29
So you can kind of imagine if we had a piece of state here and we just said state plus equals one every 30
single time any time an action was triggered the state would come in. 31
And let's just say you know it's not an object in this case it's just a number. 32
The state would be incremented by one. 33
So if it starts by starts at zero the first time an action is triggered we're going to add one. 34
So then we one next time as action is triggered then goes up to two and three and four and so on. 35
In other words again same state just keeps flowing into this re reduce or over and over again not the 36
application state. 37
All right. 38
So back on topic here are inducers going to be called whenever an action is dispatched by or out. 39
This means that the function is going to get called like all the time frequently when the action doesn't 40
concern concern to any particular reduce or at any time. 41
So to handle the case in which an action is dispatched that we don't care about. 42
We really need a base case to just return the current state. 43
In other words if we don't care about the current action just pass the state back through. 44
So to make this happen as like our starting case here we'll add a simpler return statement where I will 45
just say returns state. 46
That's it. 47
Nothing else next. 48
Let's do our second case the case in which we do care about the action most redux reducers are set up 49
with javascript's switch statements where the at the switch statement is going to look at the actions 50
type and if it's one we care about we'll return a new state civil rights which action not time. 51
And then will say case book selected and if it is that case return sees me action Daut payload. 52
So we only care about the books selected case is the only one we really care about here. 53
If the action type is book selected no action type is book selected we will return the actions payload 54
which is the selected book. 55
And there's one thing that we need to be aware of here. 56
We need to handle the case in which the user first boots the APAP and no book is immediately selected 57
. 58
Right. 59
If we boot the app up and the user hasn't clicked on anything yet we're just me turning state. 60
Right. 61
Right now our inducer would return undefined redux doesn't really allow us to return undefined from 62
or douceur it's going to throw an error. 63
We must always return a non undefined value. 64
So to handle this initial case we'll default the value of the state argument to null. 65
So at the top. 66
All right. 67
State is no. 68
This is a piece of ES6 syntax and basically what it says is when this argument comes in if it's undefined 69
. 70
Set it to nil. 71
All right so this reducers looking pretty good. 72
If the action has a type of books selected will return the book that was selected action not payload 73
. 74
If the action is anything else we just return the current state. 75
One other really important item here. 76
It's really important that we never Mutti our current state to produce a new version of the state the 77
object that return from our producer must always be a 100 percent fresh and clean. 78
In other words don't use something like. 79
Instead of you know this right here. 80
Don't do something like state title equals book title and then return state. 81
We always want to return a fresh object. 82
Remember producers need to be connected into the combined reducers statement in index dot J Yes. 83
So let's hop on over there. 84
Member this file right here and we'll import our active book reducer 85
reducer active book 86
and then we'll add it to our combined reducers call as another piece of state. 87
So we'll say active book is Active book like so remember any key to the object that we provide to combine 88
reducers ends up as a key on our global state. 89
All right. 90
So let's look at our diagram again. 91
We've now created a reducer that called the book selected action and returns the payload the selected 92
book will now end up as the value for active book our state. 93
Let's continue in the next section where we'll verify that everything got set up correctly.