In the last section we made our first action Creator and we bound it to the book list container in this 2
section we're going to verify that we can actually call it X and Creator and then we're going to add 3
actual action to it. 4
You know an action with a type to make sure that we rather than just cancel log which we're doing right 5
now we can make sure that we return an action that is actually usable by our different reducers. 6
OK. 7
So we're going to go back over to booklist here. 8
Now whenever a user clicks on the line item for a particular book we can call our auction creator and 9
the last section when we connected the action creator to the component to the container. 10
We made it available as a prop specifically this props dot select book. 11
If we add a click event handler on our ally here we can then call the action creator as simply you know 12
this dot props dot select book and remember we want to call the action creator with the particular book 13
that was clicked on. 14
So we're going go ahead and at our Click event handler to the live right here we're going to do a little 15
bit of spacing just to make it more clear what we're doing like so and then we'll go ahead and add our 16
Click event handler silvertail say on click and then we'll pass it a function and we're going to use 17
a Araf option here. 18
All right. 19
So as I mentioned before we know we want to call this dot props dot select book right. 20
This part is hopefully Well you know take on faith a little bit. 21
Or I shouldn't say obvious not not obvious at all but I guess what we explain we covered why select 22
book is available on prop's right. 23
The key though is what are we going to pass here. 24
You know what's the argument. 25
Well it's really simple. 26
We just get a pass in the book right here. 27
We're already using the book right we know everything about the book inside of this function that we 28
pass to map. 29
We've got the book and referencing its title here already. 30
So we'll just go ahead and say whenever this thing is clicked. 31
Call this up Probst just like look and pass it the book. 32
All right let's save this and give it a shot in the browser so I can refresh the page and pop open the 33
console and then click on a line item here. 34
All right you'll notice that we got this error here. 35
Don't sweat it. 36
But above it a book has been selected Javascript the good parts. 37
Harry Potter Dark Tower eloquent Ruby are awesome. 38
So what this means is that we successfully connected our action creator to the container 39
and worked successfully calling the action creator which right now is just doing our console log for 40
us. 41
I'm going to pull the diagram of our redux cycle back up real quick. 42
OK here we go. 43
So basically step one is done when a user clicks on a book we are calling the action creator. 44
Step two is to make sure that our action creator returns a usable action that can flow through all their 45
different reducers. 46
So our action always has more or less the same type of signature. 47
It's a javascript object with a type property that describes the type of action. 48
And it also contains some information about that further describes that event. 49
All right I'm going to close this down a little bit. 50
All right. 51
So we want to basically enhance our action create right here so returns a usable action will take out 52
the console log because we don't really need any more. 53
We know that this thing is at least getting called and instead we're going to return an object. 54
So this object right here is going to be our actual action. 55
So let's add 56
select book is an action creator and needs to return an action an object with a type property call. 57
So again actions usually have two values a type and a payload the payload further describes or you know 58
clarifies the conditions of the action that's being triggered every action must have a type that describes 59
the purpose of the action. 60
So let's think about the action here first. 61
Second the action described is a user selecting the book. 62
And that's why we gave it the action type book selected. 63
Let's say type book selected. 64
You'll notice that right now you might have seen a couple of different tutorials where the type is not 65
the string but it's actually you know a variable constant. 66
We will do that in the next section totally. 67
Right now we're just going to keep it simple and Mer's can use a string here. 68
OK. 69
So we know the type we now need to provide the payload. 70
Basically you know a piece of data that describes the action that's being undertaken and are undertaken 71
. 72
So we'll say payload is the actual book. 73
OK. 74
So is looking pretty good here to review in-action always contains a type and sometimes contains a payload 75
the type is always an upper case usually a string usually are always separated by keywords if it's multiple 76
rooms because it's so important to keep the spell exact spelling of this type consistent. 77
We usually pull the types out to a separate file but again you know we're just going to use a single 78
string here because we're going to have one action this app and the next one will do things the 100 79
percent right way. 80
But again this is you know very close to how we would normally do it. 81
OK. 82
So Step two here is is complete on our diagram. 83
When a user clicks on the button it calls the action creator and the action creator contains a action 84
with a type. 85
And this right here says book but really in our case a payload where the payload is more information 86
about the action that was just taken. 87
So we've already done the wiring up for sending the action to all the reducers back in book list. 88
That was the purpose of the BIND action creators with the dispatch. 89
So now we have a action that's getting piped into all our all of our different reducers. 90
Let's continue the next section and update or reduce or to make sure that this action is actually being 91
used.