1 00:00:01,110 --> 00:00:03,030 Instructor: So we've got our middleware skeleton here 2 00:00:03,030 --> 00:00:05,430 where we're console logging every single action 3 00:00:05,430 --> 00:00:08,100 that flows throughout our entire application. 4 00:00:08,100 --> 00:00:09,570 Right now, we've only got one action, 5 00:00:09,570 --> 00:00:10,950 so eh, a little bit boring. 6 00:00:10,950 --> 00:00:12,810 I think we could do better. 7 00:00:12,810 --> 00:00:16,560 Our goal, remember, is to somehow use a middleware 8 00:00:16,560 --> 00:00:18,090 to make sure that by the time 9 00:00:18,090 --> 00:00:21,000 our action ends up in our reducers, 10 00:00:21,000 --> 00:00:22,320 it's already been resolved, 11 00:00:22,320 --> 00:00:23,970 and it has all the data that we were trying 12 00:00:23,970 --> 00:00:26,490 to load off of our request. 13 00:00:26,490 --> 00:00:28,110 So let's take a look at a diagram 14 00:00:28,110 --> 00:00:30,633 that's gonna help us build this middleware. 15 00:00:32,369 --> 00:00:36,090 This is what I wanna give a shot at trying. 16 00:00:36,090 --> 00:00:36,923 Let's take a look at it. 17 00:00:36,923 --> 00:00:39,330 At the very top, we start off with our action, 18 00:00:39,330 --> 00:00:41,610 and it's gonna flow into our middleware, 19 00:00:41,610 --> 00:00:43,713 which we're gonna call async middleware. 20 00:00:44,580 --> 00:00:46,740 The very first thing we do is we say, 21 00:00:46,740 --> 00:00:49,920 does the action contain a promise specifically 22 00:00:49,920 --> 00:00:51,930 on the payload property? 23 00:00:51,930 --> 00:00:54,720 If it does not, then hey, you know what? 24 00:00:54,720 --> 00:00:55,590 We don't care about it. 25 00:00:55,590 --> 00:00:57,360 Just send it on to the next middleware. 26 00:00:57,360 --> 00:00:59,280 So this would be a great example of where we just, 27 00:00:59,280 --> 00:01:01,320 very easily, use that next keyword. 28 00:01:01,320 --> 00:01:04,500 We just say, hey, I don't care about this action. 29 00:01:04,500 --> 00:01:06,780 It's not my bag, it's not my job. 30 00:01:06,780 --> 00:01:08,380 Just send it on to the next one. 31 00:01:09,450 --> 00:01:13,620 What about, though, when it does contain a promise? 32 00:01:13,620 --> 00:01:16,200 So if we get an action in our middleware, 33 00:01:16,200 --> 00:01:18,450 and it does contain a promise, 34 00:01:18,450 --> 00:01:20,220 we're gonna say, okay, great. 35 00:01:20,220 --> 00:01:21,510 This is our job, this is what we do. 36 00:01:21,510 --> 00:01:24,210 This is why I was made as an action creator. 37 00:01:24,210 --> 00:01:26,130 Let's go ahead and just sit around 38 00:01:26,130 --> 00:01:29,940 and wait until this action or this promise resolves. 39 00:01:29,940 --> 00:01:34,170 Once it resolves some, like, who knows how long later, 40 00:01:34,170 --> 00:01:36,540 we're going to say, okay, it just resolved. 41 00:01:36,540 --> 00:01:37,890 Here's the data. 42 00:01:37,890 --> 00:01:39,960 And here's where it gets really interesting. 43 00:01:39,960 --> 00:01:43,650 Once we've got the data, we're gonna create a new action 44 00:01:43,650 --> 00:01:47,040 with the exact same type as the original one, 45 00:01:47,040 --> 00:01:50,220 and then we're gonna send this very new action 46 00:01:50,220 --> 00:01:52,140 through all of our middlewares again. 47 00:01:52,140 --> 00:01:54,300 So we're gonna make a new action, 48 00:01:54,300 --> 00:01:55,620 and then it's gonna come up, 49 00:01:55,620 --> 00:01:57,750 and it's gonna go through all of our middlewares again. 50 00:01:57,750 --> 00:01:59,010 It's gonna start at the very top 51 00:01:59,010 --> 00:02:00,710 and flow through everything again. 52 00:02:01,920 --> 00:02:03,210 So this is our plan right here. 53 00:02:03,210 --> 00:02:06,570 Let's see if we can't go ahead and put it into action. 54 00:02:06,570 --> 00:02:08,070 Let's handle the easy case first. 55 00:02:08,070 --> 00:02:10,229 Let's handle the case in which the action, 56 00:02:10,229 --> 00:02:12,390 let's say, it does not contain a promise. 57 00:02:12,390 --> 00:02:13,890 We just wanna forward this thing on, 58 00:02:13,890 --> 00:02:14,880 and we don't really care about it. 59 00:02:14,880 --> 00:02:16,713 Let's handle that easy case first. 60 00:02:18,600 --> 00:02:20,970 So, because JavaScript doesn't really have very good, 61 00:02:20,970 --> 00:02:23,490 or really any, typing system in it, 62 00:02:23,490 --> 00:02:28,490 we can't really say, hey, is this a type promise? 63 00:02:28,950 --> 00:02:31,800 So we're gonna kind of divine whether 64 00:02:31,800 --> 00:02:33,300 or not there is a payload, or excuse me, 65 00:02:33,300 --> 00:02:34,590 whether or not there is a promise 66 00:02:34,590 --> 00:02:36,960 on the action dot payload property. 67 00:02:36,960 --> 00:02:41,880 Let's say if there is not a payload, 68 00:02:41,880 --> 00:02:46,880 or if action dot payload dot then does not exist, 69 00:02:49,500 --> 00:02:51,180 so in the case that we have right now 70 00:02:51,180 --> 00:02:53,190 is if there is not a payload, 71 00:02:53,190 --> 00:02:56,823 or if the payload does not have a dot then property, 72 00:02:57,960 --> 00:03:02,100 dot then being specifically the promise helper dot then, 73 00:03:02,100 --> 00:03:03,963 then let's just return it. 74 00:03:07,770 --> 00:03:10,220 Let's add a comment in here too, just to clarify. 75 00:03:11,340 --> 00:03:13,893 If the action does not have a payload, 76 00:03:15,210 --> 00:03:20,210 or the payload does not have a dot then property, 77 00:03:22,050 --> 00:03:25,740 we don't care about it, send it on. 78 00:03:25,740 --> 00:03:27,540 Just to be clear about the dot then, 79 00:03:27,540 --> 00:03:30,090 this is where we use, like, any promise dot then. 80 00:03:30,090 --> 00:03:31,680 It's how we chain on something to do 81 00:03:31,680 --> 00:03:33,810 when the promise actually resolves. 82 00:03:33,810 --> 00:03:36,870 So we're just using the existence of a dot then property 83 00:03:36,870 --> 00:03:40,020 to figure out whether or not this is an action. 84 00:03:40,020 --> 00:03:42,660 All right, so let's see if this works. 85 00:03:42,660 --> 00:03:46,023 I'm going to say, if we don't have a promise, 86 00:03:47,130 --> 00:03:50,040 I want to console log the action, 87 00:03:50,040 --> 00:03:52,683 and we're gonna say we don't have a promise. 88 00:03:54,510 --> 00:03:55,710 So let's see what happens now. 89 00:03:55,710 --> 00:03:58,020 I'm gonna flip back around my browser, 90 00:03:58,020 --> 00:03:59,640 refresh the page, 91 00:03:59,640 --> 00:04:01,470 and, okay, so we get our console log. 92 00:04:01,470 --> 00:04:02,730 We do not have a promise, 93 00:04:02,730 --> 00:04:03,930 and that totally makes sense, 94 00:04:03,930 --> 00:04:06,360 because hey, payload is a promise right here. 95 00:04:06,360 --> 00:04:07,193 Very good. 96 00:04:08,640 --> 00:04:10,170 So this takes care of square one. 97 00:04:10,170 --> 00:04:11,880 It takes care of the case that, maybe, 98 00:04:11,880 --> 00:04:14,760 we've got many different action creators in our application. 99 00:04:14,760 --> 00:04:16,709 Some of them are almost certainly 100 00:04:16,709 --> 00:04:18,480 not gonna be containing promises. 101 00:04:18,480 --> 00:04:20,820 They might be doing who knows what else. 102 00:04:20,820 --> 00:04:22,710 So in any middleware we write, 103 00:04:22,710 --> 00:04:25,440 we make sure that we only target the actions 104 00:04:25,440 --> 00:04:27,870 that we very specifically care about. 105 00:04:27,870 --> 00:04:29,850 And if we don't care about the action, 106 00:04:29,850 --> 00:04:32,370 we always call next with that action 107 00:04:32,370 --> 00:04:35,370 to pass it along to the next middleware on the chain. 108 00:04:35,370 --> 00:04:37,110 If we don't pass it along to the next middleware 109 00:04:37,110 --> 00:04:39,900 on the chain, our action basically just stops here. 110 00:04:39,900 --> 00:04:41,550 It just stops, and it's sitting in limbo, 111 00:04:41,550 --> 00:04:43,860 and nothing ever happens to it again. 112 00:04:43,860 --> 00:04:47,220 So out of every action or every middleware that we create, 113 00:04:47,220 --> 00:04:48,990 we need to make sure we always call next, 114 00:04:48,990 --> 00:04:52,470 unless we very explicitly do not want to allow 115 00:04:52,470 --> 00:04:54,720 this action to continue on, 116 00:04:54,720 --> 00:04:56,493 or to propagate to other middlewares 117 00:04:56,493 --> 00:04:59,040 that we have in our application. 118 00:04:59,040 --> 00:05:01,650 Okay, so we've handled the very easy case. 119 00:05:01,650 --> 00:05:04,260 Let's tackle the harder case in the next section, 120 00:05:04,260 --> 00:05:05,940 the case in which, you know what? 121 00:05:05,940 --> 00:05:07,470 We do have a promise. 122 00:05:07,470 --> 00:05:08,880 Let's wait for it to resolve. 123 00:05:08,880 --> 00:05:10,050 And when it resolves, 124 00:05:10,050 --> 00:05:12,300 we'll dispatch a new action that's gonna flow 125 00:05:12,300 --> 00:05:14,163 through all of our middlewares again. 126 00:05:15,120 --> 00:05:16,770 I'll see you in the next section.