1
00:00:02,110 --> 00:00:07,570
Now for that, I will install one extra package in this project with npm install --save and that's

2
00:00:07,570 --> 00:00:09,390
Redux Thunk.

3
00:00:09,400 --> 00:00:15,430
That's a so-called Redux middleware which we can call, which allows us to change our action creators

4
00:00:15,520 --> 00:00:21,690
here in the actions folder such that we can actually do asynchronous stuff there, that we can handle

5
00:00:21,700 --> 00:00:28,620
side effects there so that we can for example send HTTP requests in such an action creator and only once

6
00:00:28,620 --> 00:00:30,580
that HTTP requests is done,

7
00:00:30,580 --> 00:00:35,080
we're actually dispatching an action to the Redux store because that's important,

8
00:00:35,080 --> 00:00:41,500
your Redux flow in general needs to be synchronous. So you can't wait for some action to complete before

9
00:00:41,500 --> 00:00:48,480
you update your state. With Redux Thunk, that changes, your reducer still needs to be synchronous,

10
00:00:48,550 --> 00:00:54,970
so no async code must be in here but your action creator can now be asynchronous,

11
00:00:54,970 --> 00:01:00,460
this means that you now can send a request as part of your action creator and only once you're done

12
00:01:00,460 --> 00:01:06,820
with that, you actually dispatch the action to the reducer and you'll see this in practice in a second,

13
00:01:06,820 --> 00:01:11,260
for example here in create product which is the thing I want to start with.

14
00:01:11,410 --> 00:01:18,760
However to use this new feature, we have to enable Redux Thunk and we do this in the app.js file, there

15
00:01:18,820 --> 00:01:19,660
from Redux,

16
00:01:19,660 --> 00:01:27,780
you need to import apply middleware and in addition, you need to import a new thing and that's Redux

17
00:01:27,780 --> 00:01:33,060
Thunk, you can name this however you want, from Redux Thunk. Again

18
00:01:33,060 --> 00:01:37,620
this can be named however you want because we're using the default export of that package.

19
00:01:37,620 --> 00:01:43,440
Now you use that in create store, there you can parse a second argument and there, you should call

20
00:01:43,440 --> 00:01:49,550
apply middleware as a function and to that function, pass Redux Thunk.

21
00:01:49,560 --> 00:01:55,500
This will now basically enable that package which in turn allows us to do this different thing

22
00:01:55,500 --> 00:02:00,870
in the action creator I was referring to and that different thing is now what we'll have a look at next.