In the last section we finished a overview on actions and action creators remember in action creator 2
is just a function that returns an action and an action is just an object that flows through all of 3
our different reducers reducers can then use that action to produce a different value for its particular 4
piece of state. 5
Our goal here is to give the ability give our user the ability to click on a book and see a detail containing 6
more information about it. 7
Step number 1 in this process is to make sure that clicking on a book will actually trigger an action 8
creator. 9
So here's how we're going to make that happen. 10
We're going to define in-action creator and we're going to make sure that we call it whenever a book 11
title is clicked on. 12
Makes sense right. 13
Let's start with creating the action creator first and the actions folder. 14
I'm going to open up index. 15
JS and for right now this is going to contain all the different action creators that we make. 16
For now we're going to create a single action creator called select book in action creator is just a 17
function and we're going to call it select book. 18
It's going to take as it's only argument a book which is a object with a title. 19
Right now we're just going to console log whatever gets passed in here. 20
So we'll say a book has been selected and we'll just cancel on the title. 21
We're also going to make sure that we export this function because obviously you know we want to make 22
use of this action Creator in other places inside of our application. 23
All right. 24
So you go ahead and save this. 25
So here's our action. 26
We just need to be able to call it. 27
Or whenever a user actually clicks on the book. 28
So you might think to yourself you know OK no problem is going to import it into the booklist component 29
and we're going to call it in a click handler. 30
Unfortunately not quite so simple right now this is just a plain function right. 31
We need to make sure that the action that gets returned from it ends up running through all of our inducers 32
so we can just call this function and expect that the action is going to show up in the right place 33
. 34
Right. 35
We actually have to actually make sure that this action creator is wired up to redux. 36
Do you remember when we were working on booklist. 37
And we created a connection between booklist and our state with this connector function right here. 38
It turned booklist from a component into a container. 39
So we're going to further connect this component by binding the select book action to this booklist 40
component. 41
We're going to do throw down a little bit of code here and then walk through it trying to explain that 42
aforehand is pleasing you all a bit confusing so let's just do some typing first and then we'll talk 43
about exactly what's going on. 44
So at the top we're first going to import the action creator select book. 45
Right now we're in containers so we're going to go up into actions and then get index. 46
So we'll go up into actions and then get index like so next we're going to import a function called 47
bind action creators from redux. 48
This is a function is by an action crater's right here is what we're going to use to make sure that 49
the action that is generated by the action Krater actually ends up flowing through all the different 50
reducers. 51
So this is the part right here where we take that return value from select book and make sure that it 52
actually flows through all the different reducers in our application. 53
Next at the bottom we're going to define another function here called Map dispatch to prop's the first 54
argument is going to be dispatch. 55
And this is definitely where we're going into. 56
You know let's write some code and then explain what's going on. 57
So just bear with me for a second here inside of here. 58
We're going to return bind action creators and we're going to pass it an object with a key of select 59
book and a value of Selecta book. 60
So in this case the select book right here is the actual auction creator that we imported out the top 61
. 62
Then the second argument after the object will be dispatch 63
finally at the bottom on the connect line here we're going to add another argument and it's going to 64
be map dispatch to prompts like so. 65
OK. 66
So a lot of coding here. 67
Stuff like bind action creators is definitely doesn't help explain what's going on at all. 68
So let's walk through this by adding some comments to the code that we just wrote. 69
So first let's start inside of map dispatch to prop's. 70
Whenever select book is called The result should be passed to all of our reducers. 71
That's what bind action creators is doing here with the dispatch right here it's saying OK you know 72
I understand that you're going to call select book I understand this is an action creator that you're 73
going to call at some point in time whenever it gets called. 74
I want to make sure that the result of it flows through this dispatch function right here and this dispatch 75
function is what takes all these actions and it basically you know receives them kind of like a funnel 76
when it spits them back out to all the different reducers in our application. 77
So again bind action creators with dispatch says. 78
All right. 79
You know I'm going to take this stuff and I'm going to take all these actions and make sure that they 80
get passed on to all the different reducers inside the application. 81
Next the actual function map dispatched to profs anything returned from this function will end up as 82
props on the book list container. 83
So notice how we specifically are passing an object with key select book and value select book. 84
So just in the same way that map state to prop's worked where you know whenever we return and has ended 85
up as props on our component on our container. 86
Same exact thing for map dispatch see prop's whatever is returned from this function. 87
But you know you know. 88
So in reality whatever we pass here is the first argument is going to be available as props to our container 89
. 90
So now that we've defined this inside of our container we can call this prop select book specifically 91
because this key right here this is the magic right here. 92
This does Propst us select book and that we'll call our action Creator. 93
All right. 94
There's one last piece in here. 95
We've got to explain. 96
We're going to say we're going to kind of add a comment here that kind of also explains what's going 97
on with Mount stage props. 98
So will say promote book list from a component to a container. 99
It needs to know about this new dispatch method. 100
Select book make it available as a prop. 101
OK. 102
So without a doubt this is probably the most confusing code around and redux. 103
If you start working on your own project I highly recommend you reference the re-act redux documentation 104
as it gives a great guide of all the different ways that you can use connect here and a great guide 105
of all the different ways that you can take pieces of state or your different action creators that you 106
define and make them available on your container. 107
But what we covered here is probably the most generic and most Wylie's use case the case in which we 108
want to take some state and map it to the props of our container and the case in which we want to take 109
a action creator and make it available to be called on side of the container as well. 110
One last thing I want to view this one more time because I feel like it's probably the biggest leap 111
of faith here is the action creator with his bind action creators and this dispatch method right here 112
. 113
Again the purpose here is select but is a just Toli plain function. 114
Nothing special about it right. 115
It returns a plain javascript object. 116
If we just call it and we get the object back inside of our component we'd be sitting there like. 117
All right I've got this action. 118
You know what in the world am I going to do with it. 119
You know we have no idea what to do with it. 120
The only part of our application actually cares about that action is the reducers. 121
So is the purpose of BIND action creators and dispatch is specifically to take what gets returned from 122
select book and makes sure that it flows through all the reducers. 123
That's the purpose of BIND action creators and dispatch. 124
Now if you're still confused on why we would want these actions to flow through the reduce or at all 125
in the first place we're going to cover that in the next section. 126
So first in the next section we're going to make sure that booklist can actually call this action create 127
or select a book here. 128
So let's cover that in the next section.