1
00:00:00,540 --> 00:00:01,373
Instructor: So this is it.

2
00:00:01,373 --> 00:00:03,810
Our moment of truth, we've got our middleware

3
00:00:03,810 --> 00:00:06,120
we are making AJAX request

4
00:00:06,120 --> 00:00:08,400
and we think that we're doing the right thing.

5
00:00:08,400 --> 00:00:10,860
Whenever the request resolves, I'm gonna open

6
00:00:10,860 --> 00:00:13,440
up my browser and give it a shot.

7
00:00:13,440 --> 00:00:16,650
Let's refresh and we don't get anything here

8
00:00:16,650 --> 00:00:19,260
but that's not necessarily bad.

9
00:00:19,260 --> 00:00:23,220
Let's go ahead and put a console log in our reducer.

10
00:00:23,220 --> 00:00:25,800
I'm gonna flip over to our users reducer

11
00:00:25,800 --> 00:00:29,580
and in the case that we are under the fetch user's type

12
00:00:29,580 --> 00:00:33,303
let's console log our action.payload.

13
00:00:35,940 --> 00:00:39,690
Now I will refresh the document and, okay

14
00:00:39,690 --> 00:00:42,300
so we don't necessarily have a list of users

15
00:00:42,300 --> 00:00:44,250
we've got a response object.

16
00:00:44,250 --> 00:00:46,770
So the data that we actually care about

17
00:00:46,770 --> 00:00:51,450
our list of users that is on this .data property.

18
00:00:51,450 --> 00:00:53,490
So let's go ahead and fix up our reducer

19
00:00:53,490 --> 00:00:58,490
so instead, references.data instead of just action.payload

20
00:00:58,500 --> 00:00:59,700
cuz the data that we actually care

21
00:00:59,700 --> 00:01:04,200
about is on action.payload.data.

22
00:01:04,200 --> 00:01:06,930
I'm also gonna remove the console log.

23
00:01:06,930 --> 00:01:10,320
Let's refresh and awesome.

24
00:01:10,320 --> 00:01:11,153
There it is.

25
00:01:11,153 --> 00:01:13,260
We've got our big old list of users.

26
00:01:13,260 --> 00:01:14,700
So to get our app working

27
00:01:14,700 --> 00:01:16,620
I think there's only one last thing we need to do.

28
00:01:16,620 --> 00:01:20,520
We said that the company names needed to be appropriate

29
00:01:20,520 --> 00:01:23,583
and we could also put in the user's emails as well.

30
00:01:24,480 --> 00:01:26,553
So I'm gonna open up our user list.

31
00:01:28,170 --> 00:01:31,920
We've got a hard coded cheese factory right here.

32
00:01:31,920 --> 00:01:35,497
I'll change it to user.company.name

33
00:01:40,290 --> 00:01:43,293
and for the email we'll put on an href.

34
00:01:45,120 --> 00:01:46,530
You know, how about instead of email

35
00:01:46,530 --> 00:01:50,040
let's do all these users actually have a website property.

36
00:01:50,040 --> 00:01:51,300
Let's do website instead.

37
00:01:51,300 --> 00:01:53,850
That makes a little bit more sense perhaps.

38
00:01:53,850 --> 00:01:58,850
So we'll say that the href is gonna come from user.website.

39
00:01:58,890 --> 00:01:59,723
And if you're curious

40
00:01:59,723 --> 00:02:01,950
where I'm getting these property names from.

41
00:02:01,950 --> 00:02:03,480
These property names are all a part

42
00:02:03,480 --> 00:02:07,020
of the user object on this fake JSON API.

43
00:02:07,020 --> 00:02:08,490
Let's look at the JSON really quick.

44
00:02:08,490 --> 00:02:13,490
You can see on here that each user has a name.

45
00:02:13,710 --> 00:02:15,660
There is the email we were going to use.

46
00:02:15,660 --> 00:02:19,860
Here's the website and here's company.name.

47
00:02:19,860 --> 00:02:21,540
Okay, so with those property names in there

48
00:02:21,540 --> 00:02:25,740
let's do another refresh and yep, this is looking good.

49
00:02:25,740 --> 00:02:27,900
So we got blah, blah, blah, blah, blah, blah, blah.

50
00:02:27,900 --> 00:02:30,510
All the company names that are all goof ballish

51
00:02:30,510 --> 00:02:32,640
got this overlap V right here.

52
00:02:32,640 --> 00:02:34,980
That's kinda, ah, there we are.

53
00:02:34,980 --> 00:02:36,570
That's better.

54
00:02:36,570 --> 00:02:39,990
Okay, so this looks great, but this isn't really important

55
00:02:39,990 --> 00:02:40,860
to the app we were building.

56
00:02:40,860 --> 00:02:43,863
Let's actually review the middleware that we put together.

57
00:02:45,090 --> 00:02:47,670
So the first thing that's really important that we need to

58
00:02:47,670 --> 00:02:50,310
do whenever we're using custom middleware is we made sure

59
00:02:50,310 --> 00:02:53,550
that inside our top level index.js file

60
00:02:53,550 --> 00:02:55,500
we applied our middleware.

61
00:02:55,500 --> 00:02:58,590
So we imported it into this file and then we applied it.

62
00:02:58,590 --> 00:02:59,857
That just tells Redux,

63
00:02:59,857 --> 00:03:02,220
"Hey, whenever an action gets dispatched

64
00:03:02,220 --> 00:03:04,420
make sure it flows through this middleware."

65
00:03:05,700 --> 00:03:08,040
If we had many middleware, we'd just add them

66
00:03:08,040 --> 00:03:10,800
on into this applied middleware call with commas.

67
00:03:10,800 --> 00:03:15,300
So we could say async and maybe log

68
00:03:15,300 --> 00:03:18,270
or middleware or whatever else we might have.

69
00:03:18,270 --> 00:03:20,120
But in our case, we just had the one.

70
00:03:21,990 --> 00:03:23,670
So the really important thing to remember

71
00:03:23,670 --> 00:03:25,650
about middleware and probably the most

72
00:03:25,650 --> 00:03:27,930
important part is this diagram right here.

73
00:03:27,930 --> 00:03:29,880
Is that any action that flows

74
00:03:29,880 --> 00:03:33,510
into our middleware we need to handle in some fashion.

75
00:03:33,510 --> 00:03:35,400
We wrote a middleware where we said

76
00:03:35,400 --> 00:03:37,860
if the action does not contain a promise

77
00:03:37,860 --> 00:03:40,110
just send it on to the next middleware.

78
00:03:40,110 --> 00:03:43,770
If it does contain a promise, we waited for it to resolve.

79
00:03:43,770 --> 00:03:45,180
Once it was resolved

80
00:03:45,180 --> 00:03:48,430
we got the data and forwarded on into our action

81
00:03:49,470 --> 00:03:52,353
which ran through all of the middlewares all over again.

82
00:03:53,940 --> 00:03:55,247
We made sure

83
00:03:55,247 --> 00:03:57,660
that the new action that we created got dispatched to

84
00:03:57,660 --> 00:04:00,360
or got sent through, I should say, all of our middlewares

85
00:04:00,360 --> 00:04:03,270
again from the very top of the stack by sending the action

86
00:04:03,270 --> 00:04:07,260
into the dispatch method instead of the next method.

87
00:04:07,260 --> 00:04:08,910
So again, dispatch is what starts

88
00:04:08,910 --> 00:04:11,370
from the top of this chain or top of the stack.

89
00:04:11,370 --> 00:04:14,343
Next just literally means go to the next middleware.

90
00:04:15,540 --> 00:04:17,370
The other thing that we did was kind of interesting

91
00:04:17,370 --> 00:04:18,930
is we wrote some code in here to

92
00:04:18,930 --> 00:04:22,140
actually decide really, really make sure

93
00:04:22,140 --> 00:04:24,330
that the action that we were working with here

94
00:04:24,330 --> 00:04:25,650
was one that we cared about.

95
00:04:25,650 --> 00:04:27,030
So we needed to kind of plumb

96
00:04:27,030 --> 00:04:28,650
through the actions that we were making use of.

97
00:04:28,650 --> 00:04:29,940
We had to make sure,

98
00:04:29,940 --> 00:04:31,830
there was some level of filtering there and we were

99
00:04:31,830 --> 00:04:35,610
only touching the actions that actually contained a promise.

100
00:04:35,610 --> 00:04:38,940
If we had gotten down here with every single action

101
00:04:38,940 --> 00:04:41,760
maybe an action doesn't contain a payload at all.

102
00:04:41,760 --> 00:04:43,560
And so when we called dot then

103
00:04:43,560 --> 00:04:46,740
on basically what could be undefined, boom

104
00:04:46,740 --> 00:04:48,600
it would've just thrown an error.

105
00:04:48,600 --> 00:04:50,670
So when you're writing your middlewares,

106
00:04:50,670 --> 00:04:52,710
if you ever make a custom middleware, do make sure

107
00:04:52,710 --> 00:04:55,230
that you're handling strange cases like this cases

108
00:04:55,230 --> 00:04:58,173
in which your action might not have a payload at all.

109
00:05:00,390 --> 00:05:02,550
After our action got dispatched

110
00:05:02,550 --> 00:05:03,900
from the top of the chain, again

111
00:05:03,900 --> 00:05:06,810
it did flow through this middleware a second time

112
00:05:06,810 --> 00:05:09,570
but the second time through it no longer had a promise

113
00:05:09,570 --> 00:05:11,850
on its payload property and so it just went

114
00:05:11,850 --> 00:05:15,810
on to the next middleware, or in this case our reducers.

115
00:05:15,810 --> 00:05:18,900
So that's pretty much it for custom middleware in general

116
00:05:18,900 --> 00:05:20,850
when you're writing your own, all you really gotta

117
00:05:20,850 --> 00:05:24,810
remember is this crazy town function signature up here.

118
00:05:24,810 --> 00:05:25,980
As far as the body

119
00:05:25,980 --> 00:05:28,860
it really is up to you as to what you want to do.

120
00:05:28,860 --> 00:05:31,799
This is just one very particular example that I

121
00:05:31,799 --> 00:05:34,230
modeled after another existing middleware

122
00:05:34,230 --> 00:05:36,750
called Redux Promise.

123
00:05:36,750 --> 00:05:39,120
You can build middlewares to do many different things

124
00:05:39,120 --> 00:05:42,030
and I've used them in many different applications.

125
00:05:42,030 --> 00:05:44,430
One application that always stands out to me

126
00:05:44,430 --> 00:05:47,340
one where I saved a ton of time was when I had

127
00:05:47,340 --> 00:05:51,030
a API response that had a real...

128
00:05:51,030 --> 00:05:53,220
It was just a real jumbled mess of response.

129
00:05:53,220 --> 00:05:56,130
There was just a lot of extraneous properties.

130
00:05:56,130 --> 00:05:58,500
The response was formatted really strange.

131
00:05:58,500 --> 00:06:00,180
A lot of the property names didn't really match

132
00:06:00,180 --> 00:06:02,310
up with what my app was already using.

133
00:06:02,310 --> 00:06:06,870
And so I used a middleware to intercept any action that came

134
00:06:06,870 --> 00:06:09,810
from that very particular API endpoint.

135
00:06:09,810 --> 00:06:13,080
And if it did, I stuck a bunch of logic into kind

136
00:06:13,080 --> 00:06:17,280
of transcribe or mutate the response that we got back

137
00:06:17,280 --> 00:06:19,080
into something that was a lot more palatable.

138
00:06:19,080 --> 00:06:22,100
So it had very consistent property names

139
00:06:22,100 --> 00:06:24,090
it had consistent structure

140
00:06:24,090 --> 00:06:25,800
and so I basically just used a middleware to

141
00:06:25,800 --> 00:06:29,493
massage the response I got back from this API.

142
00:06:30,468 --> 00:06:32,370
And so that's not always, you know, the best solution

143
00:06:32,370 --> 00:06:33,720
but it was a solution

144
00:06:33,720 --> 00:06:36,120
in which I didn't have control over the actual API.

145
00:06:36,120 --> 00:06:38,670
So the only option was to build a middleware

146
00:06:38,670 --> 00:06:41,310
to kind of massage that response a little bit

147
00:06:41,310 --> 00:06:43,800
into something that I really liked.

148
00:06:43,800 --> 00:06:45,330
All right, so this is fantastic.

149
00:06:45,330 --> 00:06:47,070
I hope you've learned a lot about middleware.

150
00:06:47,070 --> 00:06:49,803
Let's go ahead and get continued in the next section.