1
00:00:01,124 --> 00:00:01,956
-: In the last section, we wrote

2
00:00:01,956 --> 00:00:03,810
out the first step of our middleware.

3
00:00:03,810 --> 00:00:06,270
If our action does not have a payload property

4
00:00:06,270 --> 00:00:08,676
or if the payload property is not a promise

5
00:00:08,676 --> 00:00:10,320
then we just take the action

6
00:00:10,320 --> 00:00:12,720
and forward it onto the next middleware of our chain.

7
00:00:12,720 --> 00:00:16,320
So we don't care about it, just send it on not our deal.

8
00:00:16,320 --> 00:00:17,430
We're now gonna continue

9
00:00:17,430 --> 00:00:20,400
into handling the case in which there is a promise.

10
00:00:20,400 --> 00:00:23,940
So if we, there is a promise, we want to wait

11
00:00:23,940 --> 00:00:28,390
for the promise to resolve or get its data

12
00:00:29,700 --> 00:00:34,050
and then create a new action

13
00:00:34,050 --> 00:00:34,883
with that

14
00:00:36,120 --> 00:00:37,440
data

15
00:00:37,440 --> 00:00:38,913
and dispatch it.

16
00:00:40,050 --> 00:00:42,660
So if we do have a promise, we're gonna wait

17
00:00:42,660 --> 00:00:45,240
for it to resolve or wait for the response to come back

18
00:00:45,240 --> 00:00:47,880
from that API that we're trying to reach out to.

19
00:00:47,880 --> 00:00:49,920
We'll then create our new action

20
00:00:49,920 --> 00:00:51,540
with the data that we got back

21
00:00:51,540 --> 00:00:54,510
and we're going to dispatch that action.

22
00:00:54,510 --> 00:00:57,090
Now, I've been using this term dispatch quite a bit.

23
00:00:57,090 --> 00:00:58,470
I'm using dispatch right here.

24
00:00:58,470 --> 00:01:00,270
And you'll recall that dispatch was one

25
00:01:00,270 --> 00:01:02,204
of the properties that we pulled

26
00:01:02,204 --> 00:01:05,310
off the first argument to the function up here at the top.

27
00:01:05,310 --> 00:01:06,750
Let's have a very quick discussion

28
00:01:06,750 --> 00:01:09,616
of what this dispatch thing is and what it's doing for us.

29
00:01:09,616 --> 00:01:11,850
So I'm gonna flip over to a diagram.

30
00:01:11,850 --> 00:01:13,560
It's very similar to one we looked at before

31
00:01:13,560 --> 00:01:15,410
but I made a couple of changes to it.

32
00:01:16,620 --> 00:01:18,060
So up here is our action

33
00:01:18,060 --> 00:01:21,210
and I'm showing the action going into this dispatch thing.

34
00:01:21,210 --> 00:01:22,530
We'll come back to that in just a second.

35
00:01:22,530 --> 00:01:23,841
But before we do

36
00:01:23,841 --> 00:01:25,350
notice how when something is

37
00:01:25,350 --> 00:01:28,380
passed to dispatch, like the action

38
00:01:28,380 --> 00:01:31,500
it gets forwarded onto middleware number one right here.

39
00:01:31,500 --> 00:01:32,910
And then we've got that next function

40
00:01:32,910 --> 00:01:36,060
which is a reference to the next middleware on our chain

41
00:01:36,060 --> 00:01:38,670
and that's reference to the next middleware on our chain

42
00:01:38,670 --> 00:01:40,140
which in this case would be the reducers

43
00:01:40,140 --> 00:01:42,420
cuz there's no other middleware.

44
00:01:42,420 --> 00:01:44,940
So the dispatch function right here is what actually

45
00:01:44,940 --> 00:01:46,881
starts this entire process.

46
00:01:46,881 --> 00:01:49,486
The dispatch function takes an action

47
00:01:49,486 --> 00:01:52,830
it calls all the middleware with that thing, and then

48
00:01:52,830 --> 00:01:55,230
it eventually makes sure that the action ends up

49
00:01:55,230 --> 00:01:57,210
at all the reducers.

50
00:01:57,210 --> 00:01:59,070
So you can think of this dispatch thing right here

51
00:01:59,070 --> 00:02:02,700
as being the really main central focal point

52
00:02:02,700 --> 00:02:05,340
of everything that really goes on behind the scenes

53
00:02:05,340 --> 00:02:06,780
with redux.

54
00:02:06,780 --> 00:02:10,139
Any time that you've been calling an action creator already

55
00:02:10,139 --> 00:02:14,710
your actions have been taken, passed to this dispatch

56
00:02:14,710 --> 00:02:17,820
function and then sent to all the different middleware

57
00:02:17,820 --> 00:02:20,430
and reducers inside of your redux store.

58
00:02:20,430 --> 00:02:24,000
So again, the dispatch function right here takes an action

59
00:02:24,000 --> 00:02:26,670
and it kicks off this entire process of middleware

60
00:02:26,670 --> 00:02:28,923
reducers, all that kind of good stuff.

61
00:02:30,000 --> 00:02:33,540
So when we say back over here that we want to

62
00:02:33,540 --> 00:02:37,530
create a new action with that data and dispatch that action

63
00:02:37,530 --> 00:02:39,660
that's essentially saying that we want to create a new

64
00:02:39,660 --> 00:02:43,110
action and send it through this entire chain of middleware

65
00:02:43,110 --> 00:02:45,330
and the reducers all over again.

66
00:02:45,330 --> 00:02:47,610
That's the purpose of dispatch.

67
00:02:47,610 --> 00:02:50,430
So with that in mind, let's now start writing out our code

68
00:02:50,430 --> 00:02:51,730
for this block right here.

69
00:02:53,040 --> 00:02:55,140
So in order to wait for the promise to

70
00:02:55,140 --> 00:02:58,860
resolve, we're going to chain onto the promise

71
00:02:58,860 --> 00:03:00,903
with a dot then statement.

72
00:03:02,469 --> 00:03:04,380
So at this point, if we get down here and we've passed

73
00:03:04,380 --> 00:03:07,050
over the if statement, that means that down here there is

74
00:03:07,050 --> 00:03:10,020
in fact a promise on our payload property.

75
00:03:10,020 --> 00:03:12,150
So you and I can hook into that promise

76
00:03:12,150 --> 00:03:15,540
by writing out action dot payload dot then

77
00:03:15,540 --> 00:03:17,590
and then passing a function

78
00:03:18,510 --> 00:03:20,010
to dot then.

79
00:03:20,010 --> 00:03:21,420
So this is how we normally interact

80
00:03:21,420 --> 00:03:24,690
with the promises in like the normal case anyways

81
00:03:24,690 --> 00:03:28,170
we can chain on a dot, then statement and add on a function.

82
00:03:28,170 --> 00:03:30,090
And this function will be called whenever

83
00:03:30,090 --> 00:03:31,140
the promise resolves.

84
00:03:31,140 --> 00:03:32,340
Or in other words, get some data

85
00:03:32,340 --> 00:03:34,113
get some data back from our API.

86
00:03:34,980 --> 00:03:36,660
The function itself will be called

87
00:03:36,660 --> 00:03:39,960
with whatever data was returned from that API.

88
00:03:39,960 --> 00:03:43,203
And so we'll call that argument the response object.

89
00:03:45,300 --> 00:03:47,400
So now inside the function right here

90
00:03:47,400 --> 00:03:49,500
we're going to create a new action

91
00:03:49,500 --> 00:03:53,160
with that data and the same type that it had previously.

92
00:03:53,160 --> 00:03:54,663
And then dispatch the action.

93
00:03:55,830 --> 00:03:58,761
So I'm going to make a new variable called new action.

94
00:03:58,761 --> 00:04:01,963
We're gonna take all of the properties

95
00:04:01,963 --> 00:04:06,360
out of the action object that got passed to this middleware

96
00:04:06,360 --> 00:04:08,610
so all the properties are inside of it.

97
00:04:08,610 --> 00:04:10,847
Now, normally whenever we create an action

98
00:04:10,847 --> 00:04:13,770
it's only gonna have a tight property and a payload

99
00:04:13,770 --> 00:04:15,570
but we want to write our middleware right here

100
00:04:15,570 --> 00:04:17,519
to accommodate for any number

101
00:04:17,519 --> 00:04:19,860
of additional properties being added to it as well.

102
00:04:19,860 --> 00:04:22,350
So that's why we're doing the dot, dot dot right here.

103
00:04:22,350 --> 00:04:23,183
We're saying, okay

104
00:04:23,183 --> 00:04:25,530
just take whatever properties this thing has

105
00:04:25,530 --> 00:04:29,730
grab 'EM all and throw them onto this new action object.

106
00:04:29,730 --> 00:04:31,320
And then on top of that

107
00:04:31,320 --> 00:04:35,070
we're gonna add on a new payload of the response.

108
00:04:35,070 --> 00:04:37,530
So this right here, this is the magic.

109
00:04:37,530 --> 00:04:39,711
This is where we wait to get that response back

110
00:04:39,711 --> 00:04:41,010
from that API

111
00:04:41,010 --> 00:04:43,500
or whatever asynchronous request just occurred.

112
00:04:43,500 --> 00:04:45,800
And then we override the payload

113
00:04:45,800 --> 00:04:48,123
with whatever data came back.

114
00:04:50,370 --> 00:04:54,900
And then after that, we're going to dispatch the new action.

115
00:04:54,900 --> 00:04:56,640
So dispatch new action right here is what's going to

116
00:04:56,640 --> 00:04:58,527
take that action and send it

117
00:04:58,527 --> 00:05:01,740
through the entire process of all of our middleware again.

118
00:05:01,740 --> 00:05:04,470
So it's essentially this arrow right here.

119
00:05:04,470 --> 00:05:05,910
So it's gonna take that action

120
00:05:05,910 --> 00:05:07,800
send it through all the different middleware we have

121
00:05:07,800 --> 00:05:10,410
in our application, and that again is what's gonna make sure

122
00:05:10,410 --> 00:05:12,450
that we don't have to organize our middleware

123
00:05:12,450 --> 00:05:13,980
in some certain order.

124
00:05:13,980 --> 00:05:15,570
It's gonna make sure that no matter what

125
00:05:15,570 --> 00:05:17,130
every middleware is always gonna see

126
00:05:17,130 --> 00:05:20,193
that action that has our data tied to it.

127
00:05:21,330 --> 00:05:22,560
So now that action is gonna flow

128
00:05:22,560 --> 00:05:24,480
through our sync middleware again

129
00:05:24,480 --> 00:05:27,480
but this time there is no promise tied to it because

130
00:05:27,480 --> 00:05:29,493
the Payload property now has the response data instead.

131
00:05:29,493 --> 00:05:33,000
So it's gonna flow into the no case right here

132
00:05:33,000 --> 00:05:35,133
and it's gonna flow on to our reducers.

133
00:05:36,030 --> 00:05:39,865
All right, so that is it for the middleware itself

134
00:05:39,865 --> 00:05:41,910
but you still might be really curious

135
00:05:41,910 --> 00:05:43,260
about what's going on here.

136
00:05:44,218 --> 00:05:45,480
So let's take a quick pause in the next section.

137
00:05:45,480 --> 00:05:47,190
We're gonna wire this up to our application

138
00:05:47,190 --> 00:05:48,030
and then we're gonna do a lot

139
00:05:48,030 --> 00:05:51,300
of debugging to watch this entire series of actions

140
00:05:51,300 --> 00:05:54,450
and operations occur as we call that fetch comments.

141
00:05:54,450 --> 00:05:55,283
Action creator.

142
00:05:55,283 --> 00:05:57,603
So quick break and I'll see you in just a minute.