1
00:00:00,900 --> 00:00:06,090
Now that we have the ability to navigate from our index page over to the new page we're going to move

2
00:00:06,090 --> 00:00:11,160
on to Step Four which is going to involve adding a form to our posts new component.

3
00:00:11,160 --> 00:00:13,330
So the form itself has to be pretty straightforward.

4
00:00:13,380 --> 00:00:19,620
We'll have a title some categories for the post and some contents to fill in for the post as well.

5
00:00:19,620 --> 00:00:25,140
After a user fills in all those inputs and typesafe right here great role take that post data and we'll

6
00:00:25,140 --> 00:00:27,490
save it to our remote API.

7
00:00:27,750 --> 00:00:32,790
Now building the form itself is going to be a little bit more complex than some of the inputs that we've

8
00:00:32,790 --> 00:00:38,880
dealt with previously inside this course because we have several different inputs in here and we probably

9
00:00:38,880 --> 00:00:42,790
want to validate whatever the user puts into each of these inputs.

10
00:00:42,840 --> 00:00:50,100
We're going to use an additional library called redux form redux form is all about handling any type

11
00:00:50,100 --> 00:00:57,120
of form that you put together with redux validating the input and then submitting the form in some fashion.

12
00:00:57,120 --> 00:01:02,490
In this section let's take a glance at the documentation around redux form and then we install it as

13
00:01:02,490 --> 00:01:04,860
an NPM module.

14
00:01:04,870 --> 00:01:08,660
So first we'll take a look at the documentation inside my browser.

15
00:01:08,680 --> 00:01:11,410
I'll do a google search for redux form.

16
00:01:11,410 --> 00:01:13,380
Now click on the first link that pops up.

17
00:01:14,410 --> 00:01:19,150
Now this is definitely one library where I really like to show you the documentation for because the

18
00:01:19,150 --> 00:01:22,110
documentation is just fantastic.

19
00:01:22,150 --> 00:01:25,360
Really good documentation around redux form.

20
00:01:25,360 --> 00:01:31,870
If you go to the examples section over here you'll see that they have examples for all different types

21
00:01:31,870 --> 00:01:36,880
of forms that you could possibly imagine you would ever make inside of a web application.

22
00:01:36,880 --> 00:01:44,460
So they have an example with a simple form with validation with room most middle with wizard type forms

23
00:01:44,560 --> 00:01:50,770
like a multistep form with handling external widgets just many different inputs are many different types

24
00:01:50,770 --> 00:01:51,340
of forms.

25
00:01:51,340 --> 00:01:55,060
You might want to use inside of your own application.

26
00:01:55,060 --> 00:02:00,550
So if you start working on your own app after this course and you want to make a form of any type I

27
00:02:00,550 --> 00:02:04,530
really recommend you check out some examples inside the documentation here.

28
00:02:06,000 --> 00:02:11,300
Now to get started wiring up relax form is a little bit more complex than some other libraries that

29
00:02:11,320 --> 00:02:12,740
we've used previously.

30
00:02:12,740 --> 00:02:17,880
So I can scroll up to the top of this list over here on the left and find the getting started guide.

31
00:02:18,450 --> 00:02:22,800
So we're going to follow the exact steps through here steps 1 2 and 3.

32
00:02:22,890 --> 00:02:26,250
So we're going to go right through these steps right now for getting this installed.

33
00:02:26,310 --> 00:02:28,470
Let's get to it.

34
00:02:28,470 --> 00:02:34,550
First thing we'll do is open up our terminal and we're going to install redux form as an NPM package.

35
00:02:34,710 --> 00:02:42,320
So I'll run NPM install dash dash save redux dash form and we're going to get a very particular version.

36
00:02:42,360 --> 00:02:47,350
So I'm going to say at 6.6 point three like so

37
00:02:50,210 --> 00:02:56,410
OK so while that runs let's now flip back over to our code editor and I'm going to find my reducers

38
00:02:56,440 --> 00:02:59,150
index dot J.S. file.

39
00:02:59,210 --> 00:03:02,260
Now feel free to read through some of the setup documentation.

40
00:03:02,270 --> 00:03:07,820
Essentially what we have to do here is import a reducer from the read ex-Foreign library and hook it

41
00:03:07,820 --> 00:03:10,370
up to our combined reducers call.

42
00:03:10,370 --> 00:03:17,840
So internally redux form uses our redux instance or our instance of the redux store for handling all

43
00:03:17,840 --> 00:03:21,980
of the state that is being produced by the form like the actual form that's getting rendered on the

44
00:03:21,980 --> 00:03:27,260
screen at the end of the day what read X form is really doing for us is just saving us from having to

45
00:03:27,260 --> 00:03:30,130
wire up a bunch of manual action creators.

46
00:03:30,140 --> 00:03:31,730
That's really all it's doing.

47
00:03:32,030 --> 00:03:37,160
So it's really just saving us time and it's not really bringing any functionality in here that we wouldn't

48
00:03:37,160 --> 00:03:41,750
just be kind of otherwise writing ourselves which is I find kind of interesting.

49
00:03:42,320 --> 00:03:42,630
OK.

50
00:03:42,650 --> 00:03:50,230
So the first thing I will do is import the reducer from redux form and how to do this.

51
00:03:50,300 --> 00:03:57,770
They recommend using a little bit compacted since whoops reduce or as form reducer.

52
00:03:57,770 --> 00:04:01,050
There we go from redux form.

53
00:04:01,340 --> 00:04:07,670
So we recommend importing this reducer property as something called former douceur.

54
00:04:07,670 --> 00:04:13,970
So this as key We're right here is essentially doing the import of the reducer property and assigned

55
00:04:13,970 --> 00:04:17,270
to this alias of sorts called former douceur.

56
00:04:17,330 --> 00:04:22,880
So anywhere else in Suddens file we would not be referring to reducer we would be referring to former

57
00:04:22,880 --> 00:04:23,690
douceur.

58
00:04:23,720 --> 00:04:26,420
Again we're really just renaming this property.

59
00:04:26,540 --> 00:04:32,120
We're renaming the reducer property right here just in case we ever import anything else into this file

60
00:04:32,120 --> 00:04:38,930
called just reducer as well like reducers kind of a little bit too casual a keyword it's too generic.

61
00:04:39,050 --> 00:04:44,350
So read form does recommend that we kind of set this alias ahead of time.

62
00:04:44,360 --> 00:04:46,940
Now here's the really important part of set up.

63
00:04:47,300 --> 00:04:53,870
We're going to wire in this reducer from redux form into our combined reducers call the very important

64
00:04:53,870 --> 00:04:58,260
part is to make sure that we assign it to the key of form.

65
00:04:58,700 --> 00:05:02,610
So a safe form is form reducer.

66
00:05:03,020 --> 00:05:08,090
All the different forms that we hook up inside of our different components are going to assume that

67
00:05:08,090 --> 00:05:12,900
the former douceur is being applied to the form piece of state right here.

68
00:05:12,920 --> 00:05:15,700
So it is really critical that we get that keyword correct.

69
00:05:16,660 --> 00:05:17,130
OK.

70
00:05:17,200 --> 00:05:20,070
So that's pretty much it for wiring up redux form.

71
00:05:20,170 --> 00:05:23,790
But we still haven't really explained a whole lot about what it's doing for us.

72
00:05:23,810 --> 00:05:27,940
So we still have to kind of figure out exactly how we're going to make use of redux form and the very

73
00:05:27,940 --> 00:05:29,170
practical level.

74
00:05:29,470 --> 00:05:32,900
So let's continue and address that in the next section.