1
00:00:00,900 --> 00:00:02,410
Welcome back.

2
00:00:02,420 --> 00:00:10,380
There's one final piece of the puzzle that we need with redux and something that we've been avoiding

3
00:00:10,710 --> 00:00:12,600
up until this point.

4
00:00:12,750 --> 00:00:15,620
You see if we go to App.js

5
00:00:16,129 --> 00:00:21,840
You remember that we do this componentDidMount fetch request.

6
00:00:22,000 --> 00:00:23,890
We have an asynchronous request.

7
00:00:23,890 --> 00:00:34,690
We're making a request to an API grabbing their users and then finally setting that state to robots.

8
00:00:34,730 --> 00:00:39,890
But how would that work in redux.

9
00:00:39,970 --> 00:00:49,070
Because remember up until this point everything we've done has been synchronous because if we do the

10
00:00:49,070 --> 00:00:57,850
same thing like we did with the search field it wouldn't work with fetching robots, because we're sending

11
00:00:57,850 --> 00:01:05,860
an action of let's say fetching robots, but because that's asynchronous it's going to go off in another

12
00:01:05,860 --> 00:01:07,810
world into the API.

13
00:01:08,700 --> 00:01:17,720
And try and get the robots. In the meantime, the reducer is just going to check the robots and say there's

14
00:01:17,730 --> 00:01:22,880
no robots yet because they are in API-land (and the request/action)  hasn't returned yet.

15
00:01:22,890 --> 00:01:24,050
Just like a promise.

16
00:01:24,090 --> 00:01:29,070
So the reducer keeps going and doesn't make any changes because the state hasn't changed.

17
00:01:29,100 --> 00:01:36,690
So how can we create actions that are asynchronous, that still go through the reducer the store and then

18
00:01:36,690 --> 00:01:37,860
make changes.

19
00:01:39,640 --> 00:01:44,180
And this is where we use, apply middleware again.

20
00:01:45,500 --> 00:01:54,400
We can use something called redux-thunk to handle asynchronous actions like AJAX calls.

21
00:01:54,560 --> 00:02:04,170
It's a middleware that provides a get state and dispatch functions that are passed on. You're able to

22
00:02:04,170 --> 00:02:08,840
handle something called side effects like AJAX calls

23
00:02:09,000 --> 00:02:10,440
with this package.

24
00:02:10,440 --> 00:02:12,020
So we're going to show you how that works.

25
00:02:13,520 --> 00:02:18,050
First thing we want to do is install the package redux-thunk.

26
00:02:18,130 --> 00:02:22,690
So I'm going to say NPM install redux-thunk.

27
00:02:22,940 --> 00:02:29,380
And by the way just like with anything there's tons of other ways to handle asynchronous action in

28
00:02:29,400 --> 00:02:34,190
redux. It's just not built-in out of the gate so you need some packages.

29
00:02:34,190 --> 00:02:42,450
There's other options but redux-thunk is the best and simplest to start off with.

30
00:02:45,140 --> 00:02:45,820
All right.

31
00:02:45,980 --> 00:02:52,320
We have a redux-thunk now and we can simply start using it by going to index.js

32
00:02:52,390 --> 00:03:07,230
and within here we can say that we want to import something called a thunkMiddleware from redux-thunk.

33
00:03:07,760 --> 00:03:13,920
Again you can read all about this, and there are documentation on Github. Thunk middleware,

34
00:03:13,970 --> 00:03:18,780
we already know how to apply middleware to our redux app, right.

35
00:03:18,800 --> 00:03:23,330
We have our applyMiddleware function.

36
00:03:23,510 --> 00:03:31,480
We can simply add the applied or - not the applied - the thunkMiddleware.

37
00:03:31,690 --> 00:03:35,200
And let me just put this on a new line so you can see it better.

38
00:03:36,000 --> 00:03:40,500
thunkMiddleware to our applyMiddleware.

39
00:03:40,500 --> 00:03:41,360
And this is ordered,

40
00:03:41,370 --> 00:03:48,630
so it's going to go through the thunkMiddleware and then the logger middleware. Perfect.

41
00:03:48,840 --> 00:03:54,980
So let's run NPM start.

42
00:03:55,250 --> 00:04:00,820
And I'm also going to save this, all right looks like everything is running smoothly.

43
00:04:02,330 --> 00:04:05,280
We have this middleware implemented now.

44
00:04:05,840 --> 00:04:11,850
But how do we actually use it? Well let's start with the very first steps.

45
00:04:11,970 --> 00:04:21,310
The first thing we want to do is create a constant so a constant for requesting our robots.

46
00:04:21,450 --> 00:04:28,160
Remember in the app.js file we have this robots array that gets populated after componentDidMount

47
00:04:28,160 --> 00:04:34,980
with, after we do the fetch call and we setState with the new users.

48
00:04:35,040 --> 00:04:39,460
So in the constant we can do something similar to above.

49
00:04:39,470 --> 00:04:49,990
We can export const REQUEST_ROBOTS. Now,

50
00:04:50,840 --> 00:04:53,780
because this is going to be a promise.

51
00:04:53,900 --> 00:04:58,030
It's going to have three states.

52
00:04:58,190 --> 00:05:06,490
So the first one is going to be PENDING which is the very first time that we send that request it's

53
00:05:06,490 --> 00:05:09,470
going to be pending we're waiting for the promise to return.

54
00:05:09,790 --> 00:05:22,130
So we'll again use the same string here, and we're also going to have two states after the pending

55
00:05:22,340 --> 00:05:25,150
returns which is SUCCESS

56
00:05:30,250 --> 00:05:31,240
and also FAILED.

57
00:05:39,690 --> 00:05:45,860
This request has three actions: pending, success, failed.

58
00:05:45,930 --> 00:05:47,250
That we want to keep track of.

59
00:05:47,730 --> 00:05:53,280
And again this is pretty much standard with all asynchronous actions like AJAX calls.

60
00:05:53,520 --> 00:06:01,670
So let's save that, and the next step as we know is to create the actions using these things.

61
00:06:01,710 --> 00:06:10,080
So let's go back to actions and this time instead of just importing CHANGE_SEARCH_FIELD let's import

62
00:06:10,080 --> 00:06:11,260
a few more things.

63
00:06:17,720 --> 00:06:22,770
I'm going to import, let's just copy and paste here because that's a lot of typing.

64
00:06:23,030 --> 00:06:27,920
Let's go to Constants.

65
00:06:28,180 --> 00:06:29,590
We're going to import pending

66
00:06:32,400 --> 00:06:38,150
success and then finally failed.

67
00:06:42,720 --> 00:06:45,140
let's save.

68
00:06:45,380 --> 00:06:48,320
And when you get a warning that we're not being - we're not using them.

69
00:06:48,590 --> 00:06:57,790
So let's create these actions now just like we did above we're going to export const and we'll name

70
00:06:57,790 --> 00:07:06,340
this requestRobots and this action takes.

71
00:07:06,380 --> 00:07:08,830
Hmm what's it going to take.

72
00:07:08,830 --> 00:07:17,810
Well this is a little tricky but it's going to take the dispatch. And dispatch,

73
00:07:17,840 --> 00:07:20,650
If you remember, and we go to App.js,

74
00:07:20,720 --> 00:07:30,580
is something that we use in mapDispatchToProps that we get from redux to dispatch the actions to

75
00:07:30,670 --> 00:07:32,150
the reducer.

76
00:07:32,380 --> 00:07:39,100
And when we come back here, you'll see that we're going to actually pass this to our action.

77
00:07:39,100 --> 00:07:40,780
So we have access to it.

78
00:07:40,960 --> 00:07:50,030
But again for now just know that we're going to have dispatch, and within here we're going to do a

79
00:07:50,030 --> 00:07:53,540
few things that's a little bit different than the above.

80
00:07:53,540 --> 00:08:03,820
The very first thing when we request robots Well we want to dispatch the pending action so again we

81
00:08:03,820 --> 00:08:12,430
can just do the standard syntax of dispatching an object that is of type request robot's pending

82
00:08:15,020 --> 00:08:16,700
and the payload.

83
00:08:17,060 --> 00:08:19,390
Well there's no real payload.

84
00:08:19,460 --> 00:08:26,780
We just have a request pending, so we can just leave it the way it is right now without a payload.

85
00:08:28,340 --> 00:08:35,220
Next we have something that is asynchronous.

86
00:08:35,220 --> 00:08:38,230
We need to do a fetch call.

87
00:08:38,340 --> 00:08:41,710
So we have our fetch function.

88
00:08:42,059 --> 00:08:44,690
And if you remember we go to App.js

89
00:08:44,730 --> 00:08:52,650
We have this API that we need to call, but you also need to do the response response.json all over

90
00:08:52,650 --> 00:08:52,950
again.

91
00:08:52,950 --> 00:09:02,580
So I'm just going to copy all of that, go to actions and just copy and paste this.

92
00:09:02,830 --> 00:09:12,600
So we're fetching the users we're doing the .then and json, using that json method on the response.

93
00:09:12,600 --> 00:09:17,750
And then finally in here we have two options.

94
00:09:17,880 --> 00:09:23,920
We have the .then and .catch in case there's an error or something fails.

95
00:09:25,060 --> 00:09:30,800
In the .then we receive some sort of data which will be users.

96
00:09:31,300 --> 00:09:38,530
And once we've received that we can say dispatch, we're going to dispatch. What do you think we're going

97
00:09:38,530 --> 00:09:40,050
to dispatch.

98
00:09:40,060 --> 00:09:47,870
Well the object that is of type REQUEST_ROBOTS_SUCCESS

99
00:09:50,660 --> 00:09:53,360
and this time the payload for this is going to be

100
00:09:56,160 --> 00:10:04,310
the data that we receive from the API and with the catch very similar.

101
00:10:04,310 --> 00:10:11,120
We'll get some sort of an error and this error is going to once again dispatch

102
00:10:14,800 --> 00:10:19,610
and it will have a type of REQUEST_ROBOTS_FAILED

103
00:10:22,460 --> 00:10:30,500
with a payload of let's give it the error that we receive.

104
00:10:30,500 --> 00:10:30,950
All right.

105
00:10:30,950 --> 00:10:39,260
Let me make this a little smaller so you can see. So we save that, and now we have our actions and this

106
00:10:39,260 --> 00:10:43,220
action is a lot more complicated than the setSearchField.

107
00:10:43,220 --> 00:10:50,240
We have a - right away, when we call this action, a dispatch that REQUEST_ROBOTS_PENDING and then we

108
00:10:50,330 --> 00:10:58,490
fetch the users, we receive the users, and then we either have a success with the payload of the users

109
00:10:59,000 --> 00:11:04,180
or an error with the payload of error.

110
00:11:04,230 --> 00:11:12,480
Finally we go into the reducers and in the reducer we know that we want to import from the constants

111
00:11:12,780 --> 00:11:14,270
the same actions that we had.

112
00:11:14,270 --> 00:11:21,870
So let's just go to Constance or let's go to actions and copy exactly what we have here as well.

113
00:11:24,720 --> 00:11:27,080
Because we're going to need all those constants.

114
00:11:28,020 --> 00:11:35,640
And now down here we're going to create a new reducer because instead of combining all these reducers

115
00:11:35,640 --> 00:11:39,280
we want to make them each specific to their use case.

116
00:11:39,480 --> 00:11:48,490
This reducer worries about search robot, the new reducer is going to worry about the request.

117
00:11:48,630 --> 00:11:57,660
Robots and once again with the same syntax we have state that's going to equal the initial state

118
00:11:58,560 --> 00:12:06,220
and then the action that is going to have default empty object.

119
00:12:06,430 --> 00:12:14,390
And within here an object or within here we'll have once again a switch statement that listens to action.type

120
00:12:14,390 --> 00:12:22,070
and this action.type is going to have three possible states.

121
00:12:22,100 --> 00:12:32,590
One is that case is REQUEST_ROBOTS_PENDING in which case we return object.assign

122
00:12:32,680 --> 00:12:38,080
Again an empty object.

123
00:12:38,180 --> 00:12:39,770
The state.

124
00:12:39,980 --> 00:12:47,000
And then finally we're going to create a new state called isPending.

125
00:12:47,330 --> 00:12:50,240
And this isPending is going to be set to true

126
00:12:53,840 --> 00:13:00,600
because the request robots is pending currently.

127
00:13:00,600 --> 00:13:01,350
All right.

128
00:13:01,680 --> 00:13:08,850
The next thing we're going to do again we're going to have a case for this time.

129
00:13:09,240 --> 00:13:19,130
The success and this is going to return object.assign an empty object a state.

130
00:13:19,600 --> 00:13:34,310
And this new property robots that is action.payload and also we want to change the state isPending

131
00:13:34,700 --> 00:13:36,440
to now be false

132
00:13:39,550 --> 00:13:43,270
because we've gotten the response from the promise

133
00:13:50,350 --> 00:13:56,470
and then the third case is when there's an error.

134
00:13:57,040 --> 00:14:00,670
And in that case we're going to return object.assign

135
00:14:04,180 --> 00:14:16,550
state and we'll just have an error state that we'll create that has the action.payload.

136
00:14:16,690 --> 00:14:23,260
And once again we're going to want to change the isPending to be equal to false

137
00:14:26,050 --> 00:14:34,010
and close the object. And remember always, with a reducer,

138
00:14:34,420 --> 00:14:43,810
We want to have at the very end, always return the state if it doesn't match any of the criteria.

139
00:14:43,810 --> 00:14:49,250
So again return state. Awesome.

140
00:14:49,620 --> 00:14:53,860
Now you might be thinking to yourself initial state.

141
00:14:54,020 --> 00:14:59,990
We have this but REQUEST_ROBOTS doesn't care about searchfield.

142
00:14:59,990 --> 00:15:06,860
And in this case we want to create two different initial states: one for the search robots and one for

143
00:15:06,860 --> 00:15:08,460
the request robots.

144
00:15:08,600 --> 00:15:14,560
So let's rename this to initialStateSearch

145
00:15:17,420 --> 00:15:29,000
and create a new state initialStateRobots that now has these three states that we mentioned here

146
00:15:29,570 --> 00:15:43,360
that is isPending of false to start off with, a robot's array that is currently empty, and an error string

147
00:15:43,570 --> 00:15:45,350
that is also empty.

148
00:15:49,020 --> 00:15:50,010
So let's save that.

149
00:15:52,910 --> 00:15:58,810
And let's see some errors that we get here and we just have a little bit of a syntax error.

150
00:16:02,360 --> 00:16:04,970
Because we don't need this curly bracket.

151
00:16:04,970 --> 00:16:08,220
There you go.

152
00:16:08,280 --> 00:16:11,060
And again we want to change the initialStateRobots.

153
00:16:11,080 --> 00:16:16,050
in the function to this one.

154
00:16:18,250 --> 00:16:21,420
We save and everything looks good.

155
00:16:21,430 --> 00:16:26,770
Let me make this a little bit smaller.

156
00:16:26,830 --> 00:16:28,920
Now we have a problem.

157
00:16:29,410 --> 00:16:32,970
We have to reducers now and if we go to index.js

158
00:16:33,060 --> 00:16:40,360
we see that in the createStore function we're just using the searchRobots reducer.

159
00:16:40,780 --> 00:16:42,760
So let's import now.

160
00:16:42,790 --> 00:16:52,640
The other reducer that we have which is requestRobots and now add this into the store as well.

161
00:16:53,020 --> 00:16:55,740
But how do we do that.

162
00:16:58,080 --> 00:17:08,180
Well, we have a function that again comes with redux that's called combineReducers. And this combineReducers,

163
00:17:08,180 --> 00:17:15,160
pretty self-explanatory, combines all the reducers into a root reducer.

164
00:17:15,290 --> 00:17:16,380
So let's do that.

165
00:17:16,400 --> 00:17:23,380
I'm going to say const rootReducer is going to equal the combinedReducers.

166
00:17:23,750 --> 00:17:32,120
And this is going to and accept the, in an object form, all the reducers.

167
00:17:32,240 --> 00:17:38,180
In my case it's the searchRobots and requestRobots.

168
00:17:38,390 --> 00:17:44,630
And now this rootReducer can be used in the store to include both reducers

169
00:17:47,720 --> 00:17:51,880
Let's save.

170
00:17:51,880 --> 00:17:53,110
All right.

171
00:17:53,110 --> 00:17:54,040
We're almost there.

172
00:17:55,720 --> 00:17:58,930
Now because we just used combined reducers.

173
00:17:58,930 --> 00:18:03,180
It's something that we've mentioned before, and that is if I go into app.js

174
00:18:03,340 --> 00:18:14,950
and scroll all the way up to mapStateToProps, our state now no longer has searchField as part

175
00:18:14,950 --> 00:18:16,200
of its property.

176
00:18:16,240 --> 00:18:25,780
Instead it's going to have two properties searchRobots and requestRobots which each have their own

177
00:18:25,780 --> 00:18:26,920
properties.

178
00:18:26,920 --> 00:18:29,680
So now we have to update the searchRobots

179
00:18:33,370 --> 00:18:40,190
like this which has the property of searchField.

180
00:18:40,250 --> 00:18:50,460
So this is what you're most likely going to see when you're working in redux in mapStateToProps.

181
00:18:50,490 --> 00:18:58,270
Now the final piece of the puzzle: redux-thunk. How does this work?

182
00:18:58,680 --> 00:19:10,740
Well redux-thunk is a middleware that waits and sees sees if any actions return a function instead of

183
00:19:10,740 --> 00:19:12,050
an object.

184
00:19:12,440 --> 00:19:13,360
What does that mean?

185
00:19:13,740 --> 00:19:25,740
If we go to actions we see that this is returning an object, but right here we're not returning an object

186
00:19:26,100 --> 00:19:33,930
are we, as a matter of fact we're not really returning anything right now.

187
00:19:34,070 --> 00:19:36,820
Thunk middleware is waiting for a function.

188
00:19:36,920 --> 00:19:43,880
And if ever an action that goes through it -remember a middleware is just a tunnel that actions go through

189
00:19:44,660 --> 00:19:49,050
and it notices a function it's going to act upon it.

190
00:19:49,100 --> 00:19:53,130
So let's do that first and I'll explain in details how it works.

191
00:19:54,030 --> 00:19:57,350
We first need to go to App.js.

192
00:19:57,420 --> 00:20:01,850
And within here we want to update a few things.

193
00:20:01,900 --> 00:20:16,610
First we want to update the state to now also include the robots to have state.requestRobots.robots

194
00:20:16,640 --> 00:20:19,960
Again this is the state from the reducer.

195
00:20:20,010 --> 00:20:29,630
There is also the isPending state again through their requestRobots.isPending.

196
00:20:30,050 --> 00:20:43,030
And then finally the error state from once again state requestsRobots.error

197
00:20:43,060 --> 00:20:51,510
The second part and the most important part is the request robot action.

198
00:20:51,680 --> 00:20:58,240
Again something that replaces this componentDidMount request.

199
00:20:58,390 --> 00:21:05,650
The way we can do that is within here add another property that we're going to pass on and we can name

200
00:21:05,650 --> 00:21:11,000
it whatever we want we'll say onRequestRobots

201
00:21:11,000 --> 00:21:17,820
and this is going to be a function, and this function.

202
00:21:17,950 --> 00:21:23,320
Remember we don't want to necessarily just dispatch.

203
00:21:23,670 --> 00:21:28,670
We want to - return a function from it.

204
00:21:28,740 --> 00:21:43,410
In our case it's the requestRobots reducer and this requestRobots reducer or action has the

205
00:21:43,980 --> 00:21:47,480
dispatch method.

206
00:21:47,510 --> 00:21:48,090
All right.

207
00:21:48,090 --> 00:21:49,000
I know that's a lot.

208
00:21:48,990 --> 00:21:51,480
So let's just go through this one more time.

209
00:21:52,800 --> 00:21:55,770
Right now we need the requestRobots

210
00:21:59,230 --> 00:22:10,620
action and this requestRobots action needs a dispatch method to actually dispatch these actions.

211
00:22:10,920 --> 00:22:22,120
So in App.js we first need to import our action which is requestRobots from the actions file and

212
00:22:22,120 --> 00:22:30,750
this requestRobots needs to have the dispatch method.

213
00:22:30,760 --> 00:22:42,580
This is the same as doing this.

214
00:22:43,190 --> 00:22:54,870
And now this dispatch is going to work as long as we use redux-tThunk because it's going to catch the

215
00:22:54,870 --> 00:23:00,140
fact that this is going to return a function.

216
00:23:00,170 --> 00:23:07,390
So if we go back to our actions we can now do this.

217
00:23:13,770 --> 00:23:25,280
All right, what just happened? Well, we've created a higher order function: a function that returns a function.

218
00:23:25,280 --> 00:23:28,810
And I know this can get a little bit confusing but a thunk.

219
00:23:28,880 --> 00:23:34,950
Because now requestRobots is going to return again because of error functions.

220
00:23:35,000 --> 00:23:42,800
This is going to imply that it's returning this, it's going to provide the dispatch function to this

221
00:23:42,950 --> 00:23:47,040
second layer function so that we can use it here.

222
00:23:47,420 --> 00:23:55,430
Again this is something that you just have to get used to but in the end if we save this let's see if

223
00:23:55,430 --> 00:23:56,120
it works.

224
00:23:56,140 --> 00:24:01,530
Now I know it's the first time around so we've probably messed something up but let's check it out.

225
00:24:04,000 --> 00:24:07,490
I refresh and everything works.

226
00:24:07,490 --> 00:24:08,890
We're not getting any errors.

227
00:24:09,020 --> 00:24:19,380
But remember, we actually need to connected to our app. If we go back we can now go to app.js and we

228
00:24:19,380 --> 00:24:21,690
have all these props that we can use now.

229
00:24:21,960 --> 00:24:31,530
So the componentDidMount no longer needs to have the fetch call. All he needs is this.props.

230
00:24:32,760 --> 00:24:38,940
and the action that we have our requests robots onRequestRobots

231
00:24:41,590 --> 00:24:42,200
perfect.

232
00:24:42,430 --> 00:24:46,670
And we also don't need the constructor anymore do we.

233
00:24:46,750 --> 00:24:53,110
Because there's no more states these robots are now going to be returned as part of the props from

234
00:24:53,380 --> 00:24:56,930
onRequestRobots.

235
00:24:57,040 --> 00:25:01,100
So again we're going to change this.state to

236
00:25:03,790 --> 00:25:15,540
robots and we can also get isPending to check if isPending is true.

237
00:25:19,140 --> 00:25:25,770
To render if this is true then we want to render loading.

238
00:25:25,950 --> 00:25:30,950
If not we want to just render our robo friends.

239
00:25:30,970 --> 00:25:33,660
So those are coming from our props

240
00:25:34,780 --> 00:25:39,230
And now we only have componentDidMount in our app.

241
00:25:39,440 --> 00:25:45,360
Let's save and go back to our app.

242
00:25:45,380 --> 00:25:47,490
All right, look at that.

243
00:25:47,780 --> 00:25:53,990
That doesn't happen very often but I somehow managed to code without any making - without making any errors.

244
00:25:53,990 --> 00:25:55,250
Again that's a rarity.

245
00:25:55,250 --> 00:25:56,210
Enjoy this moment.

246
00:25:56,210 --> 00:25:57,780
I'm definitely enjoying it.

247
00:25:57,800 --> 00:26:05,090
We see over here that we have "REQUEST_ROBOTS_PENDING" being fired and then SUCCESS being fired again.

248
00:26:06,760 --> 00:26:09,070
Let's refresh quickly.

249
00:26:09,070 --> 00:26:09,400
All right.

250
00:26:09,400 --> 00:26:11,300
What happens if the request fails.

251
00:26:11,320 --> 00:26:14,500
Let's go back here and go to our action.js

252
00:26:14,560 --> 00:26:18,280
And let's just type something wrong here,  we'll say like that.

253
00:26:18,280 --> 00:26:19,510
Save it.

254
00:26:19,510 --> 00:26:23,020
Go back and there you go.

255
00:26:23,120 --> 00:26:27,170
We have "REQUEST_ROBOTS_FAILED".

256
00:26:27,190 --> 00:26:31,560
Very cool.

257
00:26:31,730 --> 00:26:32,640
Let's fix that.

258
00:26:33,620 --> 00:26:37,040
And save.

259
00:26:37,090 --> 00:26:37,780
All right.

260
00:26:37,960 --> 00:26:44,020
We have our app that does the exact same thing as before.

261
00:26:45,220 --> 00:26:51,080
Nothing too crazy just filtering our robots.

262
00:26:51,310 --> 00:27:02,760
But the only difference is that we have this amazing logging ability and it's using redux.

263
00:27:02,850 --> 00:27:07,340
Very cool.

264
00:27:07,350 --> 00:27:10,180
I want to go over this one more time.

265
00:27:11,850 --> 00:27:16,450
And this is because it is a bit of a sticking point for most people.

266
00:27:18,640 --> 00:27:25,720
Remember this requestRobots, how it has this two functions.

267
00:27:25,930 --> 00:27:29,210
The requestRobot, right now redux,

268
00:27:29,220 --> 00:27:36,160
out of the box, wouldn't understand this, because we're not returning an object, as it expects for an action.

269
00:27:36,220 --> 00:27:46,090
We're returning a function and this function, isn't going to mean anything to it. By adding redux-thunk middleware,

270
00:27:46,240 --> 00:27:47,980
we're now listening to actions.

271
00:27:48,040 --> 00:27:54,490
And any time the requestRobots action gets triggered it's going to return a function and trigger redux-thunk

272
00:27:54,490 --> 00:28:00,780
and redux-thunk is going to say - oh this is a function I'm going to give you, here is the dispatch

273
00:28:00,790 --> 00:28:08,350
so you can actually call some actions, and we can finally run our actions like this.

274
00:28:08,350 --> 00:28:15,240
So if we go back to our diagram we've created a system where the actions are being triggered.

275
00:28:15,390 --> 00:28:17,310
They go through any middleware.

276
00:28:17,370 --> 00:28:24,030
If it's a search term change, it's just going to go straight to the reducer, run through a nice function

277
00:28:24,450 --> 00:28:32,730
update the store and make changes to our view. If we request robots it's going to notice that it's a

278
00:28:32,730 --> 00:28:39,120
function it's going to go into the middleware, and redux-thunk is gonna say.

279
00:28:39,140 --> 00:28:47,250
All right first just dispatch pending to the reducer, and I'll let you know when I'm done with the promise

280
00:28:48,000 --> 00:28:50,490
and I'll let you know if I got any robots.

281
00:28:50,740 --> 00:28:59,080
And when it returns it's going to dispatch the success, go through the reducer, update the store and make

282
00:28:59,230 --> 00:29:00,010
changes.

283
00:29:01,410 --> 00:29:03,570
Phew! That was a lot.

284
00:29:03,630 --> 00:29:09,550
But if you got this far and you understand it you've pretty much gotten redux.

285
00:29:09,600 --> 00:29:10,440
That's it.

286
00:29:10,440 --> 00:29:13,730
That's the whole redux library.

287
00:29:13,980 --> 00:29:15,230
It's very very simple.

288
00:29:15,240 --> 00:29:20,340
And once you start using it a couple times and you get comfortable with it it's really really beautiful

289
00:29:20,370 --> 00:29:21,850
the way everything works.

290
00:29:21,870 --> 00:29:24,150
But for now let's all take a break.

291
00:29:24,150 --> 00:29:26,240
Thanks for watching and I'll see you in the next one.

292
00:29:26,550 --> 00:29:27,000
Bye-bye