1 00:00:01,080 --> 00:00:01,913 Instructor: In the last section, 2 00:00:01,913 --> 00:00:04,740 we wired up our async middleware right here. 3 00:00:04,740 --> 00:00:05,610 We're now going to hook it up 4 00:00:05,610 --> 00:00:06,870 to the rest of our application 5 00:00:06,870 --> 00:00:08,550 and then we're gonna do a little bit of debugging 6 00:00:08,550 --> 00:00:10,350 just to play around with it a little bit 7 00:00:10,350 --> 00:00:12,690 and get a better idea of what's going on. 8 00:00:12,690 --> 00:00:16,170 So to get started, I'm gonna open up my Root.js file. 9 00:00:16,170 --> 00:00:18,120 This is where we create our redux store 10 00:00:18,120 --> 00:00:20,250 and this is where we wire up all the different middlewares 11 00:00:20,250 --> 00:00:22,830 that are included inside of our project. 12 00:00:22,830 --> 00:00:25,380 I'm gonna find the reduxPromise middleware right here, 13 00:00:25,380 --> 00:00:26,820 I'm gonna delete the import statement 14 00:00:26,820 --> 00:00:28,890 'cause we're not gonna make use of that. 15 00:00:28,890 --> 00:00:31,950 Instead, I'm going to import async 16 00:00:31,950 --> 00:00:36,690 from middlewares/async. 17 00:00:36,690 --> 00:00:39,630 And then, I'll take that function, our middleware, 18 00:00:39,630 --> 00:00:42,753 and add it to the apply middleware function, like so. 19 00:00:44,310 --> 00:00:46,530 All right, so I'm gonna save this file 20 00:00:46,530 --> 00:00:48,150 and I'm gonna flip back over to my browser 21 00:00:48,150 --> 00:00:49,860 and we're gonna test this thing out. 22 00:00:49,860 --> 00:00:51,330 Now, one thing I wanna mention really quickly 23 00:00:51,330 --> 00:00:52,920 is that in my comments reducer, 24 00:00:52,920 --> 00:00:54,630 I still have the debugger right here 25 00:00:54,630 --> 00:00:56,100 inside of fetch comments. 26 00:00:56,100 --> 00:00:57,210 So I'm still going to be able 27 00:00:57,210 --> 00:01:01,443 to see this data, or this action, come into this reducer. 28 00:01:02,610 --> 00:01:04,410 All right, I'm gonna flip back over, 29 00:01:05,459 --> 00:01:07,173 I'm gonna do a hard refresh. 30 00:01:15,690 --> 00:01:17,880 And then, I'm going to sign in, 31 00:01:17,880 --> 00:01:20,880 go to post a comment and fetch comments. 32 00:01:20,880 --> 00:01:23,460 Now, just as before, I hit that debugger statement 33 00:01:23,460 --> 00:01:25,770 so I should be able to log out my action 34 00:01:25,770 --> 00:01:28,470 and see all of our response data 35 00:01:28,470 --> 00:01:31,110 on our action payload property. 36 00:01:31,110 --> 00:01:32,070 So there's the action. 37 00:01:32,070 --> 00:01:33,480 I see fetch comments. 38 00:01:33,480 --> 00:01:36,150 And on the payload property is our response data 39 00:01:36,150 --> 00:01:37,350 from that API. 40 00:01:37,350 --> 00:01:40,860 So the thing is definitely working the way we expect. 41 00:01:40,860 --> 00:01:43,440 Now, before we just call success right there, 42 00:01:43,440 --> 00:01:46,200 I am going to flip back over to the reducer, 43 00:01:46,200 --> 00:01:48,453 I'm going to remove this debugger right here, 44 00:01:49,920 --> 00:01:52,320 and I'm going to instead add a new debugger 45 00:01:52,320 --> 00:01:55,410 inside of the middleware that we just created. 46 00:01:55,410 --> 00:01:58,650 So inside of here, right above our if statement, 47 00:01:58,650 --> 00:02:00,183 I'm gonna add a debugger. 48 00:02:01,350 --> 00:02:03,870 So we're gonna take a look at all the different actions 49 00:02:03,870 --> 00:02:05,730 that come into our middleware 50 00:02:05,730 --> 00:02:08,039 and get a sense of how they're being handled 51 00:02:08,039 --> 00:02:09,002 by our middleware. 52 00:02:09,990 --> 00:02:11,610 So I'm now gonna flip back over. 53 00:02:11,610 --> 00:02:13,023 I'll do another refresh. 54 00:02:15,990 --> 00:02:17,280 And then, we're probably gonna very quickly 55 00:02:17,280 --> 00:02:19,323 see that debugger statement hit. 56 00:02:24,720 --> 00:02:27,480 All right, so I'm gonna try signing in. 57 00:02:27,480 --> 00:02:28,830 And as soon as I sign in, 58 00:02:28,830 --> 00:02:31,233 the debugger statement right here catches. 59 00:02:32,220 --> 00:02:34,710 So our debugger statement gets called with an action 60 00:02:34,710 --> 00:02:37,650 and I'm going to, again, log that action out. 61 00:02:37,650 --> 00:02:41,040 Now in this case, you can see that our middleware 62 00:02:41,040 --> 00:02:43,980 has been called with a change off action. 63 00:02:43,980 --> 00:02:46,110 So we are trying to change our authentication status 64 00:02:46,110 --> 00:02:47,730 over to true. 65 00:02:47,730 --> 00:02:50,160 I'm gonna use the built-in Chrome developer tools 66 00:02:50,160 --> 00:02:51,660 to walk through this middleware function 67 00:02:51,660 --> 00:02:54,213 and see what it tries to do with this action. 68 00:02:56,010 --> 00:02:58,290 So I go down to the if statement right here, 69 00:02:58,290 --> 00:03:00,060 where we're gonna check to see if the action 70 00:03:00,060 --> 00:03:01,800 has a payload property. 71 00:03:01,800 --> 00:03:03,330 In this case, it does. 72 00:03:03,330 --> 00:03:04,740 And then, we're gonna further check to see 73 00:03:04,740 --> 00:03:07,770 if the payload property has .then property. 74 00:03:07,770 --> 00:03:10,320 In this case, it does not have a .then property 75 00:03:10,320 --> 00:03:12,840 or it has a value of undefined for it. 76 00:03:12,840 --> 00:03:14,883 So it does not pass the if statement. 77 00:03:16,170 --> 00:03:18,900 It enters the if statement's body 78 00:03:18,900 --> 00:03:21,300 and we end up returning from our middleware, 79 00:03:21,300 --> 00:03:23,040 calling next with action, 80 00:03:23,040 --> 00:03:24,960 which sends our middleware, or excuse me, 81 00:03:24,960 --> 00:03:26,760 sends our action to the next middleware 82 00:03:26,760 --> 00:03:27,930 in our chain. 83 00:03:27,930 --> 00:03:29,760 In this case, we have no other middleware 84 00:03:29,760 --> 00:03:32,850 so the action gets sent on to our reducers. 85 00:03:32,850 --> 00:03:35,000 So I'm going to resume my script right here 86 00:03:35,880 --> 00:03:39,000 and then I'm going to flip on over to the post a comment 87 00:03:39,000 --> 00:03:40,893 and try out fetching comments. 88 00:03:41,970 --> 00:03:42,840 So when I click that, 89 00:03:42,840 --> 00:03:45,690 I get pause inside of my middleware again. 90 00:03:45,690 --> 00:03:48,273 I'm again going to look at the action variable. 91 00:03:49,380 --> 00:03:52,500 And this time around, we see the initial action 92 00:03:52,500 --> 00:03:56,760 that is issued by our action creator of fetch comments. 93 00:03:56,760 --> 00:03:59,370 So we have a type of fetch comments 94 00:03:59,370 --> 00:04:02,130 and we've got that kind of initial action payload 95 00:04:02,130 --> 00:04:04,650 of the actual promise itself. 96 00:04:04,650 --> 00:04:06,060 So this is the pending promise 97 00:04:06,060 --> 00:04:09,660 that represents the request we made out to that JSON API. 98 00:04:09,660 --> 00:04:12,960 So at this point, no data is available. 99 00:04:12,960 --> 00:04:15,543 But if we start to walk down inside this function, 100 00:04:16,589 --> 00:04:18,959 we, again, hit the it statement right here. 101 00:04:18,959 --> 00:04:20,519 Excuse me, if statement. 102 00:04:20,519 --> 00:04:22,650 We do, in fact, have a payload property 103 00:04:22,650 --> 00:04:25,830 and that payload property has a .then function. 104 00:04:25,830 --> 00:04:27,450 So in this case, we assume that yep, 105 00:04:27,450 --> 00:04:29,100 we've got a promise here 106 00:04:29,100 --> 00:04:31,620 and we're going to wait for it to resolve. 107 00:04:31,620 --> 00:04:35,010 So we come down here, we chain on a .then, 108 00:04:35,010 --> 00:04:36,630 and the function that we added right here 109 00:04:36,630 --> 00:04:40,230 is going to be called when the response hits. 110 00:04:40,230 --> 00:04:44,940 I'm gonna set a breakpoint inside of the callback function 111 00:04:44,940 --> 00:04:47,190 and then I'm going to resume script execution. 112 00:04:47,190 --> 00:04:48,810 So when it pauses again, 113 00:04:48,810 --> 00:04:51,393 it's gonna catch inside this function body. 114 00:04:53,340 --> 00:04:54,173 Okay, there we go. 115 00:04:54,173 --> 00:04:55,260 So now at this point in time, 116 00:04:55,260 --> 00:04:58,260 we've gotten a response back from that JSON API 117 00:04:58,260 --> 00:05:01,140 and I could very easily log that out. 118 00:05:01,140 --> 00:05:03,360 There is the response data right there. 119 00:05:03,360 --> 00:05:04,770 So we take that response, 120 00:05:04,770 --> 00:05:09,000 we take the old action, and we form up a new action object. 121 00:05:09,000 --> 00:05:10,710 And then, we take that new action 122 00:05:10,710 --> 00:05:12,630 and we attempt to dispatch it. 123 00:05:12,630 --> 00:05:14,130 And when we dispatch this thing, 124 00:05:14,130 --> 00:05:16,260 it makes it flow through all of the middlewares 125 00:05:16,260 --> 00:05:17,730 one more time. 126 00:05:17,730 --> 00:05:20,280 So if I now resume execution again, 127 00:05:20,280 --> 00:05:23,880 we're gonna see our original debugger statement catch. 128 00:05:23,880 --> 00:05:25,740 There it is right there. 129 00:05:25,740 --> 00:05:27,993 So now, if we again log our action, 130 00:05:29,040 --> 00:05:30,750 we'll see our brand, new action 131 00:05:30,750 --> 00:05:33,390 that you and I just created inside of our middleware. 132 00:05:33,390 --> 00:05:35,520 So now it's got a type of fetch comments. 133 00:05:35,520 --> 00:05:37,980 This time, it does not have the promise. 134 00:05:37,980 --> 00:05:39,930 Instead, the promise has been replaced 135 00:05:39,930 --> 00:05:42,450 with the data that we actually care about. 136 00:05:42,450 --> 00:05:44,340 So just as before, 137 00:05:44,340 --> 00:05:45,510 we're gonna hit the if statement. 138 00:05:45,510 --> 00:05:48,960 We don't have a payload with a .then property 139 00:05:48,960 --> 00:05:50,520 so we skip over this middleware 140 00:05:50,520 --> 00:05:53,370 by going to the next middleware in our chain. 141 00:05:53,370 --> 00:05:55,950 And again, in our case, we don't have any middleware 142 00:05:55,950 --> 00:05:59,010 so the action goes on to our reducer. 143 00:05:59,010 --> 00:06:01,590 All right, so that is pretty much it. 144 00:06:01,590 --> 00:06:03,330 That is the entire flow. 145 00:06:03,330 --> 00:06:04,830 Now, I'm gonna remove that breakpoint 146 00:06:04,830 --> 00:06:07,530 and I'm also gonna remove the debugger really quickly. 147 00:06:08,370 --> 00:06:09,900 There we go. 148 00:06:09,900 --> 00:06:11,760 So that is our first middleware. 149 00:06:11,760 --> 00:06:14,130 That is a asynchronous action creator 150 00:06:14,130 --> 00:06:16,710 handling middleware that you can now use 151 00:06:16,710 --> 00:06:18,570 on your own projects. 152 00:06:18,570 --> 00:06:19,403 I'll be honest with you. 153 00:06:19,403 --> 00:06:21,150 This essentially does all the same stuff 154 00:06:21,150 --> 00:06:24,060 that the redux promise middleware is going to do, 155 00:06:24,060 --> 00:06:26,280 almost equivalent in functionality. 156 00:06:26,280 --> 00:06:27,750 And the official redux promise middleware 157 00:06:27,750 --> 00:06:29,220 takes a very similar approach 158 00:06:29,220 --> 00:06:31,440 to what we're showing right here, as well. 159 00:06:31,440 --> 00:06:33,750 So I still think that we could do a little bit more 160 00:06:33,750 --> 00:06:34,583 with middleware. 161 00:06:34,583 --> 00:06:36,810 You might have a good idea of what they do for us 162 00:06:36,810 --> 00:06:38,730 at this point, but you might be wondering, 163 00:06:38,730 --> 00:06:39,563 you know what, Steven? 164 00:06:39,563 --> 00:06:43,080 Like, why would I use these outside of like redux promise 165 00:06:43,080 --> 00:06:45,120 or the other official ones that you might install 166 00:06:45,120 --> 00:06:45,953 on your own? 167 00:06:45,953 --> 00:06:47,940 Like, when would you create a middleware 168 00:06:47,940 --> 00:06:49,680 on one of your projects? 169 00:06:49,680 --> 00:06:51,990 So let's come back the next section. 170 00:06:51,990 --> 00:06:53,850 Now I'm gonna give you an idea for a middleware 171 00:06:53,850 --> 00:06:56,460 that you might want to write on your own project. 172 00:06:56,460 --> 00:06:58,410 It's gonna have, it's gonna be a little bit fun. 173 00:06:58,410 --> 00:07:00,000 So let's continue in the next section 174 00:07:00,000 --> 00:07:02,313 and we'll start working on a new middleware.