1
00:00:01,080 --> 00:00:04,600
In this video we're going to start to wire up redux form to our project.

2
00:00:04,600 --> 00:00:06,840
We already installed the library two videos ago.

3
00:00:06,880 --> 00:00:10,980
So make sure that you have installed it as well and started up your server again.

4
00:00:11,810 --> 00:00:16,880
Once that's all done I'm going to flip on over to my code editor and we're going to open up our reducers

5
00:00:16,970 --> 00:00:18,630
index file.

6
00:00:18,730 --> 00:00:20,900
So reducers index yes.

7
00:00:21,020 --> 00:00:25,580
Remember when we just discussed redux form a little bit ago I had told you that redux form is going

8
00:00:25,580 --> 00:00:29,100
to do a tremendous amount of stuff for us automatically.

9
00:00:29,150 --> 00:00:33,680
One of the things that redux form is going to do for us is manage all of our form data inside of our

10
00:00:33,680 --> 00:00:38,050
redux store in order to do so we have to wire up producer to our store.

11
00:00:38,060 --> 00:00:44,120
But this is going to be a producer that has been created for us by the redux form library.

12
00:00:44,150 --> 00:00:45,890
So we are not creating this producer.

13
00:00:45,950 --> 00:00:48,210
It has already already been created.

14
00:00:48,230 --> 00:00:52,080
We just installed it into our project when we installed redux form.

15
00:00:52,190 --> 00:00:57,410
So all we have to do is pull that reduce or out of the library and hook it up to our combined reducers

16
00:00:57,410 --> 00:00:58,430
call right here.

17
00:00:58,850 --> 00:01:01,990
So to do so I'm going to add in an import statement at the top.

18
00:01:02,180 --> 00:01:09,500
I'm going to say import reducer from redux Dasch form and then we have to assign this to a very particular

19
00:01:09,500 --> 00:01:12,220
key inside of the combined reducers call.

20
00:01:12,350 --> 00:01:15,870
We are required to wire it up to a key of form.

21
00:01:16,100 --> 00:01:20,960
So I'll say form is coming from reducer.

22
00:01:21,060 --> 00:01:26,130
Now remember any time that we have named exports from a library or a file that we'd write we have to

23
00:01:26,130 --> 00:01:28,820
write out the exact name of that named expert right here.

24
00:01:28,830 --> 00:01:32,080
So we have to import this thing as a variable called reducer.

25
00:01:32,340 --> 00:01:36,450
However a lot of times you might have a lot of different reducers inside of your project.

26
00:01:36,450 --> 00:01:41,510
And so to just have a variable inside of your called reducer is a little bit confusing.

27
00:01:41,520 --> 00:01:47,040
So as a little helpful thing this is absolutely not required at all this is just a helpful thing.

28
00:01:47,070 --> 00:01:52,470
Very frequently we will to use a little bit of syntax here to rename this named export.

29
00:01:52,500 --> 00:02:00,950
When we pull it into this file so we can write optionally reducer as form reducer like so.

30
00:02:00,990 --> 00:02:06,630
So we are importing a named import right here and then we're going to essentially rename it on the fly

31
00:02:06,660 --> 00:02:08,460
on the exact same line of code.

32
00:02:08,550 --> 00:02:11,550
So we will not have a variable inside this file called reducer.

33
00:02:11,550 --> 00:02:16,650
Instead it's going to be imported into this file and given a name of form reducer.

34
00:02:16,770 --> 00:02:21,060
Again this is done just to make sure that it's kind of clear what reducer we are talking about.

35
00:02:21,060 --> 00:02:24,990
At any given point because you might have a lot of different reducers inside this file.

36
00:02:25,070 --> 00:02:29,970
And if you just see one side of your called reducer you would probably say what in the world is this

37
00:02:29,970 --> 00:02:30,900
reducer.

38
00:02:31,170 --> 00:02:33,920
So we're just trying to give it a more descriptive name that's all.

39
00:02:34,320 --> 00:02:38,760
So if we use this syntax right here we no longer have a variable called reducer and we instead have

40
00:02:38,760 --> 00:02:43,860
to write out form reducer like XA OK.

41
00:02:43,870 --> 00:02:45,260
So let's now save this file.

42
00:02:45,310 --> 00:02:49,570
We're going to flip back over to our application and just refresh and make sure that we don't see any

43
00:02:49,570 --> 00:02:50,680
error message.

44
00:02:50,830 --> 00:02:51,970
You will see an error message.

45
00:02:52,000 --> 00:02:57,840
If you assign that reducer to a key other than form inside of your combined reducers call.

46
00:02:57,910 --> 00:02:59,770
Now if you open up your redux dev tools.

47
00:02:59,770 --> 00:03:04,750
Now here's my redux dev tools over here in on making sure that I'm looking at my react up.

48
00:03:04,780 --> 00:03:11,530
You'll notice that if you select state right here and look at tree we have a new key inside of our state

49
00:03:11,530 --> 00:03:15,280
tree or redux store that new key is forms.

50
00:03:15,280 --> 00:03:20,550
That's the reducer that we just set up over time as we start to put foreigns together inside of application.

51
00:03:20,560 --> 00:03:25,150
We're going to see that this piece of state right year has a bunch of data related to the forms that

52
00:03:25,150 --> 00:03:26,800
we have inside of our app.

53
00:03:26,890 --> 00:03:32,440
So as we start to wire together this create form that we're trying to build this one right here.

54
00:03:32,470 --> 00:03:35,300
We're going to see that as we start to type text in here.

55
00:03:35,320 --> 00:03:40,480
All that text and whatnot is going to automatically show up inside of this form object right there inside

56
00:03:40,480 --> 00:03:41,580
of a redux store.

57
00:03:41,720 --> 00:03:47,020
Remember the entire idea here is that with redux form we are still using regex all the same redux you

58
00:03:47,020 --> 00:03:49,000
know in understand just a lot.

59
00:03:49,000 --> 00:03:54,320
The steps are being done for us automatically OK now that we have wired up Bre-X form.

60
00:03:54,320 --> 00:03:56,990
We're going to take a quick pause when we come back the next video.

61
00:03:57,020 --> 00:04:01,550
We're going to start working on our create stream form and understand how to work with redux form in

62
00:04:01,550 --> 00:04:01,990
general.

63
00:04:02,030 --> 00:04:04,230
So quit posin I'll see you in just a minute.