1 00:00:01,020 --> 00:00:02,700 -: In the last section, we had a long discussion 2 00:00:02,700 --> 00:00:05,190 about how the Redux Promise Middleware works. 3 00:00:05,190 --> 00:00:06,540 We're going to continue in this video 4 00:00:06,540 --> 00:00:10,020 by trying to create this entire flow on our own. 5 00:00:10,020 --> 00:00:12,000 So our eventual goal here is to take 6 00:00:12,000 --> 00:00:14,460 Redux Promise out of our project entirely 7 00:00:14,460 --> 00:00:17,610 and replace it with the Middleware that you and I write. 8 00:00:17,610 --> 00:00:18,663 So let's get to it. 9 00:00:19,560 --> 00:00:21,780 I'm going to get started by creating a new directory 10 00:00:21,780 --> 00:00:24,090 inside my source folder. 11 00:00:24,090 --> 00:00:26,730 I'm going to call this directory Middlewares. 12 00:00:26,730 --> 00:00:28,590 So eventually it will house all the different 13 00:00:28,590 --> 00:00:31,200 Middlewares inside of our application. 14 00:00:31,200 --> 00:00:32,430 Then inside that directory 15 00:00:32,430 --> 00:00:36,750 I'm going to make a new file called async.js. 16 00:00:36,750 --> 00:00:39,000 That's going to be the name of our Middleware 17 00:00:39,000 --> 00:00:40,320 that's going to allow us to create 18 00:00:40,320 --> 00:00:42,570 asynchronous action creators 19 00:00:42,570 --> 00:00:44,700 or action creators that return a promise 20 00:00:44,700 --> 00:00:46,143 on its payload property. 21 00:00:47,070 --> 00:00:48,660 Then inside of here, we're going to write out 22 00:00:48,660 --> 00:00:52,110 a little bit of boiler plate for the Middleware itself. 23 00:00:52,110 --> 00:00:53,940 And I'm going tell you right away, 24 00:00:53,940 --> 00:00:54,780 the code we're going to write 25 00:00:54,780 --> 00:00:57,000 is going to look a little bit funky, all right? 26 00:00:57,000 --> 00:00:59,580 But we'll talk about exactly what it's doing. 27 00:00:59,580 --> 00:01:00,960 So at the very top, I'm going to say 28 00:01:00,960 --> 00:01:03,910 export, default, a function 29 00:01:05,790 --> 00:01:09,760 and then inside there I'm going to return a function 30 00:01:11,010 --> 00:01:14,943 and then inside of there, I'm going to return a function. 31 00:01:16,020 --> 00:01:18,780 Okay? So little bit crazy, yes? 32 00:01:18,780 --> 00:01:20,890 We've got a function that we're exporting 33 00:01:21,780 --> 00:01:23,970 that is returning a function 34 00:01:23,970 --> 00:01:25,410 and that is returning a function. 35 00:01:25,410 --> 00:01:27,540 So right now we've got three functions 36 00:01:27,540 --> 00:01:30,180 all stacked up on top of each other. 37 00:01:30,180 --> 00:01:31,680 So immediately this probably looks 38 00:01:31,680 --> 00:01:34,170 really strange and really nasty. 39 00:01:34,170 --> 00:01:37,950 Well, believe it or not, this is how we create Middlewares. 40 00:01:37,950 --> 00:01:41,550 We have a series of functions that return each other. 41 00:01:41,550 --> 00:01:44,790 Your first question, your very immediate question might be 42 00:01:44,790 --> 00:01:47,010 why in the world are we doing this right here? 43 00:01:47,010 --> 00:01:48,300 And the answer that I have for you 44 00:01:48,300 --> 00:01:51,540 is that it's somewhat arbitrarily put together this way. 45 00:01:51,540 --> 00:01:55,290 The author of Redux decided to make the signature 46 00:01:55,290 --> 00:01:57,420 of Middlewares look like this. 47 00:01:57,420 --> 00:02:00,990 It's a completely arbitrary and random decision. 48 00:02:00,990 --> 00:02:03,300 We somewhat could have just as well 49 00:02:03,300 --> 00:02:05,200 gotten away with doing Middlewares 50 00:02:06,300 --> 00:02:08,100 that just looked like this. 51 00:02:08,100 --> 00:02:09,690 We probably could have figured out a way 52 00:02:09,690 --> 00:02:10,680 or the author of Redux, 53 00:02:10,680 --> 00:02:12,540 probably could have written it out like this 54 00:02:12,540 --> 00:02:14,340 and say, "Okay, just put your Middleware logic 55 00:02:14,340 --> 00:02:16,320 inside of here and you're good to go." 56 00:02:16,320 --> 00:02:17,880 That probably could have happened, 57 00:02:17,880 --> 00:02:19,740 but for whatever reason they decided to use 58 00:02:19,740 --> 00:02:21,630 a little bit more fancy syntax 59 00:02:21,630 --> 00:02:22,930 like what you see up here. 60 00:02:23,940 --> 00:02:25,650 So kind of an arbitrary decision, 61 00:02:25,650 --> 00:02:27,933 not necessarily a great reason for it. 62 00:02:28,860 --> 00:02:30,240 So let's talk about what the purpose 63 00:02:30,240 --> 00:02:33,023 of each of these functions are. At the end of the day 64 00:02:33,023 --> 00:02:35,160 each function is going to be getting called 65 00:02:35,160 --> 00:02:38,520 with a slightly different set of arguments. 66 00:02:38,520 --> 00:02:41,940 The first outer function right here, is going to be called 67 00:02:41,940 --> 00:02:44,940 with a couple of different properties on the first argument. 68 00:02:44,940 --> 00:02:47,910 So it's going to be an object with a couple properties. 69 00:02:47,910 --> 00:02:49,740 Right now, you and I only care about 70 00:02:49,740 --> 00:02:52,050 one property off of that object, 71 00:02:52,050 --> 00:02:55,050 so we're going to destructure that one property off. 72 00:02:55,050 --> 00:02:58,890 That one property is called dispatch, like so. 73 00:02:58,890 --> 00:03:00,420 And notice that we have the curly braces here 74 00:03:00,420 --> 00:03:02,250 because we specifically want to pull off 75 00:03:02,250 --> 00:03:03,670 just that dispatch thing 76 00:03:04,530 --> 00:03:06,510 and we'll talk about what dispatch does in just a second. 77 00:03:06,510 --> 00:03:07,680 But for now, let's talk 78 00:03:07,680 --> 00:03:09,633 about the other two functions as well. 79 00:03:11,190 --> 00:03:13,590 The second function down is going to be called 80 00:03:13,590 --> 00:03:16,413 with a single argument of, next. 81 00:03:17,700 --> 00:03:20,910 Next, right here is also a function. 82 00:03:20,910 --> 00:03:25,380 Next, is a reference to the next Middleware on our chain. 83 00:03:25,380 --> 00:03:27,000 So remember, inside of our application 84 00:03:27,000 --> 00:03:30,360 we could potentially have many different Middlewares. 85 00:03:30,360 --> 00:03:32,220 When we were looking at this diagram just a second ago 86 00:03:32,220 --> 00:03:34,650 we had the text on here that said something like 87 00:03:34,650 --> 00:03:37,800 I don't know, I don't care about this action, 88 00:03:37,800 --> 00:03:41,940 send it to NEXT Middleware. 89 00:03:41,940 --> 00:03:45,690 So NEXT right here, very purposefully put in capitals. 90 00:03:45,690 --> 00:03:47,820 NEXT is a reference to the next Middleware 91 00:03:47,820 --> 00:03:49,680 inside of our chain. 92 00:03:49,680 --> 00:03:53,220 If our Middleware does not care about the incoming action 93 00:03:53,220 --> 00:03:56,160 then it can call this next function with that action 94 00:03:56,160 --> 00:03:57,810 and that's going to afford the action 95 00:03:57,810 --> 00:03:59,133 onto the next Middleware. 96 00:04:00,540 --> 00:04:02,790 Now the last function, the third one right here 97 00:04:02,790 --> 00:04:05,670 is going to be called with our action object. 98 00:04:05,670 --> 00:04:08,370 So this is like the very real action that got returned 99 00:04:08,370 --> 00:04:10,140 from our action creator. 100 00:04:10,140 --> 00:04:12,150 So it's going to be like this thing up here. 101 00:04:12,150 --> 00:04:14,400 It's going to be an object with a tight property 102 00:04:14,400 --> 00:04:16,713 and possibly with a payload as well. 103 00:04:17,700 --> 00:04:20,459 Okay, so we spoke about the three functions here 104 00:04:20,459 --> 00:04:22,290 and some of the arguments that are 105 00:04:22,290 --> 00:04:24,720 encapsulated with each one. 106 00:04:24,720 --> 00:04:26,280 So we've got the arguments on here 107 00:04:26,280 --> 00:04:27,900 and I think you can agree with me 108 00:04:27,900 --> 00:04:30,000 that although this code looks really nasty 109 00:04:30,000 --> 00:04:32,250 you can kind of understand what's going on. 110 00:04:32,250 --> 00:04:34,170 We've got a function, that returns a function, 111 00:04:34,170 --> 00:04:35,880 that returns the function. 112 00:04:35,880 --> 00:04:37,440 So now that we've kind of got an idea 113 00:04:37,440 --> 00:04:38,430 of what's happening here 114 00:04:38,430 --> 00:04:41,520 we're going to do a little refactor to this file. 115 00:04:41,520 --> 00:04:42,810 Now, when we do the refactor 116 00:04:42,810 --> 00:04:45,210 it's going to make the code look really crazy 117 00:04:45,210 --> 00:04:47,220 but I really want you to understand 118 00:04:47,220 --> 00:04:48,900 that the refactor we're going to do, 119 00:04:48,900 --> 00:04:50,790 even though the syntax will look strange, 120 00:04:50,790 --> 00:04:52,758 is going to be a 100% equivalent 121 00:04:52,758 --> 00:04:54,870 to what you currently see on the screen. 122 00:04:54,870 --> 00:04:57,480 Okay? It's going be a 100% equivalent. 123 00:04:57,480 --> 00:04:58,803 So let's do this refactor. 124 00:04:59,850 --> 00:05:01,380 To get started, I'm going to go up 125 00:05:01,380 --> 00:05:02,940 to the very top line up here, 126 00:05:02,940 --> 00:05:05,550 and I'm going to replace the function keyword 127 00:05:05,550 --> 00:05:08,520 with an arrow function instead. 128 00:05:08,520 --> 00:05:12,150 So to refactor this thing to an arrow function 129 00:05:12,150 --> 00:05:15,000 I'm going to remove the function keyword 130 00:05:15,000 --> 00:05:17,640 and then I'll put the arrow on the other side 131 00:05:17,640 --> 00:05:19,113 of that argument like so. 132 00:05:20,520 --> 00:05:22,980 Okay? So that's refactor number one. 133 00:05:22,980 --> 00:05:25,590 Now remember, anytime we have an arrow function 134 00:05:25,590 --> 00:05:28,830 if the arrow function contains a single expression 135 00:05:28,830 --> 00:05:31,260 like just one line of JavaScript code, 136 00:05:31,260 --> 00:05:35,313 then we can optionally remove our semi or our curly braces. 137 00:05:36,360 --> 00:05:38,190 So this curly brace right here 138 00:05:38,190 --> 00:05:39,930 and this curly brace right here, 139 00:05:39,930 --> 00:05:42,840 and we can omit the return keyword. 140 00:05:42,840 --> 00:05:44,610 So that's one valid refactor, 141 00:05:44,610 --> 00:05:47,430 one very valid way to write out an arrow function. 142 00:05:47,430 --> 00:05:50,040 The arrow function contains a JavaScript expression. 143 00:05:50,040 --> 00:05:53,610 We can optionally omit the curly braces 144 00:05:53,610 --> 00:05:55,263 and remove the return keyword. 145 00:05:56,160 --> 00:05:59,750 So let's apply that refactor to what we, what we have now. 146 00:05:59,750 --> 00:06:02,010 So I'm going to remove the curly braces, 147 00:06:02,010 --> 00:06:03,780 that one and that one 148 00:06:03,780 --> 00:06:06,543 and I will remove the return keyword. 149 00:06:07,620 --> 00:06:09,270 Okay, so that's step two. 150 00:06:09,270 --> 00:06:11,670 So now what we have is a 100% equivalent 151 00:06:11,670 --> 00:06:13,230 to what we just had a moment ago. 152 00:06:13,230 --> 00:06:16,173 This is still a function that returns a function. 153 00:06:17,063 --> 00:06:19,650 Now we're going to do that same refactor again 154 00:06:19,650 --> 00:06:21,120 to the next function. 155 00:06:21,120 --> 00:06:22,860 This one right here. 156 00:06:22,860 --> 00:06:25,090 So I'm going to turn this function 157 00:06:26,610 --> 00:06:28,560 into an arrow function as well. 158 00:06:28,560 --> 00:06:31,060 I'll get started by removing the function keyword. 159 00:06:32,100 --> 00:06:35,583 I will put an arrow on the other side of the argument list. 160 00:06:36,540 --> 00:06:39,540 And because I only have one single argument inside of here 161 00:06:39,540 --> 00:06:42,663 I'm going to remove the parenthesis around that next thing. 162 00:06:43,980 --> 00:06:45,690 Now we're going to apply that same rule 163 00:06:45,690 --> 00:06:47,100 that we just applied a second ago. 164 00:06:47,100 --> 00:06:49,770 Remember, if the body of our function 165 00:06:49,770 --> 00:06:53,730 so this thing right here is a single JavaScript expression 166 00:06:53,730 --> 00:06:56,190 then we can optionally omit our curly braces 167 00:06:56,190 --> 00:06:57,720 and the return keyword. 168 00:06:57,720 --> 00:07:00,300 So I'm going to do that refactor right now. 169 00:07:00,300 --> 00:07:03,150 I'm going to remove the curly braces 170 00:07:03,150 --> 00:07:04,623 and omit the return keyword. 171 00:07:05,940 --> 00:07:10,080 So now we're going to do the same refactor, one last time. 172 00:07:10,080 --> 00:07:12,390 I'm going to turn this function 173 00:07:12,390 --> 00:07:14,790 into an arrow function instead. 174 00:07:14,790 --> 00:07:18,510 So to do so, I'm going to remove the function keyword. 175 00:07:18,510 --> 00:07:20,913 I'm going put an arrow on the other side. 176 00:07:21,750 --> 00:07:23,340 And because I have one argument here 177 00:07:23,340 --> 00:07:26,310 I'm going to remove that set of parentheses. 178 00:07:26,310 --> 00:07:28,860 Now, in this case, we probably are going to have more 179 00:07:28,860 --> 00:07:31,890 than a single Java JavaScript expression in here. 180 00:07:31,890 --> 00:07:34,983 So I'm not going to omit the curly braces in this case. 181 00:07:35,970 --> 00:07:36,803 All right, so what we have 182 00:07:36,803 --> 00:07:39,450 on the screen right now is a 100% equivalent 183 00:07:39,450 --> 00:07:41,460 to what we just had a moment ago 184 00:07:41,460 --> 00:07:43,650 with all three of those function keywords in here. 185 00:07:43,650 --> 00:07:46,503 This is still a 100% valid JavaScript code. 186 00:07:47,460 --> 00:07:49,500 Now, the very last thing I'm going to do 187 00:07:49,500 --> 00:07:51,690 is to condense these functions down 188 00:07:51,690 --> 00:07:53,850 onto a single line up here. 189 00:07:53,850 --> 00:07:57,420 So all I'm doing is removing new line characters. 190 00:07:57,420 --> 00:08:01,080 So right here, I'm going to put that on a line above it 191 00:08:01,080 --> 00:08:04,380 and I'll do the same thing with action as well. 192 00:08:04,380 --> 00:08:05,760 And then the very last step 193 00:08:05,760 --> 00:08:09,930 I'm going to indent that curly brace, all right? 194 00:08:09,930 --> 00:08:11,370 So can't say it enough. 195 00:08:11,370 --> 00:08:14,070 This is a 100% equivalent code 196 00:08:14,070 --> 00:08:17,070 to the three functions that we were looking at a moment ago. 197 00:08:17,970 --> 00:08:20,040 So this right here is the boiler plate 198 00:08:20,040 --> 00:08:21,030 that you're going to write out. 199 00:08:21,030 --> 00:08:24,240 Anytime you are creating a Middleware function. 200 00:08:24,240 --> 00:08:26,310 We have in total three functions. 201 00:08:26,310 --> 00:08:29,100 A function, that returns a function, 202 00:08:29,100 --> 00:08:30,513 that returns a function. 203 00:08:31,560 --> 00:08:34,020 So now that we've done this crazy refactor, 204 00:08:34,020 --> 00:08:35,700 let's come back in the next section 205 00:08:35,700 --> 00:08:38,039 and we're going to talk about exactly what logic 206 00:08:38,039 --> 00:08:39,570 we're going to put inside of this thing. 207 00:08:39,570 --> 00:08:42,070 So quick break, and I'll see you in just a minute.