1 00:00:01,080 --> 00:00:07,980 In the last section we made our first action Creator and we bound it to the book list container in this 2 00:00:07,980 --> 00:00:12,340 section we're going to verify that we can actually call it X and Creator and then we're going to add 3 00:00:12,420 --> 00:00:13,580 actual action to it. 4 00:00:13,590 --> 00:00:18,390 You know an action with a type to make sure that we rather than just cancel log which we're doing right 5 00:00:18,390 --> 00:00:24,500 now we can make sure that we return an action that is actually usable by our different reducers. 6 00:00:25,480 --> 00:00:25,880 OK. 7 00:00:25,920 --> 00:00:28,300 So we're going to go back over to booklist here. 8 00:00:28,470 --> 00:00:35,930 Now whenever a user clicks on the line item for a particular book we can call our auction creator and 9 00:00:35,940 --> 00:00:40,620 the last section when we connected the action creator to the component to the container. 10 00:00:40,740 --> 00:00:49,070 We made it available as a prop specifically this props dot select book. 11 00:00:49,920 --> 00:00:56,040 If we add a click event handler on our ally here we can then call the action creator as simply you know 12 00:00:56,040 --> 00:01:02,340 this dot props dot select book and remember we want to call the action creator with the particular book 13 00:01:02,340 --> 00:01:04,390 that was clicked on. 14 00:01:04,440 --> 00:01:11,790 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 00:01:11,790 --> 00:01:21,000 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 00:01:21,000 --> 00:01:28,200 Click event handler silvertail say on click and then we'll pass it a function and we're going to use 17 00:01:28,260 --> 00:01:30,540 a Araf option here. 18 00:01:30,540 --> 00:01:30,980 All right. 19 00:01:31,140 --> 00:01:37,050 So as I mentioned before we know we want to call this dot props dot select book right. 20 00:01:37,050 --> 00:01:40,730 This part is hopefully Well you know take on faith a little bit. 21 00:01:40,760 --> 00:01:46,470 Or I shouldn't say obvious not not obvious at all but I guess what we explain we covered why select 22 00:01:46,500 --> 00:01:49,100 book is available on prop's right. 23 00:01:49,110 --> 00:01:51,540 The key though is what are we going to pass here. 24 00:01:51,540 --> 00:01:52,820 You know what's the argument. 25 00:01:53,310 --> 00:01:54,090 Well it's really simple. 26 00:01:54,120 --> 00:01:56,190 We just get a pass in the book right here. 27 00:01:56,220 --> 00:02:00,720 We're already using the book right we know everything about the book inside of this function that we 28 00:02:00,720 --> 00:02:01,720 pass to map. 29 00:02:01,770 --> 00:02:05,310 We've got the book and referencing its title here already. 30 00:02:05,310 --> 00:02:08,430 So we'll just go ahead and say whenever this thing is clicked. 31 00:02:08,550 --> 00:02:12,690 Call this up Probst just like look and pass it the book. 32 00:02:12,810 --> 00:02:21,930 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 00:02:21,930 --> 00:02:26,240 console and then click on a line item here. 34 00:02:26,550 --> 00:02:28,140 All right you'll notice that we got this error here. 35 00:02:28,140 --> 00:02:28,900 Don't sweat it. 36 00:02:28,980 --> 00:02:33,540 But above it a book has been selected Javascript the good parts. 37 00:02:33,720 --> 00:02:39,060 Harry Potter Dark Tower eloquent Ruby are awesome. 38 00:02:39,630 --> 00:02:44,610 So what this means is that we successfully connected our action creator to the container 39 00:02:47,250 --> 00:02:51,570 and worked successfully calling the action creator which right now is just doing our console log for 40 00:02:51,570 --> 00:02:53,450 us. 41 00:02:53,450 --> 00:02:58,200 I'm going to pull the diagram of our redux cycle back up real quick. 42 00:02:59,280 --> 00:03:00,170 OK here we go. 43 00:03:00,450 --> 00:03:07,610 So basically step one is done when a user clicks on a book we are calling the action creator. 44 00:03:07,620 --> 00:03:12,870 Step two is to make sure that our action creator returns a usable action that can flow through all their 45 00:03:12,870 --> 00:03:14,170 different reducers. 46 00:03:14,520 --> 00:03:19,110 So our action always has more or less the same type of signature. 47 00:03:19,110 --> 00:03:25,580 It's a javascript object with a type property that describes the type of action. 48 00:03:26,040 --> 00:03:33,480 And it also contains some information about that further describes that event. 49 00:03:33,480 --> 00:03:37,090 All right I'm going to close this down a little bit. 50 00:03:37,620 --> 00:03:38,550 All right. 51 00:03:39,330 --> 00:03:47,190 So we want to basically enhance our action create right here so returns a usable action will take out 52 00:03:47,190 --> 00:03:49,210 the console log because we don't really need any more. 53 00:03:49,200 --> 00:03:54,750 We know that this thing is at least getting called and instead we're going to return an object. 54 00:03:54,750 --> 00:03:57,980 So this object right here is going to be our actual action. 55 00:03:58,280 --> 00:03:58,860 So let's add 56 00:04:01,650 --> 00:04:19,440 select book is an action creator and needs to return an action an object with a type property call. 57 00:04:20,820 --> 00:04:29,280 So again actions usually have two values a type and a payload the payload further describes or you know 58 00:04:29,280 --> 00:04:35,490 clarifies the conditions of the action that's being triggered every action must have a type that describes 59 00:04:35,490 --> 00:04:37,890 the purpose of the action. 60 00:04:37,890 --> 00:04:39,490 So let's think about the action here first. 61 00:04:39,540 --> 00:04:43,600 Second the action described is a user selecting the book. 62 00:04:43,650 --> 00:04:47,450 And that's why we gave it the action type book selected. 63 00:04:48,010 --> 00:04:53,880 Let's say type book selected. 64 00:04:54,660 --> 00:04:59,340 You'll notice that right now you might have seen a couple of different tutorials where the type is not 65 00:04:59,350 --> 00:05:02,150 the string but it's actually you know a variable constant. 66 00:05:02,280 --> 00:05:04,950 We will do that in the next section totally. 67 00:05:05,020 --> 00:05:08,860 Right now we're just going to keep it simple and Mer's can use a string here. 68 00:05:09,480 --> 00:05:09,750 OK. 69 00:05:09,750 --> 00:05:13,220 So we know the type we now need to provide the payload. 70 00:05:13,230 --> 00:05:19,350 Basically you know a piece of data that describes the action that's being undertaken and are undertaken 71 00:05:19,360 --> 00:05:19,830 . 72 00:05:20,160 --> 00:05:23,660 So we'll say payload is the actual book. 73 00:05:24,330 --> 00:05:24,680 OK. 74 00:05:24,750 --> 00:05:32,430 So is looking pretty good here to review in-action always contains a type and sometimes contains a payload 75 00:05:33,090 --> 00:05:39,840 the type is always an upper case usually a string usually are always separated by keywords if it's multiple 76 00:05:39,840 --> 00:05:45,670 rooms because it's so important to keep the spell exact spelling of this type consistent. 77 00:05:45,840 --> 00:05:50,610 We usually pull the types out to a separate file but again you know we're just going to use a single 78 00:05:50,610 --> 00:05:55,230 string here because we're going to have one action this app and the next one will do things the 100 79 00:05:55,230 --> 00:05:56,130 percent right way. 80 00:05:56,310 --> 00:05:59,340 But again this is you know very close to how we would normally do it. 81 00:05:59,730 --> 00:06:00,110 OK. 82 00:06:00,120 --> 00:06:05,140 So Step two here is is complete on our diagram. 83 00:06:05,280 --> 00:06:11,820 When a user clicks on the button it calls the action creator and the action creator contains a action 84 00:06:11,820 --> 00:06:12,760 with a type. 85 00:06:12,960 --> 00:06:18,720 And this right here says book but really in our case a payload where the payload is more information 86 00:06:18,720 --> 00:06:20,460 about the action that was just taken. 87 00:06:20,940 --> 00:06:28,420 So we've already done the wiring up for sending the action to all the reducers back in book list. 88 00:06:28,440 --> 00:06:32,970 That was the purpose of the BIND action creators with the dispatch. 89 00:06:32,970 --> 00:06:39,570 So now we have a action that's getting piped into all our all of our different reducers. 90 00:06:39,570 --> 00:06:44,550 Let's continue the next section and update or reduce or to make sure that this action is actually being 91 00:06:44,550 --> 00:06:45,290 used.