1
00:00:00,690 --> 00:00:02,610
Instructor: Okay, I really can't delay anymore.

2
00:00:02,610 --> 00:00:04,170
It's time to actually write a middleware.

3
00:00:04,170 --> 00:00:05,490
We've gotten long enough in this section

4
00:00:05,490 --> 00:00:08,460
without writing any, so let's get to it.

5
00:00:08,460 --> 00:00:09,930
Inside of our source directory,

6
00:00:09,930 --> 00:00:13,093
let's make a new folder called middlewares.

7
00:00:14,224 --> 00:00:15,630
Now, the middleware that we're gonna write here

8
00:00:15,630 --> 00:00:18,840
is gonna help us work with the asynchronous nature

9
00:00:18,840 --> 00:00:20,730
of our FETCH_USER's action.

10
00:00:20,730 --> 00:00:25,410
So let's call our middleware simply async.js.

11
00:00:25,410 --> 00:00:28,010
It's just gonna help us with an asynchronous action.

12
00:00:29,250 --> 00:00:31,260
Now, when we start writing the middleware,

13
00:00:31,260 --> 00:00:32,880
the code is gonna look really weird.

14
00:00:32,880 --> 00:00:34,500
It's gonna have a very weird,

15
00:00:34,500 --> 00:00:36,480
very strange function signature.

16
00:00:36,480 --> 00:00:39,750
But just bear with me for a bit, and we'll talk about it.

17
00:00:39,750 --> 00:00:42,240
Let's put the code down first, and then we'll kinda review.

18
00:00:42,240 --> 00:00:46,923
So at the very top, we'll put down export default function.

19
00:00:50,400 --> 00:00:52,890
This function is gonna get called with an object

20
00:00:52,890 --> 00:00:56,670
one property of which is called dispatch.

21
00:00:56,670 --> 00:00:59,430
So we're gonna pull off just the dispatch off that object.

22
00:00:59,430 --> 00:01:00,570
It is a function.

23
00:01:00,570 --> 00:01:01,920
We're gonna pull off, just dispatch.

24
00:01:01,920 --> 00:01:04,410
So we'll use the curly braces.

25
00:01:04,410 --> 00:01:06,873
Next, we'll open our function body.

26
00:01:07,770 --> 00:01:09,690
And then this is where it gets really weird,

27
00:01:09,690 --> 00:01:10,523
so bear with me.

28
00:01:10,523 --> 00:01:15,090
We're gonna write return next.

29
00:01:15,090 --> 00:01:17,190
We're gonna put down a fat arrow.

30
00:01:17,190 --> 00:01:19,530
We're gonna write action.

31
00:01:19,530 --> 00:01:21,660
We're gonna do another fat arrow.

32
00:01:21,660 --> 00:01:24,333
And then we'll open up a set of curly braces.

33
00:01:25,230 --> 00:01:28,260
Then inside of here, just two more steps.

34
00:01:28,260 --> 00:01:31,623
We'll put console.log action.

35
00:01:32,880 --> 00:01:35,643
And then next action.

36
00:01:36,480 --> 00:01:37,800
And then I'm gonna save it.

37
00:01:37,800 --> 00:01:39,540
Now, before we talk about anything that's going on here,

38
00:01:39,540 --> 00:01:42,090
let's actually wire the middleware up to our application,

39
00:01:42,090 --> 00:01:43,540
and just see what's going on.

40
00:01:44,640 --> 00:01:45,870
To wire up our middleware,

41
00:01:45,870 --> 00:01:48,750
we're gonna go over to our top-level index.js file

42
00:01:48,750 --> 00:01:50,373
inside of our source directory.

43
00:01:51,690 --> 00:01:55,140
Once inside of here, we'll import our new async middleware.

44
00:01:55,140 --> 00:01:57,310
Import async

45
00:01:59,670 --> 00:02:02,810
from middlewares/async.

46
00:02:06,360 --> 00:02:07,380
And now all we have to do

47
00:02:07,380 --> 00:02:09,330
is add this little async right here.

48
00:02:09,330 --> 00:02:11,400
Async to this applied middleware

49
00:02:11,400 --> 00:02:14,010
that should already exist inside this file.

50
00:02:14,010 --> 00:02:17,910
So inside of the first set of parens for applied middleware,

51
00:02:17,910 --> 00:02:19,923
we'll just add async like so.

52
00:02:20,760 --> 00:02:22,980
Okay, so at this point in time, let's flip back over,

53
00:02:22,980 --> 00:02:24,690
and kinda just glance this code very briefly.

54
00:02:24,690 --> 00:02:26,377
I want you to kind of think in your head,

55
00:02:26,377 --> 00:02:27,540
"All right, what's gonna happen here?"

56
00:02:27,540 --> 00:02:29,310
Like, "What is the purpose of this middleware?

57
00:02:29,310 --> 00:02:30,780
What might happen?"

58
00:02:30,780 --> 00:02:34,050
You know, I haven't necessarily told you enough

59
00:02:34,050 --> 00:02:36,360
to have a reasonable idea about what's going on.

60
00:02:36,360 --> 00:02:38,280
Nonetheless, I'd love if you just cave it,

61
00:02:38,280 --> 00:02:39,600
kinda gave it a shot, you know.

62
00:02:39,600 --> 00:02:41,450
Kinda think what's gonna happen here.

63
00:02:42,600 --> 00:02:46,470
Let's open up our browser, and pull up our application,

64
00:02:46,470 --> 00:02:49,020
and just see what happens.

65
00:02:49,020 --> 00:02:51,153
I'm gonna open the terminal, the console.

66
00:02:52,500 --> 00:02:53,793
And then refresh the app.

67
00:02:56,010 --> 00:02:57,840
And it looks like we've got a little bit

68
00:02:57,840 --> 00:02:59,550
of a mistake in here.

69
00:02:59,550 --> 00:03:02,100
I think I made a small typo.

70
00:03:02,100 --> 00:03:04,470
Oh, I don't know why, but I put on a set of parens.

71
00:03:04,470 --> 00:03:05,343
My mistake.

72
00:03:09,480 --> 00:03:11,460
Put a closing paren right here.

73
00:03:11,460 --> 00:03:13,050
Totally my mistake, I apologize.

74
00:03:13,050 --> 00:03:14,103
So let's save.

75
00:03:15,270 --> 00:03:16,443
We'll refresh.

76
00:03:19,410 --> 00:03:20,640
And now, okay.

77
00:03:20,640 --> 00:03:21,870
So this is looking a little bit better.

78
00:03:21,870 --> 00:03:25,080
We got a console.log in here, and specifically, it says,

79
00:03:25,080 --> 00:03:28,620
type fetch_users and a payload of a promise.

80
00:03:28,620 --> 00:03:30,630
Okay, so this is pretty interesting.

81
00:03:30,630 --> 00:03:33,530
So let's talk about exactly what this middleware is doing.

82
00:03:34,740 --> 00:03:36,660
So in the entire topic of,

83
00:03:36,660 --> 00:03:38,520
as we're talking about middlewares,

84
00:03:38,520 --> 00:03:41,430
I know we've got this really weird function signature.

85
00:03:41,430 --> 00:03:44,460
From this file, we're returning a function.

86
00:03:44,460 --> 00:03:48,300
When ran, it's going to return another function.

87
00:03:48,300 --> 00:03:51,150
That's what's going on with the first fat arrow here.

88
00:03:51,150 --> 00:03:53,040
And then when that one's ran,

89
00:03:53,040 --> 00:03:54,720
it's gonna return another function

90
00:03:54,720 --> 00:03:56,610
that can get called with an action.

91
00:03:56,610 --> 00:03:58,320
So I know this looks crazy.

92
00:03:58,320 --> 00:04:00,570
Let's try reformatting it a little bit.

93
00:04:00,570 --> 00:04:02,670
Maybe use a little bit of vanilla ES5,

94
00:04:02,670 --> 00:04:05,760
and then things might make a little bit more sense.

95
00:04:05,760 --> 00:04:08,370
So no need to follow along this part.

96
00:04:08,370 --> 00:04:10,320
I would definitely prefer if you just watched.

97
00:04:10,320 --> 00:04:12,820
So well, I'm gonna add in a function keyword here.

98
00:04:14,310 --> 00:04:15,513
We're gonna have next.

99
00:04:18,959 --> 00:04:22,743
I'm gonna add in another return function action.

100
00:04:23,730 --> 00:04:25,743
And then only inside of here,

101
00:04:27,540 --> 00:04:30,300
and I'm gonna put the code that I actually care about.

102
00:04:30,300 --> 00:04:32,880
Okay, so I know this, we've got three functions in a row,

103
00:04:32,880 --> 00:04:34,050
so it still looks a bit weird,

104
00:04:34,050 --> 00:04:36,810
but at least it looks a little bit more normal, right?

105
00:04:36,810 --> 00:04:39,810
We have a function, that returns a function,

106
00:04:39,810 --> 00:04:41,133
that returns a function.

107
00:04:42,060 --> 00:04:43,890
Why is the method signature like this?

108
00:04:43,890 --> 00:04:45,480
I don't have an immediate answer for you.

109
00:04:45,480 --> 00:04:47,550
I can only say it just is, right?

110
00:04:47,550 --> 00:04:49,110
It's just one of those things.

111
00:04:49,110 --> 00:04:51,910
Let's save this file, and see if we can actually run it.

112
00:04:53,100 --> 00:04:55,920
And sure enough, we still get our console.log here.

113
00:04:55,920 --> 00:04:57,060
And it looks like, you know, of course,

114
00:04:57,060 --> 00:04:59,103
where our console.log in actual action.

115
00:05:00,510 --> 00:05:03,330
So this is the signature of our middlewares.

116
00:05:03,330 --> 00:05:06,030
They're always gonna have a very similar signature to this.

117
00:05:06,030 --> 00:05:08,640
The top-level function is gonna get called with dispatch,

118
00:05:08,640 --> 00:05:10,530
and we'll talk about what that is.

119
00:05:10,530 --> 00:05:12,150
It's gonna return another function

120
00:05:12,150 --> 00:05:14,460
that gets called with the next keyword,

121
00:05:14,460 --> 00:05:16,170
and we'll talk about what that is.

122
00:05:16,170 --> 00:05:18,090
And that's gonna return a function that gets called

123
00:05:18,090 --> 00:05:20,370
with a very particular action.

124
00:05:20,370 --> 00:05:22,680
And in this case, the action is whatever action

125
00:05:22,680 --> 00:05:24,060
we might dispatch over time,

126
00:05:24,060 --> 00:05:27,213
or whenever we turn an action from an action creator.

127
00:05:28,650 --> 00:05:32,370
You can see that we first console.log the action.

128
00:05:32,370 --> 00:05:35,790
And then we called next with the action.

129
00:05:35,790 --> 00:05:37,410
And so this is why I was harping on

130
00:05:37,410 --> 00:05:39,270
the keyword next so much.

131
00:05:39,270 --> 00:05:41,850
Next, literally means send this action

132
00:05:41,850 --> 00:05:44,370
onto the next middleware in my stack.

133
00:05:44,370 --> 00:05:46,440
If we don't have any other middlewares,

134
00:05:46,440 --> 00:05:48,753
it's gonna be forwarded onto our reducers.

135
00:05:50,880 --> 00:05:52,470
Okay, I would love to stick

136
00:05:52,470 --> 00:05:54,810
with the existing fat arrow syntax that we had.

137
00:05:54,810 --> 00:05:57,450
So I'm going to do a little bit of refactoring

138
00:05:57,450 --> 00:05:59,850
back to the code we had before.

139
00:05:59,850 --> 00:06:02,613
We'll put next action.

140
00:06:07,800 --> 00:06:09,780
And we should be good to go.

141
00:06:09,780 --> 00:06:11,580
I'm gonna save.

142
00:06:11,580 --> 00:06:13,140
Rerun, just to make sure everything's good.

143
00:06:13,140 --> 00:06:16,170
And yep, we still have the console.log here.

144
00:06:16,170 --> 00:06:18,393
Okay, so one more time, just to review.

145
00:06:19,290 --> 00:06:22,410
Our middlewares always have the same signature at the top.

146
00:06:22,410 --> 00:06:24,780
We're always going to return a function

147
00:06:24,780 --> 00:06:27,060
that gets called with dispatch.

148
00:06:27,060 --> 00:06:30,120
And we're gonna return from that another function

149
00:06:30,120 --> 00:06:32,010
that gets called with next.

150
00:06:32,010 --> 00:06:34,680
And we're gonna return from that another function

151
00:06:34,680 --> 00:06:36,960
that gets returned with action.

152
00:06:36,960 --> 00:06:38,850
Then inside of that function body,

153
00:06:38,850 --> 00:06:41,040
inside the innermost function body,

154
00:06:41,040 --> 00:06:43,200
this is where we can place some logic

155
00:06:43,200 --> 00:06:46,380
that we can run every single time an action creator

156
00:06:46,380 --> 00:06:48,780
returns an action inside of our application.

157
00:06:48,780 --> 00:06:50,250
So in here, essentially,

158
00:06:50,250 --> 00:06:51,840
this is kind of our window into the world.

159
00:06:51,840 --> 00:06:54,840
It's we're kinda like a little, you know, porthole,

160
00:06:54,840 --> 00:06:57,390
and we're looking out, and we see absolutely everything

161
00:06:57,390 --> 00:07:00,090
that's happening to our application flow through here.

162
00:07:00,090 --> 00:07:03,090
Every single action that we return from action creator

163
00:07:03,090 --> 00:07:05,280
is gonna flow through this function.

164
00:07:05,280 --> 00:07:07,320
And so this simple console.log right here,

165
00:07:07,320 --> 00:07:09,960
if I was running this in a really large application

166
00:07:09,960 --> 00:07:11,790
with a lot of action creators,

167
00:07:11,790 --> 00:07:15,390
I would see tons of console.logs of every single action

168
00:07:15,390 --> 00:07:19,173
that got dispatched inside of our very large application.

169
00:07:20,160 --> 00:07:22,830
In this case, we only have a single action creator.

170
00:07:22,830 --> 00:07:24,930
And so when I refresh the page,

171
00:07:24,930 --> 00:07:28,473
we see only a single action get called.

172
00:07:29,880 --> 00:07:32,310
All right, so this gets us a little bit closer

173
00:07:32,310 --> 00:07:34,590
to making use of middlewares, at least slightly.

174
00:07:34,590 --> 00:07:36,120
But we still have no idea.

175
00:07:36,120 --> 00:07:37,050
You know, once we're in here,

176
00:07:37,050 --> 00:07:39,900
how in the world are we gonna use this kind of method,

177
00:07:39,900 --> 00:07:42,450
or this, you know, little availability in here.

178
00:07:42,450 --> 00:07:43,920
The ability to reach out to this action.

179
00:07:43,920 --> 00:07:48,090
How are we gonna use this to actually resolve our promise,

180
00:07:48,090 --> 00:07:52,950
and send only the data that we care about onto our reducers?

181
00:07:52,950 --> 00:07:55,050
Let's talk about that in the next section.