1 00:00:01,400 --> 00:00:05,240 Back inside of our middle, where we can now start to add in some logic that's going to see if the incoming 2 00:00:05,270 --> 00:00:09,470 action has a type that matches up with one of these four right here. 3 00:00:09,710 --> 00:00:14,390 And if it does, well, then make sure that we start to dispatch our action creator of save cells, 4 00:00:14,390 --> 00:00:19,000 because it means that we're just about to make a change to the list of cells inside of our reduc store. 5 00:00:20,990 --> 00:00:25,940 So right after next, right here to check to see if the incoming action is one of those types we care 6 00:00:25,940 --> 00:00:27,680 about, we're going to right out if. 7 00:00:28,760 --> 00:00:33,260 And then inside of here, I'm going to list out all the different action types, so we want to watch 8 00:00:33,260 --> 00:00:37,850 for that will put in action type DOT, move, sell. 9 00:00:38,800 --> 00:00:41,350 Action type DOT update Zel. 10 00:00:43,980 --> 00:00:50,790 Insert cell before passing the insert cell after that's where we ended up at and then finally delete 11 00:00:50,790 --> 00:00:51,180 cell. 12 00:00:53,960 --> 00:00:59,240 I'm going to say this really quickly, just so we can see it all nicely formatted, so there's the list 13 00:00:59,240 --> 00:01:04,069 of types you want to watch for and then to see if the action that we were just given has a matching 14 00:01:04,069 --> 00:01:06,380 type onto that array that we created. 15 00:01:06,730 --> 00:01:10,880 I'm going to put on a dot includes action dot type. 16 00:01:12,960 --> 00:01:17,340 So this will return true if the incoming actions type matches one of these four. 17 00:01:18,490 --> 00:01:25,180 Then inside of here for right now, let's just do a along and say I want to save cels. 18 00:01:27,210 --> 00:01:30,870 And it'll be a nice sign to us to decide whether or not we've implemented this stuff correctly. 19 00:01:31,860 --> 00:01:36,600 Then back over inside my browser refresh and I'm going to make sure I open up my console. 20 00:01:39,760 --> 00:01:44,950 So now, as soon as I make any significant change to my list of cells, either the content, adding, 21 00:01:44,950 --> 00:01:47,470 deleting or whatever we should see that comes along. 22 00:01:48,130 --> 00:01:49,690 So if I add in a new cell. 23 00:01:50,110 --> 00:01:50,440 Yupp. 24 00:01:51,310 --> 00:01:54,310 If I delete one, yep, looks good if I move. 25 00:01:55,210 --> 00:02:01,510 I move again if I change the content and if I change the content, so in all these different scenarios, 26 00:02:01,510 --> 00:02:06,280 those are all cases in which we would want to save our list of cells to our backend API. 27 00:02:06,670 --> 00:02:10,180 So I would say that we are definitely doing this logs at the appropriate times right now. 28 00:02:11,760 --> 00:02:18,000 So we can flip back over to our Ed, find that console log and remove it, so our goal here is to somehow 29 00:02:18,000 --> 00:02:21,800 call that action cowriter we just put together of save cells. 30 00:02:22,230 --> 00:02:23,250 So we want to call that thing. 31 00:02:23,490 --> 00:02:26,000 We then want to take the result and dispatch it. 32 00:02:26,580 --> 00:02:30,330 Now, in this case, it's just give me a little bit complicated and we're just getting up, doing a 33 00:02:30,330 --> 00:02:31,320 little bit of a cheat here. 34 00:02:31,590 --> 00:02:35,730 Let me give you just a little bit back story and help you understand the a little bit of the predicament 35 00:02:35,730 --> 00:02:36,680 that we are currently in. 36 00:02:37,230 --> 00:02:42,300 So instead of my action creator's index dots file, remember, we've been writing out a lot of different 37 00:02:42,300 --> 00:02:43,590 action characters inside of here. 38 00:02:44,100 --> 00:02:49,290 Some of these different action creators, such as, say, Mousel, are functions that are going to immediately 39 00:02:49,290 --> 00:02:55,230 return in action, others such as safe cells down here at the bottom. 40 00:02:57,130 --> 00:03:00,370 Our functions that are going to return a redux thunk. 41 00:03:00,970 --> 00:03:05,890 So these are functions that are going to be automatically invoked with dispatch and get states and then 42 00:03:05,890 --> 00:03:09,100 inside of that function somewhere, dispatch is going to be invoked. 43 00:03:10,120 --> 00:03:15,610 So the unfortunate thing here is that calling save cells is just going to be a little bit complicated. 44 00:03:15,830 --> 00:03:17,430 So let me show you what we have to do. 45 00:03:18,830 --> 00:03:23,810 Back inside that if statement inside of our middleware, we're going to call safe cells. 46 00:03:25,620 --> 00:03:30,690 When we called it one time, we're going to get back this inner function that we are currently returning, 47 00:03:31,200 --> 00:03:34,620 that function is expected to be called with our dispatch function. 48 00:03:35,130 --> 00:03:40,260 So we need to receive that function that comes back and then immediately called it when we get back 49 00:03:40,470 --> 00:03:41,580 with dispatch. 50 00:03:42,530 --> 00:03:46,940 We then also need to make sure that we pass along, get state, which at this point in time we did not 51 00:03:46,940 --> 00:03:49,370 actually provide or receive inside of our middleware. 52 00:03:49,820 --> 00:03:54,140 So let's make sure that we update our argument list up here to get get state as well. 53 00:03:55,990 --> 00:04:01,420 And I'm going to update the annotation and add and get state and say that this is going to be a function 54 00:04:02,050 --> 00:04:04,960 that is going to return our state object. 55 00:04:06,250 --> 00:04:08,620 So I'm going to import. 56 00:04:09,550 --> 00:04:10,360 At the top. 57 00:04:11,910 --> 00:04:12,600 Route St.. 58 00:04:13,810 --> 00:04:15,040 From up on directory. 59 00:04:15,950 --> 00:04:16,700 Reducers. 60 00:04:18,730 --> 00:04:23,560 So we call get state, we're going to return an object of type or something when we call get state will 61 00:04:23,560 --> 00:04:25,240 return an object of type root state. 62 00:04:26,270 --> 00:04:29,260 So now I'll make sure I pass through get state as well. 63 00:04:30,630 --> 00:04:35,070 I know that this little call right there is a little bit confusing, again, it is all because we wired 64 00:04:35,070 --> 00:04:39,390 up safe cells as though it were a action creature to be used with Redux thunk. 65 00:04:39,990 --> 00:04:45,500 So all because of this signature right here when we initially call safe cells, we're going to get back 66 00:04:45,540 --> 00:04:50,010 function, that we are immediately invoking that function with dispatch and get state. 67 00:04:52,720 --> 00:04:57,670 All right, let's see this look back over to our browser, do a quick refresh. 68 00:04:59,020 --> 00:05:01,820 We're going to see that we still have one little warning right here. 69 00:05:01,840 --> 00:05:02,920 We'll take care of that in just a moment. 70 00:05:02,920 --> 00:05:04,870 But first, let's do a quick test. 71 00:05:05,270 --> 00:05:06,900 I'm going to go over to my network request tab. 72 00:05:07,300 --> 00:05:12,670 And now if I start changing stuff inside of here, I should see a single post request being issued for 73 00:05:12,670 --> 00:05:15,460 every change I make so I can move these things around. 74 00:05:16,330 --> 00:05:23,590 I can delete a cell, I can add a cell, I can change some contents, change some contents, and everything 75 00:05:23,590 --> 00:05:26,770 appears to get posted back to our API. 76 00:05:27,680 --> 00:05:32,240 If I refresh at any point in time, I should see the identical contents appear back on the screen. 77 00:05:33,050 --> 00:05:35,030 Well, I'd say this definitely looks pretty reasonable. 78 00:05:35,480 --> 00:05:41,270 The one exception is the fact that, well, we are doing a post request with every single key press, 79 00:05:41,690 --> 00:05:43,130 maybe not super ideal. 80 00:05:43,700 --> 00:05:46,970 So that might be the last thing that we want to spend just a little bit of time working on. 81 00:05:47,240 --> 00:05:48,940 So let's take a look at that in just a moment.