1
00:00:00,900 --> 00:00:02,040
-: We just put together our

2
00:00:02,040 --> 00:00:04,410
onSubmit callback inside of our SignUp Form.

3
00:00:04,410 --> 00:00:05,490
In this section, we'll continue

4
00:00:05,490 --> 00:00:08,250
by putting together our signup action creator.

5
00:00:08,250 --> 00:00:10,860
Before we do, we're gonna take a brief detour,

6
00:00:10,860 --> 00:00:13,980
and we're going to put together the Redux Form middleware

7
00:00:13,980 --> 00:00:17,640
inside of our application and wired up to our Redux store.

8
00:00:17,640 --> 00:00:19,020
Now, if you're here in this course,

9
00:00:19,020 --> 00:00:21,810
I'm going to assume that you've never used Redux Form

10
00:00:21,810 --> 00:00:23,460
or, sorry, Redux Thunk before.

11
00:00:23,460 --> 00:00:26,040
So we will be doing a discussion about what we use it

12
00:00:26,040 --> 00:00:29,490
for and how we use it to make asynchronous action creators.

13
00:00:29,490 --> 00:00:31,410
But we're gonna first wire it up right now,

14
00:00:31,410 --> 00:00:32,759
and we'll come back in just a moment,

15
00:00:32,759 --> 00:00:35,190
and we'll talk about exactly how we use it.

16
00:00:35,190 --> 00:00:36,543
So first, wiring it up.

17
00:00:37,530 --> 00:00:39,000
Back inside of my code editor

18
00:00:39,000 --> 00:00:42,930
I'll find my source index.js file.

19
00:00:42,930 --> 00:00:46,620
We're going to import Redux Thunk, which is a middleware,

20
00:00:46,620 --> 00:00:49,923
and tie it together with our createStore call right here.

21
00:00:51,240 --> 00:00:54,120
To wire up a middleware to the createStore call,

22
00:00:54,120 --> 00:00:55,200
I need to first make sure

23
00:00:55,200 --> 00:00:58,540
that I import the applyMiddleware function

24
00:01:00,360 --> 00:01:01,383
from redux,

25
00:01:02,220 --> 00:01:05,040
and then right after that, I'll add on an import

26
00:01:05,040 --> 00:01:10,040
for reduxThunk from redux-thunk like so.

27
00:01:13,500 --> 00:01:16,260
Now, rather than trying to sneak in the applyMiddleware call

28
00:01:16,260 --> 00:01:18,180
directly to createStore right here,

29
00:01:18,180 --> 00:01:21,180
I'm going to instead create a temporary variable

30
00:01:21,180 --> 00:01:23,250
right above our ReactDOM.render call

31
00:01:23,250 --> 00:01:24,900
just so we have a little bit of space

32
00:01:24,900 --> 00:01:26,580
to actually declare the store

33
00:01:26,580 --> 00:01:29,553
without mixing all that stuff into our jsx right here.

34
00:01:30,540 --> 00:01:33,783
So I'm going to define const store as createStore,

35
00:01:35,098 --> 00:01:37,290
and now we've got a little bit of space.

36
00:01:37,290 --> 00:01:41,310
So we'll do our reducers, our initial state,

37
00:01:41,310 --> 00:01:43,110
and then we'll call applyMiddleware,

38
00:01:44,550 --> 00:01:46,507
and as the first and only argument to that

39
00:01:46,507 --> 00:01:49,953
we're gonna pass in reduxThunk like so.

40
00:01:52,320 --> 00:01:55,140
Now, rather than trying to stick everything directly

41
00:01:55,140 --> 00:01:57,270
into the store prop, we will remove

42
00:01:57,270 --> 00:02:00,420
that createStore call and replace it simply with store,

43
00:02:00,420 --> 00:02:02,253
which we defined right above.

44
00:02:03,240 --> 00:02:04,950
Okay, so that looks good.

45
00:02:04,950 --> 00:02:06,270
Let's take a brief pause right here.

46
00:02:06,270 --> 00:02:07,800
We're gonna come back to the next section.

47
00:02:07,800 --> 00:02:10,320
We're gonna start working on that signup action creator

48
00:02:10,320 --> 00:02:13,950
and talking about exactly what reduxThunk does for us.

49
00:02:13,950 --> 00:02:15,600
So I'll see you in just a minute.