1
00:00:00,630 --> 00:00:01,463
Instructor: In the last section,

2
00:00:01,463 --> 00:00:03,240
we outlined some of the difficulties

3
00:00:03,240 --> 00:00:05,670
of this signin action creator that we made

4
00:00:05,670 --> 00:00:08,100
and the big difficulty was that we've been used

5
00:00:08,100 --> 00:00:09,420
to using redux-promise,

6
00:00:09,420 --> 00:00:11,130
which has a very linear flow.

7
00:00:11,130 --> 00:00:14,520
We made a request, we returned it on the action,

8
00:00:14,520 --> 00:00:17,850
everything ended up good by the time it got to the reducer.

9
00:00:17,850 --> 00:00:21,420
But this time around, we've got wildly branching behavior

10
00:00:21,420 --> 00:00:24,900
and in one case of that behavior,

11
00:00:24,900 --> 00:00:27,630
we wanna do three different things here.

12
00:00:27,630 --> 00:00:30,090
So redux-promise is probably not going

13
00:00:30,090 --> 00:00:33,120
to be the solution we want this time around.

14
00:00:33,120 --> 00:00:35,490
Instead, we're going to use a different library

15
00:00:35,490 --> 00:00:38,370
for helping us achieve this behavior right here

16
00:00:38,370 --> 00:00:41,100
called Redux Thunk.

17
00:00:41,100 --> 00:00:43,800
So Redux Thunk is a just crazy town name

18
00:00:43,800 --> 00:00:46,230
for this library but I assure you,

19
00:00:46,230 --> 00:00:49,410
Thunk is an actual term, believe it or not.

20
00:00:49,410 --> 00:00:50,700
Anyways, totally unrelated.

21
00:00:50,700 --> 00:00:51,533
Let's talk a little bit

22
00:00:51,533 --> 00:00:55,080
about exactly what Redux Thunk is going to do for us.

23
00:00:55,080 --> 00:00:56,880
So before we talk about that exactly though,

24
00:00:56,880 --> 00:00:58,200
I wanna do a quick review

25
00:00:58,200 --> 00:01:00,330
on what an action creator really does

26
00:01:00,330 --> 00:01:02,643
inside of the Redux pipeline.

27
00:01:04,050 --> 00:01:06,750
So in this diagram, at the very top left,

28
00:01:06,750 --> 00:01:08,490
we have an action creator.

29
00:01:08,490 --> 00:01:10,380
Whenever we call that action creator,

30
00:01:10,380 --> 00:01:12,690
it returns an action, right?

31
00:01:12,690 --> 00:01:15,240
Simple enough, that's all the different action creators

32
00:01:15,240 --> 00:01:16,860
we've made so far.

33
00:01:16,860 --> 00:01:18,270
That action creator,

34
00:01:18,270 --> 00:01:20,000
what's kind of happening behind the scenes

35
00:01:20,000 --> 00:01:22,680
is that action is getting piped

36
00:01:22,680 --> 00:01:25,860
into this big funnel-looking thing right here

37
00:01:25,860 --> 00:01:28,143
that we call the dispatch method.

38
00:01:28,980 --> 00:01:33,090
The dispatch method is what takes the action,

39
00:01:33,090 --> 00:01:35,670
pipes the action through all of our different middleware,

40
00:01:35,670 --> 00:01:37,290
and then eventually sends it on

41
00:01:37,290 --> 00:01:39,360
to all of our different reducers.

42
00:01:39,360 --> 00:01:42,510
So this dispatch object right here takes an action,

43
00:01:42,510 --> 00:01:44,310
sends it through middlewares

44
00:01:44,310 --> 00:01:46,980
and eventually throws it off to the reducers.

45
00:01:46,980 --> 00:01:49,170
So you can really think of the dispatch really

46
00:01:49,170 --> 00:01:50,850
as it's pictured in this diagram right here.

47
00:01:50,850 --> 00:01:52,620
It's a big funnel of sorts.

48
00:01:52,620 --> 00:01:54,630
If we just throw an action into it,

49
00:01:54,630 --> 00:01:57,870
it ends up exactly where it needs to be.

50
00:01:57,870 --> 00:01:59,550
So this dispatch thing right here

51
00:01:59,550 --> 00:02:02,340
is one of the very core aspects

52
00:02:02,340 --> 00:02:05,370
or pieces of functionality inside of Redux.

53
00:02:05,370 --> 00:02:07,320
Now, we have, for the most part,

54
00:02:07,320 --> 00:02:10,380
avoided any big discussion about dispatch

55
00:02:10,380 --> 00:02:14,010
just because well, let me hold that.

56
00:02:14,010 --> 00:02:14,843
Let me hold onto that.

57
00:02:14,843 --> 00:02:16,050
Let's put a feather in that topic

58
00:02:16,050 --> 00:02:18,990
and we'll come back to exactly why we've avoided talking

59
00:02:18,990 --> 00:02:21,030
about dispatch for a good amount

60
00:02:21,030 --> 00:02:22,590
for all the material we've covered.

61
00:02:22,590 --> 00:02:23,760
But there is a very good reason.

62
00:02:23,760 --> 00:02:24,860
We'll come back to it.

63
00:02:26,610 --> 00:02:30,480
The purpose of Redux Thunk is to give you direct access

64
00:02:30,480 --> 00:02:32,190
to this dispatch method right here.

65
00:02:32,190 --> 00:02:34,410
So it's an actual function

66
00:02:34,410 --> 00:02:36,270
and all Redux Thunk does

67
00:02:36,270 --> 00:02:40,170
is give you very direct access to this dispatch.

68
00:02:40,170 --> 00:02:41,310
Okay?

69
00:02:41,310 --> 00:02:43,440
That's really hard to kind of describe

70
00:02:43,440 --> 00:02:44,460
what it does with words

71
00:02:44,460 --> 00:02:45,960
and so this is definitely one of those times

72
00:02:45,960 --> 00:02:48,540
where the best way to approach it is

73
00:02:48,540 --> 00:02:50,541
to just go through an example.

74
00:02:50,541 --> 00:02:53,250
So we're going to make use of Redux Thunk.

75
00:02:53,250 --> 00:02:54,810
Redux Thunk is a middleware

76
00:02:54,810 --> 00:02:56,520
and it's a middleware that we have to install

77
00:02:56,520 --> 00:02:58,170
as a separate module.

78
00:02:58,170 --> 00:02:59,580
So over in our terminal,

79
00:02:59,580 --> 00:03:02,760
I'm going to end our existing server

80
00:03:02,760 --> 00:03:06,663
and then install redux-thunk.

81
00:03:13,920 --> 00:03:15,150
And then once it's installed,

82
00:03:15,150 --> 00:03:19,143
I'm gonna start the server back up with npm run start.

83
00:03:22,740 --> 00:03:23,880
Now, like all middleware,

84
00:03:23,880 --> 00:03:26,400
before we can make use of it inside of our application,

85
00:03:26,400 --> 00:03:29,670
we have to add it as a distinct middleware

86
00:03:29,670 --> 00:03:31,680
when we create our store.

87
00:03:31,680 --> 00:03:34,530
So back in our top-level index.js file,

88
00:03:34,530 --> 00:03:38,010
this is src, index.js,

89
00:03:38,010 --> 00:03:41,733
we will import the library that we just installed.

90
00:03:42,960 --> 00:03:44,170
We are going to import

91
00:03:45,899 --> 00:03:49,830
reduxThunk from redux-thunk.

92
00:03:49,830 --> 00:03:53,670
And then we will add this to our applyMiddleware chain.

93
00:03:53,670 --> 00:03:57,990
So I'll just say reduxThunk like so.

94
00:03:57,990 --> 00:03:59,190
Okay?

95
00:03:59,190 --> 00:04:01,317
So again, reduxThink is a middleware.

96
00:04:01,317 --> 00:04:03,990
But that doesn't really help us understand

97
00:04:03,990 --> 00:04:04,920
what it does, right?

98
00:04:04,920 --> 00:04:06,770
It doesn't really help us out at all.

99
00:04:07,950 --> 00:04:10,470
So back inside of our actions, index file,

100
00:04:10,470 --> 00:04:14,190
we've still got the signinUser action creator here.

101
00:04:14,190 --> 00:04:16,170
This right here inside of our action creator

102
00:04:16,170 --> 00:04:18,839
is where we make use of Redux Thunk.

103
00:04:18,839 --> 00:04:21,209
So remember one of those very important rules

104
00:04:21,209 --> 00:04:24,393
that I've repeated many, many times over and over again:

105
00:04:25,260 --> 00:04:29,460
an action creator always returns an object.

106
00:04:29,460 --> 00:04:31,530
The object is what we call an action

107
00:04:31,530 --> 00:04:32,760
and the action has a type

108
00:04:32,760 --> 00:04:35,730
and I've just repeated that nonstop all the time,

109
00:04:35,730 --> 00:04:37,050
all the time.

110
00:04:37,050 --> 00:04:39,930
So that's where that rule kind of goes out the window,

111
00:04:39,930 --> 00:04:43,500
and today because we installed Redux Thunk,

112
00:04:43,500 --> 00:04:45,510
another valid return value

113
00:04:45,510 --> 00:04:48,780
from our action creators is a function.

114
00:04:48,780 --> 00:04:50,160
So let's put the code down for that

115
00:04:50,160 --> 00:04:52,290
and we'll talk about exactly what's going on.

116
00:04:52,290 --> 00:04:55,200
Instead of returning an object out of here,

117
00:04:55,200 --> 00:04:57,840
we're going to return a function.

118
00:04:57,840 --> 00:05:00,993
So I'm just gonna return a function like so.

119
00:05:04,290 --> 00:05:06,840
So already, kind of looking kind of weird.

120
00:05:06,840 --> 00:05:08,610
We have not returned any functions

121
00:05:08,610 --> 00:05:09,690
from action creators before.

122
00:05:09,690 --> 00:05:12,030
We've always returned objects.

123
00:05:12,030 --> 00:05:14,700
So what is the purpose of returning a function?

124
00:05:14,700 --> 00:05:17,820
Well, this function is how we get direct access

125
00:05:17,820 --> 00:05:21,330
to that dispatch method that we just saw in that diagram.

126
00:05:21,330 --> 00:05:23,280
I think I just closed it unfortunately.

127
00:05:26,190 --> 00:05:27,023
There it is.

128
00:05:28,080 --> 00:05:29,190
By using Redux Thunk,

129
00:05:29,190 --> 00:05:31,740
again we get direct access to this dispatch,

130
00:05:31,740 --> 00:05:33,840
which is kind of the all-powerful function

131
00:05:33,840 --> 00:05:36,240
where if we just throw an action into it,

132
00:05:36,240 --> 00:05:38,430
poof, it's gonna magically get forwarded on

133
00:05:38,430 --> 00:05:40,293
to all of our different reducers.

134
00:05:41,310 --> 00:05:43,110
So here's how Redux Thunk works.

135
00:05:43,110 --> 00:05:46,500
We return a function from our action creator,

136
00:05:46,500 --> 00:05:47,610
and the first argument

137
00:05:47,610 --> 00:05:50,430
to the function is the dispatch method.

138
00:05:50,430 --> 00:05:53,640
That's it. That's pretty much all it does.

139
00:05:53,640 --> 00:05:56,280
It's pretty much all Redux Thunk does.

140
00:05:56,280 --> 00:05:57,900
Now inside of this function,

141
00:05:57,900 --> 00:06:00,690
we can make any type of asynchronous request

142
00:06:00,690 --> 00:06:03,030
or action or anything like that

143
00:06:03,030 --> 00:06:04,980
and at some point in the future basically,

144
00:06:04,980 --> 00:06:07,740
like at any point in time that we want,

145
00:06:07,740 --> 00:06:10,440
we can call the dispatch method,

146
00:06:10,440 --> 00:06:14,610
and we could pass in an action of like blah, blah, blah,

147
00:06:14,610 --> 00:06:15,963
whatever type we want.

148
00:06:16,800 --> 00:06:18,600
So all Redux Thunk is doing

149
00:06:18,600 --> 00:06:22,530
is giving us arbitrary access to this dispatch function,

150
00:06:22,530 --> 00:06:25,980
allowing us to dispatch our own actions at any point

151
00:06:25,980 --> 00:06:27,660
in time that we want.

152
00:06:27,660 --> 00:06:29,670
So inside of this inner function here,

153
00:06:29,670 --> 00:06:32,070
we can place a ton of logic.

154
00:06:32,070 --> 00:06:33,990
All the logic that we need to place right here.

155
00:06:33,990 --> 00:06:36,090
All the stuff where we submit our email

156
00:06:36,090 --> 00:06:37,560
and password to the server,

157
00:06:37,560 --> 00:06:39,720
where we figure out whether or not the request is good,

158
00:06:39,720 --> 00:06:41,100
whether or not it's bad.

159
00:06:41,100 --> 00:06:42,720
All of that logic we can stick

160
00:06:42,720 --> 00:06:45,120
inside of this function right here.

161
00:06:45,120 --> 00:06:47,670
So I'm gonna move all these comments,

162
00:06:47,670 --> 00:06:49,800
all this kind of planned activity

163
00:06:49,800 --> 00:06:52,250
that we wanna do inside this function right here.

164
00:06:53,490 --> 00:06:54,323
And that's pretty much it.

165
00:06:54,323 --> 00:06:56,250
That's all Redux Thunk is doing for us.

166
00:06:56,250 --> 00:06:58,950
It is allowing us to return a function

167
00:06:58,950 --> 00:07:00,690
and it's going to recall that function

168
00:07:00,690 --> 00:07:02,013
with the dispatch method.

169
00:07:03,030 --> 00:07:04,560
So let's continue in the next section

170
00:07:04,560 --> 00:07:06,840
where we will start wiring up the request

171
00:07:06,840 --> 00:07:09,300
to submit the email and password to our server.

172
00:07:09,300 --> 00:07:10,250
I'll see you there.