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