1 00:00:00,840 --> 00:00:02,220 -: In the last section, we started talking 2 00:00:02,220 --> 00:00:05,550 about Middlewares inside of a React and Redux application. 3 00:00:05,550 --> 00:00:07,680 In this section, we're gonna continue by taking a look 4 00:00:07,680 --> 00:00:10,170 at a Middleware that we're actually already using 5 00:00:10,170 --> 00:00:12,300 inside of our current project. 6 00:00:12,300 --> 00:00:14,100 So, if I flip back over to my editor 7 00:00:14,100 --> 00:00:16,379 and find the Root.js file, 8 00:00:16,379 --> 00:00:18,000 you'll recall that we had wired up 9 00:00:18,000 --> 00:00:20,040 the Redux Promise Middleware 10 00:00:20,040 --> 00:00:22,500 when we created our Redux store right here. 11 00:00:22,500 --> 00:00:23,730 So, let's get a better sense 12 00:00:23,730 --> 00:00:26,610 of what this Middleware is doing for us 13 00:00:26,610 --> 00:00:28,530 and when we get a better understanding of it, 14 00:00:28,530 --> 00:00:31,983 it's gonna help us understand why we use Middlewares at all. 15 00:00:33,420 --> 00:00:34,680 So, to give you a better idea 16 00:00:34,680 --> 00:00:36,360 of why we are using this Middleware, 17 00:00:36,360 --> 00:00:39,450 I want to remind you about how our action creator 18 00:00:39,450 --> 00:00:41,880 of Fetch comments works right now. 19 00:00:41,880 --> 00:00:43,410 So, inside my actions directory, 20 00:00:43,410 --> 00:00:45,780 I'll find the index.js file. 21 00:00:45,780 --> 00:00:48,420 Inside there, is the Fetch comments action creator, 22 00:00:48,420 --> 00:00:49,830 right here. 23 00:00:49,830 --> 00:00:51,870 So, remember what this thing does. 24 00:00:51,870 --> 00:00:54,663 It makes a request over to that JSON API. 25 00:00:55,560 --> 00:00:58,740 We then get back something that we called the response, 26 00:00:58,740 --> 00:00:59,970 and then we just attached it 27 00:00:59,970 --> 00:01:02,220 to this payload property right here, 28 00:01:02,220 --> 00:01:03,810 and we return that action, 29 00:01:03,810 --> 00:01:05,730 and presumably, it's going to eventually show 30 00:01:05,730 --> 00:01:09,060 up with some data inside of our comments reducer. 31 00:01:09,060 --> 00:01:12,000 Then, over inside of our comments reducer, 32 00:01:12,000 --> 00:01:15,180 so, here's our reducer folder, comments.js right here. 33 00:01:15,180 --> 00:01:18,510 We've got our Fetch comments type where we map over 34 00:01:18,510 --> 00:01:20,490 all the data that we got back from that API, 35 00:01:20,490 --> 00:01:22,200 and essentially consume the data 36 00:01:22,200 --> 00:01:24,540 that came back in that response. 37 00:01:24,540 --> 00:01:27,300 So, let's kind of put this flow into a diagram, 38 00:01:27,300 --> 00:01:29,700 and get a better idea of what's really going on. 39 00:01:31,050 --> 00:01:32,310 Okay, so here's the flow. 40 00:01:32,310 --> 00:01:33,600 Here's what happens when we call 41 00:01:33,600 --> 00:01:35,910 that fetch Comments action creator. 42 00:01:35,910 --> 00:01:37,380 So, we call the action creator, 43 00:01:37,380 --> 00:01:39,420 and then on the very first line 44 00:01:39,420 --> 00:01:43,680 of the action creator function, we make that AJAX request. 45 00:01:43,680 --> 00:01:45,480 So, that's a network request that's going 46 00:01:45,480 --> 00:01:48,000 to reach out to that JSON API. 47 00:01:48,000 --> 00:01:50,700 Now, here's the really key part to understand. 48 00:01:50,700 --> 00:01:52,680 When we make that request, 49 00:01:52,680 --> 00:01:54,960 we then go down to the next line of code 50 00:01:54,960 --> 00:01:58,530 where we form up that action object and return it. 51 00:01:58,530 --> 00:02:01,260 The time between these two steps right here, 52 00:02:01,260 --> 00:02:03,810 the time between making the request, 53 00:02:03,810 --> 00:02:07,710 and then returning the action, is near instantaneous. 54 00:02:07,710 --> 00:02:10,020 It happens like, just lickety split, 55 00:02:10,020 --> 00:02:12,580 in a fraction of a fraction of a second 56 00:02:13,470 --> 00:02:15,360 but as you very well know, 57 00:02:15,360 --> 00:02:18,930 anytime we make a network request to some outside API, 58 00:02:18,930 --> 00:02:23,013 it might take some amount of time to get a response back. 59 00:02:24,450 --> 00:02:28,320 So, after we return our action from the action creator, 60 00:02:28,320 --> 00:02:31,290 at some point in the future, we don't really know when, 61 00:02:31,290 --> 00:02:33,180 but at some point in the future, 62 00:02:33,180 --> 00:02:36,570 we get a response back from the JSON API. 63 00:02:36,570 --> 00:02:38,640 Now, here's where the magic is. 64 00:02:38,640 --> 00:02:39,630 We know that the time 65 00:02:39,630 --> 00:02:42,870 between these two steps right here is instantaneous 66 00:02:42,870 --> 00:02:44,220 but we know that the time 67 00:02:44,220 --> 00:02:47,940 between these two steps might be much longer. 68 00:02:47,940 --> 00:02:50,040 It might be dozens of milliseconds, 69 00:02:50,040 --> 00:02:51,300 and it might be several seconds, 70 00:02:51,300 --> 00:02:53,790 depending on the quality of our internet connection, 71 00:02:53,790 --> 00:02:56,700 but it seems like, no matter how long it takes 72 00:02:56,700 --> 00:02:59,580 to get that data back from the JSON API, 73 00:02:59,580 --> 00:03:01,530 by the time the action shows up 74 00:03:01,530 --> 00:03:03,150 inside of our comments reducer, 75 00:03:03,150 --> 00:03:07,500 it always has our data available from that API. 76 00:03:07,500 --> 00:03:08,730 So, even though we don't know 77 00:03:08,730 --> 00:03:11,520 how long it's gonna take to get that JSON data back, 78 00:03:11,520 --> 00:03:14,583 it seems like it's always available inside the reducer. 79 00:03:15,570 --> 00:03:16,680 Now, to give you a better idea 80 00:03:16,680 --> 00:03:18,060 of what's really happening here, 81 00:03:18,060 --> 00:03:21,240 let's try adding in a debugger statement to our reducer 82 00:03:21,240 --> 00:03:23,280 and just kind of look at the different values 83 00:03:23,280 --> 00:03:25,650 that are showing up inside of there. 84 00:03:25,650 --> 00:03:27,750 So, inside of my comments reducer 85 00:03:27,750 --> 00:03:30,960 I'm gonna find the Fetch comments type right here, 86 00:03:30,960 --> 00:03:32,250 and at the top of that case, 87 00:03:32,250 --> 00:03:35,193 I'm gonna add a debugger statement, like so. 88 00:03:36,150 --> 00:03:37,470 So, we're gonna try to call our 89 00:03:37,470 --> 00:03:39,360 Fetch comments action creator. 90 00:03:39,360 --> 00:03:41,280 We're gonna try to hit this debugger statement, 91 00:03:41,280 --> 00:03:44,130 and then we're just going to manually look at the data 92 00:03:44,130 --> 00:03:46,320 that is contained inside of this action object, 93 00:03:46,320 --> 00:03:48,630 and remember this action object right here 94 00:03:48,630 --> 00:03:50,790 is whatever gets returned 95 00:03:50,790 --> 00:03:52,803 from our Fetch comments action creator. 96 00:03:54,120 --> 00:03:56,573 All right, so I'm gonna flip on over to my browser. 97 00:03:58,440 --> 00:04:01,800 I'm gonna sign in and then I'll go over to post a comment, 98 00:04:01,800 --> 00:04:03,750 and I'll click on the fetch comments button, 99 00:04:03,750 --> 00:04:06,600 which is going to call that action creator, 100 00:04:06,600 --> 00:04:08,370 and then inside my Sources tab, right here, 101 00:04:08,370 --> 00:04:11,340 I immediately hit that debugger statement. 102 00:04:11,340 --> 00:04:15,750 So, I'm gonna expand my debugger window over here. 103 00:04:15,750 --> 00:04:17,100 There we go, 104 00:04:17,100 --> 00:04:18,149 and then inside the console, 105 00:04:18,149 --> 00:04:20,220 I'm gonna write out a couple of commands 106 00:04:20,220 --> 00:04:22,410 just to look at the value of the action 107 00:04:22,410 --> 00:04:24,600 that showed up inside that reducer. 108 00:04:24,600 --> 00:04:26,880 Now, I know the code right here is kind of hard to read, 109 00:04:26,880 --> 00:04:29,340 just because this is transpiled code 110 00:04:29,340 --> 00:04:32,430 from that ES2015 that we've been writing down to ES5, 111 00:04:32,430 --> 00:04:34,800 but you can kind of still get an idea of what's going on, 112 00:04:34,800 --> 00:04:36,510 or more specifically, what we really care about 113 00:04:36,510 --> 00:04:39,180 is just the action object that's in there. 114 00:04:39,180 --> 00:04:40,950 So, if I just write out action, 115 00:04:40,950 --> 00:04:42,420 it's gonna tell me about the action 116 00:04:42,420 --> 00:04:44,493 that just showed up inside this reducer. 117 00:04:45,390 --> 00:04:49,083 So, it has the type of Fetch comments, which is expected, 118 00:04:50,040 --> 00:04:52,140 and then if I look at the payload property, 119 00:04:52,140 --> 00:04:54,870 you'll notice that it has that data property, 120 00:04:54,870 --> 00:04:58,950 and in data, is a list of 500 comment objects. 121 00:04:58,950 --> 00:05:00,960 So, just like we said on that diagram, 122 00:05:00,960 --> 00:05:04,980 clearly whenever this action shows up inside of a reducer, 123 00:05:04,980 --> 00:05:08,400 it has the response that came back from that API. 124 00:05:08,400 --> 00:05:10,920 Every single time. 125 00:05:10,920 --> 00:05:13,290 Even though there's clearly a little bit 126 00:05:13,290 --> 00:05:15,660 of like, a race condition of sorts right here, 127 00:05:15,660 --> 00:05:18,900 where we return our action from the action creator 128 00:05:18,900 --> 00:05:22,170 but we are always waiting to get that response back 129 00:05:22,170 --> 00:05:24,843 before the action shows up inside the reducer. 130 00:05:25,920 --> 00:05:28,470 So, let's now do something kind of interesting. 131 00:05:28,470 --> 00:05:31,440 We're gonna go remove that Middleware, 132 00:05:31,440 --> 00:05:33,150 the Redux Promise Middleware. 133 00:05:33,150 --> 00:05:35,490 We're gonna just take it out of our application entirely 134 00:05:35,490 --> 00:05:37,890 and then we're gonna see what happens. 135 00:05:37,890 --> 00:05:41,313 All right, so I'm gonna flip back over to my Root.js file, 136 00:05:43,080 --> 00:05:45,390 and I'm gonna find the Redux Promise Middleware right here 137 00:05:45,390 --> 00:05:47,160 and I'm just gonna delete it. 138 00:05:47,160 --> 00:05:49,200 We can leave the apply Middleware column here. 139 00:05:49,200 --> 00:05:50,200 That's totally fine. 140 00:05:51,180 --> 00:05:53,100 So, then I'm gonna save this file. 141 00:05:53,100 --> 00:05:55,080 I'll flip back over to the browser, 142 00:05:55,080 --> 00:05:57,300 and I'm gonna refresh the application, 143 00:05:57,300 --> 00:05:59,040 and then we're gonna hit that debugger again, 144 00:05:59,040 --> 00:06:01,680 and we're gonna see what that action looks like now, 145 00:06:01,680 --> 00:06:03,230 without the Middleware in here. 146 00:06:05,190 --> 00:06:08,070 All right, so I'm going to again, sign in. 147 00:06:08,070 --> 00:06:10,530 I'm going to go to the Post A Comment page, 148 00:06:10,530 --> 00:06:13,320 and then I'll click on Fetch Comments. 149 00:06:13,320 --> 00:06:15,020 So, again, I've hit that debugger, 150 00:06:16,680 --> 00:06:17,513 right here, 151 00:06:18,810 --> 00:06:23,810 and now I'm going to again log out the action object. 152 00:06:24,600 --> 00:06:27,060 So now, this time, the action object looks 153 00:06:27,060 --> 00:06:28,530 a little bit different. 154 00:06:28,530 --> 00:06:31,590 When I inspect it, we have a type of fetch comments, 155 00:06:31,590 --> 00:06:33,000 just like we had before, 156 00:06:33,000 --> 00:06:36,060 but the payload is not a response coming back 157 00:06:36,060 --> 00:06:38,010 from that JSON API. 158 00:06:38,010 --> 00:06:41,130 Instead, it's a pending promise. 159 00:06:41,130 --> 00:06:42,450 So, this pending promise right here, 160 00:06:42,450 --> 00:06:45,540 means to say that our request is still pending 161 00:06:45,540 --> 00:06:47,910 or the request is still out on the internet, 162 00:06:47,910 --> 00:06:49,890 we're still waiting for some response to come back 163 00:06:49,890 --> 00:06:51,930 from that JSON API. 164 00:06:51,930 --> 00:06:54,330 So, clearly, without that Promise Middleware, 165 00:06:54,330 --> 00:06:57,450 our application does not then work the way we expect. 166 00:06:57,450 --> 00:06:59,280 Without the Promise Middleware, 167 00:06:59,280 --> 00:07:01,740 when our action shows up inside this reducer, 168 00:07:01,740 --> 00:07:05,190 we are still waiting for that request to be completed. 169 00:07:05,190 --> 00:07:07,293 So, we are in a slightly different flow. 170 00:07:08,280 --> 00:07:10,410 We're in one that looks like this. 171 00:07:10,410 --> 00:07:14,250 So, now, we're calling Fetch comments, we're calling to, 172 00:07:14,250 --> 00:07:16,500 or we are issuing the AJAX request. 173 00:07:16,500 --> 00:07:17,670 We return the action, 174 00:07:17,670 --> 00:07:21,090 and that action instantly gets sent to the reducer, 175 00:07:21,090 --> 00:07:24,120 and that entire process right there takes one millisecond, 176 00:07:24,120 --> 00:07:25,890 or a fraction of a millisecond. 177 00:07:25,890 --> 00:07:27,903 Some very, very small amount of time, 178 00:07:29,190 --> 00:07:31,890 but the time between making that AJAX request, 179 00:07:31,890 --> 00:07:35,040 and actually getting a response back from the JSON API? 180 00:07:35,040 --> 00:07:36,840 Well, that takes much longer. 181 00:07:36,840 --> 00:07:38,910 Again, maybe dozens of milliseconds 182 00:07:38,910 --> 00:07:40,350 or maybe many seconds, 183 00:07:40,350 --> 00:07:42,840 depending on the quality of our internet connection. 184 00:07:42,840 --> 00:07:45,270 So, without that Redux Promise Middleware, 185 00:07:45,270 --> 00:07:47,190 our request has showed up 186 00:07:47,190 --> 00:07:50,553 inside the reducer way before it's ready. 187 00:07:51,420 --> 00:07:56,280 So, this in total is an example of why we use Middlewares. 188 00:07:56,280 --> 00:07:59,070 We use Middlewares to look at actions 189 00:07:59,070 --> 00:08:01,440 that are about to be sent to a reducer 190 00:08:01,440 --> 00:08:05,280 and we get the opportunity to delay the action, 191 00:08:05,280 --> 00:08:08,220 or we get the ability to log it, 192 00:08:08,220 --> 00:08:12,000 or modify it or stop the action entirely, 193 00:08:12,000 --> 00:08:13,980 and it's only through these Middlewares 194 00:08:13,980 --> 00:08:16,500 that we can make these asynchronous requests, 195 00:08:16,500 --> 00:08:19,290 or many other different types of operations, 196 00:08:19,290 --> 00:08:23,043 work the way we expect inside of a Redux application. 197 00:08:24,270 --> 00:08:25,103 Okay. 198 00:08:25,103 --> 00:08:27,270 So, that's kind of like the first little bit on Middlewares. 199 00:08:27,270 --> 00:08:30,000 That's why we are using Redux Promise. 200 00:08:30,000 --> 00:08:31,140 We are using Redux Promise 201 00:08:31,140 --> 00:08:34,980 because we want to inspect every action that gets dispatched 202 00:08:34,980 --> 00:08:37,110 or that gets returned from the action creator, 203 00:08:37,110 --> 00:08:38,730 and if it contains a request, 204 00:08:38,730 --> 00:08:41,340 we want to delay it, cause we wanna make sure 205 00:08:41,340 --> 00:08:43,260 that we get that response to come back 206 00:08:43,260 --> 00:08:45,723 before it goes on to the reducer. 207 00:08:46,620 --> 00:08:48,000 So, now that we've got a better idea 208 00:08:48,000 --> 00:08:50,490 of how Redux Promise works, let's- 209 00:08:50,490 --> 00:08:52,830 Or at least I should say, what it does for us. 210 00:08:52,830 --> 00:08:54,090 We don't really know how it works just yet. 211 00:08:54,090 --> 00:08:55,710 We at least know what it does for us. 212 00:08:55,710 --> 00:08:57,060 Let's continue in the next section, 213 00:08:57,060 --> 00:08:59,670 and we're gonna talk about the actual implementation 214 00:08:59,670 --> 00:09:00,720 of Redux Promise 215 00:09:00,720 --> 00:09:01,553 and then we'll get started 216 00:09:01,553 --> 00:09:03,663 on putting together our own Middleware.