1 00:00:00,510 --> 00:00:01,859 -: In the last section, we started talking 2 00:00:01,859 --> 00:00:04,500 about what the Redux Promise Middleware does for us. 3 00:00:04,500 --> 00:00:05,580 We're gonna get started working 4 00:00:05,580 --> 00:00:07,500 on our own middleware in just a moment, 5 00:00:07,500 --> 00:00:09,510 but before we do, there's one last quick thing 6 00:00:09,510 --> 00:00:11,100 I wanna tell you about. 7 00:00:11,100 --> 00:00:12,900 Inside of a redux application, 8 00:00:12,900 --> 00:00:15,300 there's effectively not an upper limit 9 00:00:15,300 --> 00:00:17,520 to the number of middlewares we can have. 10 00:00:17,520 --> 00:00:20,010 Our application at present only has one middleware, 11 00:00:20,010 --> 00:00:22,479 the Redux Promise Middleware, but we could very easily add 12 00:00:22,479 --> 00:00:25,680 in other pieces of middleware as well. 13 00:00:25,680 --> 00:00:27,570 When we add in other pieces of middleware, 14 00:00:27,570 --> 00:00:29,640 we refer to them all being put together 15 00:00:29,640 --> 00:00:33,000 in a series as the "middleware stack." 16 00:00:33,000 --> 00:00:36,060 When we have multiple middleware and we dispatch an action, 17 00:00:36,060 --> 00:00:38,678 or we return an action from an action creator, 18 00:00:38,678 --> 00:00:40,500 every single middleware inside 19 00:00:40,500 --> 00:00:44,280 of our application has the ability to inspect that action 20 00:00:44,280 --> 00:00:46,860 and take some operation on it. 21 00:00:46,860 --> 00:00:49,950 Like, say, logging it or modifying it, stopping it, 22 00:00:49,950 --> 00:00:51,267 whatever it might be. 23 00:00:51,267 --> 00:00:54,330 So if we return an action from an action creator 24 00:00:54,330 --> 00:00:55,860 we can imagine that it gets sent 25 00:00:55,860 --> 00:00:57,420 to maybe the first middleware 26 00:00:57,420 --> 00:00:59,590 inside of a chain of middleware. 27 00:00:59,590 --> 00:01:03,150 This first middleware right here has the option to look 28 00:01:03,150 --> 00:01:04,860 at that action and decide whether 29 00:01:04,860 --> 00:01:07,050 or not it wants to do something with it. 30 00:01:07,050 --> 00:01:09,090 So maybe for Middleware #1 right here, 31 00:01:09,090 --> 00:01:11,460 maybe it looks at that action, it looks at its type 32 00:01:11,460 --> 00:01:13,800 and payload property, and it decides, "You know what? 33 00:01:13,800 --> 00:01:15,330 I don't care about this thing at all. 34 00:01:15,330 --> 00:01:16,440 I want this to just go 35 00:01:16,440 --> 00:01:19,257 onto the next middleware on the chain." 36 00:01:20,280 --> 00:01:22,980 So this middleware will take the action and forward it 37 00:01:22,980 --> 00:01:24,500 on to the next middleware. 38 00:01:24,500 --> 00:01:26,493 In this case, Middleware #2. 39 00:01:27,450 --> 00:01:29,970 Now, maybe this middleware inspects the action. 40 00:01:29,970 --> 00:01:31,620 It looks at its type, maybe it looks 41 00:01:31,620 --> 00:01:34,050 at its payload as well, and it says, "You know what? 42 00:01:34,050 --> 00:01:35,610 This looks like it's something important. 43 00:01:35,610 --> 00:01:38,010 This looks like an important action." 44 00:01:38,010 --> 00:01:39,840 And so maybe this middleware decides 45 00:01:39,840 --> 00:01:42,960 that it wants to console log the entire action, 46 00:01:42,960 --> 00:01:45,234 just for development purposes. 47 00:01:45,234 --> 00:01:47,820 So you and I can look at our log and say, "Oh, okay, 48 00:01:47,820 --> 00:01:50,010 it looks like that action just got dispatched 49 00:01:50,010 --> 00:01:52,530 and it just went through all my middleware." 50 00:01:52,530 --> 00:01:55,170 After Middleware #2 does that console log, 51 00:01:55,170 --> 00:01:56,760 it can then forward that action 52 00:01:56,760 --> 00:01:59,550 on to the third middleware in the chain. 53 00:01:59,550 --> 00:02:01,290 And then again, maybe this one says, "You know what? 54 00:02:01,290 --> 00:02:02,887 I don't care about this thing." 55 00:02:02,887 --> 00:02:06,000 After an action has flowed through every single middleware 56 00:02:06,000 --> 00:02:08,850 inside of our chain, it then automatically gets forwarded 57 00:02:08,850 --> 00:02:12,243 on to all the reducers inside of our application. 58 00:02:13,080 --> 00:02:14,400 Okay, so the idea here is 59 00:02:14,400 --> 00:02:16,300 that we can have multiple middlewares. 60 00:02:17,190 --> 00:02:20,370 Each middleware has the ability to inspect an action, 61 00:02:20,370 --> 00:02:22,320 and if it doesn't care about the action, 62 00:02:22,320 --> 00:02:24,570 then it has the ability to forward it, 63 00:02:24,570 --> 00:02:27,963 or pass it on, to the next middleware on the chain. 64 00:02:29,040 --> 00:02:31,530 So now that we understand the idea of chaining together 65 00:02:31,530 --> 00:02:34,200 middlewares, let's start talking about the middleware 66 00:02:34,200 --> 00:02:36,305 you and I are gonna make. 67 00:02:36,305 --> 00:02:40,442 So you and I are going to build from scratch 68 00:02:40,442 --> 00:02:43,080 the Redux Promise Middleware. 69 00:02:43,080 --> 00:02:44,970 So essentially, the same middleware that we've been 70 00:02:44,970 --> 00:02:46,590 making use of throughout this course 71 00:02:46,590 --> 00:02:48,840 to go and fetch that list of comments from 72 00:02:48,840 --> 00:02:50,100 that outside API, 73 00:02:50,100 --> 00:02:52,920 you and I are gonna build it up from scratch. 74 00:02:52,920 --> 00:02:54,930 We're gonna work on one other middleware as well. 75 00:02:54,930 --> 00:02:56,940 So this is gonna be kind of an introduction one, 76 00:02:56,940 --> 00:02:59,100 and then we'll take on a slightly more different, 77 00:02:59,100 --> 00:03:01,150 little bit more complicated one later on. 78 00:03:02,280 --> 00:03:03,113 All right, so let's talk 79 00:03:03,113 --> 00:03:05,610 about what this thing needs to do. 80 00:03:05,610 --> 00:03:07,680 So as you and I very well know, 81 00:03:07,680 --> 00:03:10,530 when we call that fetch comments action creator, 82 00:03:10,530 --> 00:03:13,680 we return an action that has a promise, 83 00:03:13,680 --> 00:03:17,370 or a network request, on the payload property. 84 00:03:17,370 --> 00:03:18,720 That's what's happening inside 85 00:03:18,720 --> 00:03:20,250 of our action creator right now. 86 00:03:20,250 --> 00:03:23,430 So here's that request, or we're calling it "Response." 87 00:03:23,430 --> 00:03:26,700 It essentially is a request from Axios, 88 00:03:26,700 --> 00:03:28,833 and we put that onto the payload property. 89 00:03:30,300 --> 00:03:34,800 So our middleware is going to look at the incoming action, 90 00:03:34,800 --> 00:03:38,160 and it's gonna say, "Hey, on your payload property, 91 00:03:38,160 --> 00:03:39,420 do you have a promise? 92 00:03:39,420 --> 00:03:41,770 Or do you have, like, a network request there?" 93 00:03:42,990 --> 00:03:46,350 If it doesn't, so if the action does not have a request tied 94 00:03:46,350 --> 00:03:48,727 to it, then we're gonna say, "Okay, like, whatever. 95 00:03:48,727 --> 00:03:50,400 I don't care about this thing." 96 00:03:50,400 --> 00:03:52,260 We're just gonna let this action pass through 97 00:03:52,260 --> 00:03:55,650 and we're gonna pass it to the next middleware on the chain. 98 00:03:55,650 --> 00:03:57,420 Now, in our application, you and I are only 99 00:03:57,420 --> 00:03:59,580 gonna have one middleware total for right now. 100 00:03:59,580 --> 00:04:01,440 So there is no other middleware. 101 00:04:01,440 --> 00:04:03,450 So essentially, the action will be forwarded on 102 00:04:03,450 --> 00:04:06,179 to all the reducers of our application. 103 00:04:06,179 --> 00:04:09,720 Now, how about the case in which we do have a promise 104 00:04:09,720 --> 00:04:12,180 or a network request in the action? 105 00:04:12,180 --> 00:04:14,880 Well, if it does, then we fall into the other category. 106 00:04:14,880 --> 00:04:17,310 We have a promise, and we wanna make sure 107 00:04:17,310 --> 00:04:19,170 that we do not forward this promise 108 00:04:19,170 --> 00:04:23,940 on to our reducers until the promise has been resolved. 109 00:04:23,940 --> 00:04:25,680 So we want to wait for the promise to resolve, 110 00:04:25,680 --> 00:04:28,350 or essentially get a response from that API. 111 00:04:28,350 --> 00:04:31,530 And only after we get that response are we going to 112 00:04:31,530 --> 00:04:33,991 let this action continue on. 113 00:04:33,991 --> 00:04:36,660 Remember, the entire key here behind the way 114 00:04:36,660 --> 00:04:39,450 that our fetch comments action creator's working right now. 115 00:04:39,450 --> 00:04:41,820 When we returned the action from the action creator, 116 00:04:41,820 --> 00:04:45,030 it seemed like, magically, we were waiting to 117 00:04:45,030 --> 00:04:46,200 get the response back 118 00:04:46,200 --> 00:04:50,040 from that JSON API before it went to the reducer. 119 00:04:50,040 --> 00:04:51,360 So that's a very critical part 120 00:04:51,360 --> 00:04:53,790 of the middleware that you and I are gonna put together. 121 00:04:53,790 --> 00:04:56,610 We need to make sure that if there is a promise there, 122 00:04:56,610 --> 00:04:59,790 if there is a network request, we wait for it to resolve, 123 00:04:59,790 --> 00:05:01,533 and then we let it go on. 124 00:05:02,790 --> 00:05:04,890 Now, when the action actually gets resolved, 125 00:05:04,890 --> 00:05:07,290 and we get the data back from that network request, 126 00:05:07,290 --> 00:05:09,690 we're not gonna just take that data 127 00:05:09,690 --> 00:05:12,180 and send it on to the reducer right away. 128 00:05:12,180 --> 00:05:15,260 Instead, we're going to recreate a brand new action 129 00:05:15,260 --> 00:05:19,260 with the same type and all the data that we just got back 130 00:05:19,260 --> 00:05:21,090 from that network request. 131 00:05:21,090 --> 00:05:23,910 So we're gonna make a new action, and we're gonna send it 132 00:05:23,910 --> 00:05:26,670 through all the different middlewares that we have again. 133 00:05:26,670 --> 00:05:28,260 Now, again, we only have one middleware here, 134 00:05:28,260 --> 00:05:29,460 but we can easily imagine 135 00:05:29,460 --> 00:05:32,194 that maybe we have multiple middleware, 136 00:05:32,194 --> 00:05:33,367 and you might be curious, 137 00:05:33,367 --> 00:05:35,430 "Why are we creating a new action 138 00:05:35,430 --> 00:05:37,650 and sending it through all of our middlewares again, 139 00:05:37,650 --> 00:05:41,490 rather than just sending it on directly to the reducers?" 140 00:05:41,490 --> 00:05:43,380 Well, think about it for a second. 141 00:05:43,380 --> 00:05:45,270 When we put together our middlewares, 142 00:05:45,270 --> 00:05:48,240 we do not want to write middlewares that depend 143 00:05:48,240 --> 00:05:51,636 upon them being organized in a single certain order. 144 00:05:51,636 --> 00:05:54,630 So maybe you and I eventually put together 145 00:05:54,630 --> 00:05:56,670 another middleware inside of our application, 146 00:05:56,670 --> 00:05:59,347 like Middleware #1 up here that says, 147 00:05:59,347 --> 00:06:04,347 "I want to see actions with comments." 148 00:06:04,560 --> 00:06:07,410 So maybe Middleware #1 up here really cares 149 00:06:07,410 --> 00:06:10,979 about seeing actions that contain comments. 150 00:06:10,979 --> 00:06:13,620 Then let's imagine that as Middleware #3, 151 00:06:13,620 --> 00:06:15,780 we place this asynchronous, or this kind 152 00:06:15,780 --> 00:06:17,880 of redux promisee, middleware 153 00:06:17,880 --> 00:06:20,310 that you and I are going to create. 154 00:06:20,310 --> 00:06:24,207 So down here, we'll put "Redux promise middleware." 155 00:06:25,290 --> 00:06:27,480 So when our action comes through, 156 00:06:27,480 --> 00:06:29,850 if it's the action that contains the promise 157 00:06:29,850 --> 00:06:32,770 like the original action, it will go to this middleware. 158 00:06:32,770 --> 00:06:34,417 This middleware is gonna say, 159 00:06:34,417 --> 00:06:36,930 "Oh, you don't have any comments tied to you. 160 00:06:36,930 --> 00:06:37,920 You just have a promise. 161 00:06:37,920 --> 00:06:39,720 I don't care about you yet." 162 00:06:39,720 --> 00:06:42,060 So that action will then go onto the second one. 163 00:06:42,060 --> 00:06:44,040 It'll go onto our third one. 164 00:06:44,040 --> 00:06:46,380 The middleware that you and I are gonna create is gonna wait 165 00:06:46,380 --> 00:06:47,820 for that thing to resolve. 166 00:06:47,820 --> 00:06:50,422 It's gonna get the list of comments from the API, 167 00:06:50,422 --> 00:06:52,620 and then we still need to make sure 168 00:06:52,620 --> 00:06:54,540 that the list of comments ends 169 00:06:54,540 --> 00:06:57,150 up going through this first middleware as well. 170 00:06:57,150 --> 00:06:59,250 So that's why we're gonna create a new action, 171 00:06:59,250 --> 00:07:01,650 and send it back through all of our middleware, 172 00:07:01,650 --> 00:07:04,500 so that we can make sure that now this middleware 173 00:07:04,500 --> 00:07:07,457 up here gets to see the action with all the comments. 174 00:07:07,457 --> 00:07:10,530 By taking this approach, we don't have to arbitrarily 175 00:07:10,530 --> 00:07:13,500 reorganize the middlewares inside of our application. 176 00:07:13,500 --> 00:07:15,030 Ignore the arrows here for a second. 177 00:07:15,030 --> 00:07:15,990 That's crazy. 178 00:07:15,990 --> 00:07:17,850 We don't have to arbitrarily rearrange them 179 00:07:17,850 --> 00:07:19,650 to make sure that, "Oh, yeah our action goes 180 00:07:19,650 --> 00:07:21,990 through this one and then this one." 181 00:07:21,990 --> 00:07:24,330 So this is a very common approach, 182 00:07:24,330 --> 00:07:25,477 a very common approach to say, 183 00:07:25,477 --> 00:07:27,600 "If we change an action in any way, 184 00:07:27,600 --> 00:07:28,710 rather than forwarding it 185 00:07:28,710 --> 00:07:31,320 onto the next middleware or onto the reducers, 186 00:07:31,320 --> 00:07:33,150 we'll instead make sure it goes back 187 00:07:33,150 --> 00:07:34,950 through all of our middleware again, 188 00:07:34,950 --> 00:07:36,570 so that everything has a chance to look 189 00:07:36,570 --> 00:07:38,670 at this new action that's coming through." 190 00:07:40,350 --> 00:07:43,230 Okay, so after we wait for that request to be resolved, 191 00:07:43,230 --> 00:07:45,330 after we create the new action, and send it back 192 00:07:45,330 --> 00:07:47,442 through all of our middlewares a second time, 193 00:07:47,442 --> 00:07:49,860 we'll look at that new action. 194 00:07:49,860 --> 00:07:52,260 We'll say, "Does this thing contain a promise?" 195 00:07:52,260 --> 00:07:56,760 Well, in this case, after the promise has been resolved 196 00:07:56,760 --> 00:07:59,490 and we've got that data, nope, no longer has a promise, 197 00:07:59,490 --> 00:08:01,620 and so we're gonna fall into the "No" category, 198 00:08:01,620 --> 00:08:04,200 and the action will go onto the reducers. 199 00:08:04,200 --> 00:08:06,960 Now, if this flow right here seems confusing, 200 00:08:06,960 --> 00:08:08,940 don't sweat it, because as soon as we start writing 201 00:08:08,940 --> 00:08:11,670 this code and adding in some console logs, 202 00:08:11,670 --> 00:08:13,500 you're gonna be able to see this flow 203 00:08:13,500 --> 00:08:14,880 in action for yourself. 204 00:08:14,880 --> 00:08:15,960 So you'll be able to play around 205 00:08:15,960 --> 00:08:17,906 with this flow and get a really good idea 206 00:08:17,906 --> 00:08:21,900 of how our middleware is going to look at the action, 207 00:08:21,900 --> 00:08:23,760 decide what to do with it, and then eventually 208 00:08:23,760 --> 00:08:26,850 create a new action and send it back through. 209 00:08:26,850 --> 00:08:29,280 So, now that we have a better idea of what we're gonna make, 210 00:08:29,280 --> 00:08:30,720 let's continue in the next section, 211 00:08:30,720 --> 00:08:33,169 and we'll get started on creating our middleware.