1 00:00:00,950 --> 00:00:06,840 In the last section we add in another reduce or whose purpose was to record whether or not a particular 2 00:00:06,840 --> 00:00:11,150 row was selected or not by default that reduced or will always return NULL. 3 00:00:11,160 --> 00:00:16,650 So we don't really have any selection logic right now which means we need to figure out how to update 4 00:00:16,950 --> 00:00:19,230 the currently selected ID from the list item. 5 00:00:19,260 --> 00:00:22,380 So in other words when a user taps on a list item. 6 00:00:22,380 --> 00:00:28,020 How do I make sure to update my selected library ID piece of state. 7 00:00:28,080 --> 00:00:32,110 So that's what we're going to try to figure out here at this point in time. 8 00:00:32,160 --> 00:00:38,700 We have not really made use of any actions inside this component just yet so we're going to have to 9 00:00:38,700 --> 00:00:44,910 remember from our very brief walkthrough on redux exactly how we update any piece of state and cyder 10 00:00:44,910 --> 00:00:46,530 application. 11 00:00:46,530 --> 00:00:48,340 It's going to pull up a diagram really quick. 12 00:00:51,170 --> 00:00:52,900 And here we go. 13 00:00:53,600 --> 00:00:53,920 OK. 14 00:00:53,930 --> 00:01:00,850 So if you recall we had introduced the concept of actions in addition to our reducers much previously 15 00:01:00,860 --> 00:01:03,410 so forget these two squares words on the left hand side. 16 00:01:03,560 --> 00:01:05,840 Let's just focus on the right hand side. 17 00:01:05,990 --> 00:01:11,390 An action is a plain javascript object that has a type property. 18 00:01:11,390 --> 00:01:17,000 This type property can be thought of as like a command or a direction like an instruction to be passed 19 00:01:17,000 --> 00:01:18,610 off to the reducer. 20 00:01:18,620 --> 00:01:25,160 So in our case we might create an action of type I don't know maybe like select a library or something 21 00:01:25,160 --> 00:01:32,480 like that and pass along the ID of the library to be selected then inside of our selection reducer we 22 00:01:32,480 --> 00:01:35,250 should record that very particular ID. 23 00:01:35,290 --> 00:01:40,520 Right we should say okay this is now the idea that is selected but we're missing a little bit of a piece 24 00:01:40,520 --> 00:01:41,640 of the puzzle there. 25 00:01:41,720 --> 00:01:43,340 We are inside of a component. 26 00:01:43,340 --> 00:01:48,940 So how exactly do we create or dispatch an action from inside of a component. 27 00:01:49,310 --> 00:01:52,870 Well I'm going to throw another piece of redux terminology Aggi now. 28 00:01:53,000 --> 00:01:57,040 Obviously it is the you know extra square on this diagram here. 29 00:01:57,040 --> 00:02:00,200 We're going to create what is called an action creator. 30 00:02:00,560 --> 00:02:06,710 So inside of the previous example three locks we did we created an action and called stored dot dispatch 31 00:02:06,920 --> 00:02:12,910 to send off that action to all of our inducers inside of a re-act redux application. 32 00:02:12,920 --> 00:02:16,510 That process is just a little bit different. 33 00:02:16,550 --> 00:02:22,640 So inside of a re-act application we make what is called an action creator and then we call the action 34 00:02:22,640 --> 00:02:23,770 creator. 35 00:02:23,840 --> 00:02:31,100 The purpose of the action creator is to just exactly as the name suggests create an action. 36 00:02:31,100 --> 00:02:31,550 That's it. 37 00:02:31,550 --> 00:02:32,900 It creates an action. 38 00:02:32,960 --> 00:02:39,640 So again in the kind of theme of putting plain text definitions do all these things the purpose. 39 00:02:39,650 --> 00:02:45,500 Let me give a plain text definition actually creator and actually creator is a javascript function that 40 00:02:45,500 --> 00:02:46,620 returns an action. 41 00:02:46,910 --> 00:02:47,410 That's it. 42 00:02:47,540 --> 00:02:51,350 OK so let me stop lecturing now because I know sometimes I go overboard. 43 00:02:51,620 --> 00:02:56,100 Let's get some practice with creating an action creator. 44 00:02:56,200 --> 00:03:03,110 So back inside my project directory I'm going to make a new folder inside of my source directory called 45 00:03:03,560 --> 00:03:11,420 actions and then insight of actions I'm going to make another file called index dot J.S.. 46 00:03:11,450 --> 00:03:16,940 So inside of this file is where I will locate all of the different action credos for my project. 47 00:03:16,940 --> 00:03:21,980 In this case I only start to have one action creator because the only action we have is the ability 48 00:03:21,980 --> 00:03:24,470 to change the currently selected library. 49 00:03:24,530 --> 00:03:32,210 So I expect to just have one single action creator inside this file right now remember that an action 50 00:03:32,210 --> 00:03:34,490 creator is a javascript function. 51 00:03:34,490 --> 00:03:38,230 So I'm going to create a function and immediately export it. 52 00:03:38,270 --> 00:03:47,120 So I mean to say export Konst select library and that is going to be a function like so then inside 53 00:03:47,120 --> 00:03:49,970 of here I will return my action. 54 00:03:49,970 --> 00:03:58,910 So I'm going to return a plain javascript object with property type of select library. 55 00:03:59,270 --> 00:04:01,410 Ok so I know I know they move very quickly right there. 56 00:04:01,430 --> 00:04:05,960 But let's let's like take a step back and look at what we just did today. 57 00:04:06,010 --> 00:04:12,830 I want you to focus most on is the very internal like statement or expression inside of this entire 58 00:04:12,830 --> 00:04:13,910 file right here. 59 00:04:13,910 --> 00:04:16,770 I have an object with a type property. 60 00:04:16,940 --> 00:04:18,400 We've gone over this several times now. 61 00:04:18,420 --> 00:04:24,260 An object with a type property is an action and an action is how we cause producers to update the data 62 00:04:24,620 --> 00:04:26,890 that they produce. 63 00:04:27,230 --> 00:04:33,330 The action is wrapped by a function which we refer to as an action creator. 64 00:04:33,380 --> 00:04:37,250 So this function right here is what we call an action creator 65 00:04:41,140 --> 00:04:46,600 whenever we call this action creator they return to action will be automatically dispatched to us for 66 00:04:46,600 --> 00:04:48,980 us and sent off to all the different reducers. 67 00:04:49,060 --> 00:04:55,180 OK so last thing we have to do with this action right here is figure out well you know we are selecting 68 00:04:55,180 --> 00:05:00,370 a library but we need to make sure that we instruct the reducer exactly which library we are trying 69 00:05:00,370 --> 00:05:01,720 to select. 70 00:05:01,780 --> 00:05:07,330 So I'm going to suggest that we whenever we call this action creator right here we should pass in the 71 00:05:07,330 --> 00:05:10,380 ID of the library that we want to select. 72 00:05:10,810 --> 00:05:19,260 So I'm going to add an argument to this library ID and then I will attach a payload to the action library 73 00:05:19,270 --> 00:05:20,550 ID. 74 00:05:20,650 --> 00:05:25,960 So now whenever I call this action creator I must provide a library Id like the library that I want 75 00:05:25,960 --> 00:05:30,650 to select and that will be attached to the action as the payload. 76 00:05:31,270 --> 00:05:31,640 OK. 77 00:05:31,660 --> 00:05:32,620 So this looks good. 78 00:05:32,620 --> 00:05:35,870 It's a good first pass on on this action and action creator. 79 00:05:36,040 --> 00:05:39,840 I still feel like we went over this whole topic of action very very quickly. 80 00:05:39,940 --> 00:05:41,620 So let's continue the next section. 81 00:05:41,620 --> 00:05:46,650 Figure out how we use an action creator and then do a quick review on the entire topic.