So are apt so far as looking pretty good. 2
We've got our list of books here. 3
You know it took a little bit of code to get here. 4
Well kind of a lot of code that look kind of confusing but we do have our list of books. 5
There's just one problem right now. 6
Our books producer always returns the same list of books. 7
So in other words our application state is always the same. 8
It's 100 percent static. 9
We don't have the ability to change that state over time. 10
And a little bit we're going to want to be able to introduce the concept of an active book. 11
And as you might imagine the active book needs to be able to change as the user clicks on different 12
buttons. 13
So that's really a piece of our application state that needs to change over time. 14
You know it's a dynamic piece of our application state changing our state is what actions and action 15
creators are for. 16
So I going to pull a diagram on the screen that we're going to walk through to help us understand actions 17
and action creators a little bit more. 18
Now this diagram is a little bit crazy but just bear with me for a little bit. 19
We're going to go through it step by step. 20
So this is the diagram of the lifecycle of an action and a redux application. 21
Everything in a rebox application. 22
While most everything starts off with an event triggered by a user either directly or indirectly this 23
event could be them say you know clicking on a button like you know a book over here selecting an item 24
from a dropdown or hovering on a particular element. 25
But it can also be kind of more indirect things like say a Ajax request finishing loading up or a page 26
initially loading up on the actual web page finishing loading all of these events can optionally call 27
an action creator an action creator is a function that returns an action. 28
And this diagram. 29
Let's look at the top flow here right now. 30
We've got book number two. 31
So let's say that whenever the button here Book Number two is clicked we choose because we do have to 32
define this is something that we're going to specifically define whenever whenever a user clicks on 33
button number two it's going to call an action creator the action creator is just a function that returns 34
an object. 35
So you can see right here we've got our function and it returns an object. 36
We'll talk about what's going on inside of the object here in this little bit. 37
But let's just ignore that stuff right now. 38
So the action creator returns an object that object is then automatically sent to all the different 39
reducers inside of our application. 40
So it doesn't matter. 41
You know we might have 20 different reducers all of these actions are going to flow through all of those 42
reducers 43
reducers can choose depending on the action to return a different piece of state depending on what the 44
action is that newly returned Peace of state then gets piped into the application state and then application 45
state then gets pumped back into our re-act application which causes all of our components to re render 46
. 47
OK. 48
So with one run through there let's go through it again but in greater detail. 49
So let's say that whenever a user clicks on this button Book Number two we call an action creator. 50
And you know don't worry we'll go through the process of setting up that action crater entirely but 51
just bear with me for a little bit. 52
So again they click on number two and it calls an action creator the action creator is a function that 53
returns an object the object has a type that describes the type of action that was just triggered. 54
So in this case we might have a type of say a book selected the action can also have some data that 55
further describes the action. 56
And in this case we've got a property on here a book that contains the actual selected book you know 57
in this case the book with title of book too kind of boring book I guess whatever. 58
So the action creator returns that object and the actual object itself is our actual action it's what 59
we call an action the action is automatically sent to all of the reducers inside of our application 60
what will usually do. 61
Inside of all our different reducers and we'll do some a little bit is set up is switch statement inside 62
of our reducers and the switch statement will basically go to a different line depending on the type 63
of the action. 64
So you can see in the code here we'll do a switch on action type and if the book is selected earthy 65
excuse me and the case that the action type is books selected we will return action dot book which in 66
this case would be like you know that the book that we just clicked on reducers doesn't have to react 67
to every different action. 68
It can say like I don't care anything about the current action like it doesn't matter to me in which 69
case it just returns its current state and no status change for that particular reducer. 70
If the producer does care about the action it can return something and that newly returned value will 71
be the new value of state. 72
So in this particular case here for the books selected type of action the action will flow into the 73
reducer here will do a switch on action type if the action type is books selected. 74
The reducer word turn action dot book so the book that was dispatched with the action appear right. 75
So basically the book was titled too because this active book reducer is wired up to the active book 76
key on our state and we haven't wired that up yet. 77
We are going to do that very shortly. 78
It pops up as the new value of the state. 79
So whatever is returned from this reduce ends up as the new value of the state. 80
So in this case this title javascript might be a little bit misleading in this case it would actually 81
be titled book 2. 82
Once all the reducers have processed the action and you are chosen to return state or said no I don't 83
care about that action and can return my current state that new newly assembled action of the newly 84
assembled state gets pumped back into all the different containers and then all the different containers 85
will run that function that we defined in the last section. 86
You remember the map state to prop's Celil redrawn that state will to get dissected injected into all 87
the different containers and all those containers will render with all their data. 88
So that's basically the entire flow right. 89
Once that re-offender finishes our application is then sitting there waiting for the user to trigger 90
another event when they trigger another event. 91
We go through the entire process again. 92
We call an action creator that returns an action the action flows to reducers the reducers assemble 93
our new state and the new state flows into all the containers. 94
All right. 95
So based on the diagram alone this is confusing to understand. 96
So let's go ahead and get to work. 97
Putting together the concept of our active book in the next section