1
00:00:00,960 --> 00:00:01,793
Narrator: In the last section,

2
00:00:01,793 --> 00:00:04,620
we installed axios to make an Ajax request

3
00:00:04,620 --> 00:00:06,030
and then we returned that request

4
00:00:06,030 --> 00:00:07,680
on our action payload.

5
00:00:07,680 --> 00:00:08,880
The goal here was to establish

6
00:00:08,880 --> 00:00:11,670
that we had a big problem in our application.

7
00:00:11,670 --> 00:00:13,080
When we returned our action,

8
00:00:13,080 --> 00:00:16,650
it instantly got forwarded to all of our reducers.

9
00:00:16,650 --> 00:00:18,150
We put a debugger statement in

10
00:00:18,150 --> 00:00:19,140
and we confirmed that,

11
00:00:19,140 --> 00:00:22,440
yep, promise is there or you know there is a request there,

12
00:00:22,440 --> 00:00:23,820
but the problem was that we didn't give

13
00:00:23,820 --> 00:00:26,580
the request any time the action resolve.

14
00:00:26,580 --> 00:00:28,230
So by the time the action ended

15
00:00:28,230 --> 00:00:31,620
up in this reducer, it was in still in pending,

16
00:00:31,620 --> 00:00:33,720
it didn't have any data yet.

17
00:00:33,720 --> 00:00:35,160
So, we're going to write a middleware

18
00:00:35,160 --> 00:00:36,700
that's gonna help us wait

19
00:00:37,890 --> 00:00:40,080
to send an action to a reducer

20
00:00:40,080 --> 00:00:43,710
until the action is actually resolved.

21
00:00:43,710 --> 00:00:44,670
That's the key.

22
00:00:44,670 --> 00:00:47,703
We want it resolved before it hits our reducers.

23
00:00:48,660 --> 00:00:50,370
One thing that we left in from the last section

24
00:00:50,370 --> 00:00:51,810
was a debugger statement right here.

25
00:00:51,810 --> 00:00:53,490
Do make sure that it gets removed,

26
00:00:53,490 --> 00:00:55,140
so I'm gonna delete it right now.

27
00:00:56,160 --> 00:00:57,870
Okay, looks good.

28
00:00:57,870 --> 00:01:00,150
Before we dive into anything too particular

29
00:01:00,150 --> 00:01:02,400
or anything around our application,

30
00:01:02,400 --> 00:01:04,620
let's do a little bit more of a general talk

31
00:01:04,620 --> 00:01:07,200
about what's going on inside of the middleware.

32
00:01:07,200 --> 00:01:08,550
I'm gonna pull a diagram on the screen

33
00:01:08,550 --> 00:01:11,280
that's gonna help us learn a little bit more

34
00:01:11,280 --> 00:01:14,670
about one of the most important topics with middleware.

35
00:01:14,670 --> 00:01:17,940
So this is what I refer to as a middleware stack.

36
00:01:17,940 --> 00:01:20,910
We have a series or stack of middlewares.

37
00:01:20,910 --> 00:01:23,460
We have middleware one, middleware two,

38
00:01:23,460 --> 00:01:24,660
and middleware three.

39
00:01:24,660 --> 00:01:27,120
So again, we can have many different middlewares

40
00:01:27,120 --> 00:01:29,490
inside of one redux application

41
00:01:29,490 --> 00:01:32,733
and they can all do just wildly, wildly different things.

42
00:01:34,620 --> 00:01:37,800
Let's talk a little bit about the sequence of events here.

43
00:01:37,800 --> 00:01:41,400
Whenever we create an action in an action creator

44
00:01:41,400 --> 00:01:43,710
and return it from our action creator,

45
00:01:43,710 --> 00:01:45,210
that action is then gonna be piped

46
00:01:45,210 --> 00:01:47,760
through all the different middlewares that we have.

47
00:01:48,840 --> 00:01:52,590
Middlewares have a common interface between each of them.

48
00:01:52,590 --> 00:01:55,800
They each get called with a very particular action,

49
00:01:55,800 --> 00:01:58,350
whichever action we're dispatching

50
00:01:58,350 --> 00:02:00,183
or returning from an action creator.

51
00:02:01,410 --> 00:02:04,320
Let's say, for example that we have three middlewares,

52
00:02:04,320 --> 00:02:07,560
and the first and the third don't care anything

53
00:02:07,560 --> 00:02:08,393
about the action.

54
00:02:08,393 --> 00:02:10,710
They're just there to just exist,

55
00:02:10,710 --> 00:02:12,840
let's say they have no purpose whatsoever.

56
00:02:12,840 --> 00:02:15,210
They are just some empty middleware that we wrote

57
00:02:15,210 --> 00:02:17,220
and they don't care about any particular action

58
00:02:17,220 --> 00:02:18,810
that we create.

59
00:02:18,810 --> 00:02:22,290
When an action flows into this first middleware,

60
00:02:22,290 --> 00:02:23,970
the middleware will look at the action.

61
00:02:23,970 --> 00:02:26,490
It's gonna say, "No, I don't care about this.

62
00:02:26,490 --> 00:02:27,390
I don't wanna touch it,

63
00:02:27,390 --> 00:02:30,420
I choose not to do anything with this action.

64
00:02:30,420 --> 00:02:33,630
I'm just gonna pass it to the next middleware."

65
00:02:33,630 --> 00:02:34,950
So the next middleware in the chain

66
00:02:34,950 --> 00:02:37,050
which would be number two.

67
00:02:37,050 --> 00:02:39,630
The keyword next I'm using here,

68
00:02:39,630 --> 00:02:42,930
the very capitalized and bolded next

69
00:02:42,930 --> 00:02:45,870
is a very important keyword, it's a very important term

70
00:02:45,870 --> 00:02:47,070
and you'll see where it gets used

71
00:02:47,070 --> 00:02:49,050
when we start writing the middleware.

72
00:02:49,050 --> 00:02:50,940
But for right now, just understand that

73
00:02:50,940 --> 00:02:53,580
if a middleware does not want to really mess

74
00:02:53,580 --> 00:02:54,750
with a action at all

75
00:02:54,750 --> 00:02:56,220
or it just wants to send it on

76
00:02:56,220 --> 00:02:58,110
to the next middleware in the chain,

77
00:02:58,110 --> 00:03:01,773
it will use in some fashion this next keyword.

78
00:03:03,510 --> 00:03:05,010
So we're gonna say that middleware number one

79
00:03:05,010 --> 00:03:06,240
doesn't care about the middleware,

80
00:03:06,240 --> 00:03:07,950
or excuse me, doesn't care about the action.

81
00:03:07,950 --> 00:03:09,900
And so it's gonna send it on to the next middleware

82
00:03:09,900 --> 00:03:11,223
in the chain number two.

83
00:03:12,150 --> 00:03:13,807
Middleware number two now might say,

84
00:03:13,807 --> 00:03:16,950
"Okay, this action, I care about this one.

85
00:03:16,950 --> 00:03:18,960
I'm gonna look at the actions type,

86
00:03:18,960 --> 00:03:20,670
yes, I care about that type.

87
00:03:20,670 --> 00:03:21,900
I'm gonna console log it

88
00:03:21,900 --> 00:03:24,390
and I'm gonna forward it on to the next middleware."

89
00:03:24,390 --> 00:03:25,950
So this would be an example of a middleware

90
00:03:25,950 --> 00:03:28,260
where perhaps it cares about the actions

91
00:03:28,260 --> 00:03:30,480
that are coming across and wants to do something with them

92
00:03:30,480 --> 00:03:32,970
and wants to console log it in this case,

93
00:03:32,970 --> 00:03:34,740
very straightforward, very simple action.

94
00:03:34,740 --> 00:03:37,440
But nonetheless, it does do something with the action.

95
00:03:38,400 --> 00:03:40,710
After middleware number two has had its fill.

96
00:03:40,710 --> 00:03:42,750
It'll say, "Okay, I'm done with this action,

97
00:03:42,750 --> 00:03:44,670
I've done what I need to do,"

98
00:03:44,670 --> 00:03:48,060
and it will forward it on via the next keyword

99
00:03:48,060 --> 00:03:49,950
to middleware number three.

100
00:03:49,950 --> 00:03:51,120
Middleware number three now

101
00:03:51,120 --> 00:03:53,400
is the last middleware in the chain,

102
00:03:53,400 --> 00:03:56,520
and so if middleware three says, "Oh, you know what?

103
00:03:56,520 --> 00:03:58,362
I don't care about this one either,

104
00:03:58,362 --> 00:04:00,960
my job is something else."

105
00:04:00,960 --> 00:04:02,130
When middleware number three

106
00:04:02,130 --> 00:04:04,087
is done with the action and it says,

107
00:04:04,087 --> 00:04:07,050
"Okay, send this action onto the next middleware."

108
00:04:07,050 --> 00:04:09,840
If there are no other middlewares in the chain,

109
00:04:09,840 --> 00:04:12,060
the action will then automatically be forwarded

110
00:04:12,060 --> 00:04:13,773
onto our reducers.

111
00:04:14,730 --> 00:04:15,930
So the whole point of all this,

112
00:04:15,930 --> 00:04:18,060
what I really want to impress upon you

113
00:04:18,060 --> 00:04:19,601
or what I wanna pass along is,

114
00:04:19,601 --> 00:04:22,290
if an action doesn't care about a middleware

115
00:04:22,290 --> 00:04:25,650
or if it just wants to send it along its path

116
00:04:25,650 --> 00:04:28,380
onto the next middleware

117
00:04:28,380 --> 00:04:31,890
or eventually, the reducers at the end,

118
00:04:31,890 --> 00:04:35,073
we're going to use this next construct right here.

119
00:04:35,910 --> 00:04:39,960
So with this idea of actions, middleware and next,

120
00:04:39,960 --> 00:04:42,120
let's take a shot at our first middleware

121
00:04:42,120 --> 00:04:43,203
in the next section.