1

00:00:01,220  -->  00:00:06,420
In the last section we started integrating redux form by installing the library and looking it up as

2

00:00:06,420  -->  00:00:07,310
a reducer.

3

00:00:07,560  -->  00:00:12,210
And then we did a brief discussion about kind of what's going on behind the scenes or you know how we're

4

00:00:12,210  -->  00:00:18,390
going to work with redux form in this section we're going to continue integrating redux form by creating

5

00:00:18,840  -->  00:00:24,120
an actual form element inside of our posts new component the code that we're getting right and the section

6

00:00:24,150  -->  00:00:28,350
is you know again it's going look a little bit like magic because to be honest it kind of is pretty

7

00:00:28,350  -->  00:00:29,100
magic.

8

00:00:29,370  -->  00:00:31,030
Let's go out and check it out.

9

00:00:31,740  -->  00:00:42,780
So first thing we're going to do at the top is import redux form from redux form.

10

00:00:44,280  -->  00:00:51,420
So this redux form object right here is nearly identical to the connect function from the re-act redux

11

00:00:51,420  -->  00:00:54,810
library almost identical to it.

12

00:00:54,960  -->  00:01:01,110
We're going to use this redux form function right here to wrap our post-New component here at the bottom

13

00:01:01,110  -->  00:01:01,970
.

14

00:01:01,980  -->  00:01:06,890
Let's go ahead and do that and then we'll discuss exactly what's going on.

15

00:01:06,990  -->  00:01:08,700
So we'll say redux form

16

00:01:12,060  -->  00:01:18,130
and then we're going to do one set of parentheses and then a separate set of parentheses around post-New

17

00:01:18,160  -->  00:01:18,190
.

18

00:01:18,210  -->  00:01:24,870
So just like we did with CONNECT in the past then inside the first set we're going to make an object

19

00:01:25,090  -->  00:01:31,470
and it enter a space it out to make sure we've got redux form one set of parentheses with curly braces

20

00:01:31,800  -->  00:01:35,340
and then a second set of parentheses around post-New.

21

00:01:36,060  -->  00:01:40,440
So this is where we're going to pass in our configuration to read ex-Foreign this is we're going to

22

00:01:40,440  -->  00:01:42,940
say hey redux forms here are.

23

00:01:43,080  -->  00:01:45,060
Here's what the form is going to be called.

24

00:01:45,090  -->  00:01:48,500
And here is what the fields that you need to be in charge of are going to be called.

25

00:01:48,510  -->  00:01:53,280
This is the letter that we're passing off to to redux form.

26

00:01:53,310  -->  00:02:01,620
So the first will name our form so we'll say posts knew the name and the form does not have to match

27

00:02:01,680  -->  00:02:03,360
the name of the component right here.

28

00:02:03,390  -->  00:02:07,140
It can be post-New form if we want to do whatever it needs to be.

29

00:02:07,140  -->  00:02:11,600
It just needs to be some unique token.

30

00:02:11,790  -->  00:02:17,500
Next we'll go ahead and declare the fields that this form is going to contain.

31

00:02:17,850  -->  00:02:27,720
So we'll say fields and then pass it in array and it's going to have a field name title categories and

32

00:02:27,720  -->  00:02:30,290
content content.

33

00:02:30,300  -->  00:02:32,290
There you go.

34

00:02:33,900  -->  00:02:40,020
So this is the array of fields that tells redux form hey here's the different pieces of data that our

35

00:02:40,020  -->  00:02:41,370
form is going to contain.

36

00:02:41,370  -->  00:02:51,610
We need you to create some you know configuration for these we need you to watch for these inputs.

37

00:02:52,080  -->  00:02:56,790
You can imagine in practice exactly what's going on behind the scenes here with the form name.

38

00:02:56,790  -->  00:03:04,590
There's just real quick aside I want to talk about this back in the previous section inside of our index

39

00:03:04,660  -->  00:03:10,140
reduce or right here we add in on the form reducer under the key for him right here.

40

00:03:10,410  -->  00:03:16,050
And so that's why this form name right here is so critical and why it needs to be unique.

41

00:03:16,050  -->  00:03:18,830
Here's what's really going on behind the scenes.

42

00:03:19,440  -->  00:03:24,540
Whenever we make changes to any of these inputs or whenever the user makes changes I should say it's

43

00:03:24,540  -->  00:03:30,300
actually setting the new value of these different inputs on our global application state.

44

00:03:30,630  -->  00:03:36,960
So in reality kind of behind the scenes whenever a say user types something in.

45

00:03:37,440  -->  00:03:48,840
Record it on application state our new state is going to look something like form form is from the producer

46

00:03:48,840  -->  00:03:53,220
that we added posts new form.

47

00:03:53,250  -->  00:03:55,860
That's the purpose of the name right here.

48

00:03:56,610  -->  00:03:59,540
And then it records the properties for each of the fields.

49

00:03:59,580  -->  00:04:09,180
So we'll have something like title and this will be you know whatever the user types in categories and

50

00:04:09,840  -->  00:04:11,080
content.

51

00:04:11,760  -->  00:04:18,030
So behind the scenes redux form is using this information right here to record the input to the user

52

00:04:18,030  -->  00:04:26,070
ads on these different keys on our global state object kind of juxtapose that with how he handled forums

53

00:04:26,070  -->  00:04:31,910
in the past where we handled the forms of value by recording it on the component level state.

54

00:04:32,250  -->  00:04:38,520
So what redux form here is doing is it's pulling that level of state from the component level back up

55

00:04:38,520  -->  00:04:44,230
to the application level just a little difference in implementation.

56

00:04:44,880  -->  00:04:48,730
OK so I got to delete all this down here.

57

00:04:48,810  -->  00:04:50,260
Cool.

58

00:04:51,360  -->  00:04:51,720
OK.

59

00:04:51,720  -->  00:04:56,250
So redux form is going to handle the state side is going to handle the data side but we still need to

60

00:04:56,250  -->  00:04:59,850
build the actual form that the user will be working with.

61

00:04:59,850  -->  00:05:01,840
So our form is going to have three inputs.

62

00:05:01,870  -->  00:05:04,740
Title categories in content.

63

00:05:04,740  -->  00:05:09,100
Each of these will be a normal text input except for the content which will be a text area.

64

00:05:09,390  -->  00:05:11,460
Let's go ahead and build the form right now.

65

00:05:11,530  -->  00:05:21,150
Is going to be a little bit typing so we'll delete the existing div and we'll make a form instead and

66

00:05:21,150  -->  00:05:30,200
then we'll put it at the top a nice big title that just says Create a say a new post

67

00:05:33,480  -->  00:05:37,980
and then we'll do a div we'll do one div for each form control.

68

00:05:38,040  -->  00:05:46,710
So we'll have class name form group and the form group right here is just to get some styling from Bootstrap

69

00:05:47,460  -->  00:05:48,660
and will add in the label

70

00:05:51,630  -->  00:06:00,780
and this will be our title and it will do our input type text and we'll have a class name of a form

71

00:06:01,380  -->  00:06:06,310
control and then just to save some time here.

72

00:06:06,350  -->  00:06:06,690
Oops.

73

00:06:06,690  -->  00:06:07,980
Don't forget to close the input.

74

00:06:07,980  -->  00:06:09,130
Don't be like me.

75

00:06:09,150  -->  00:06:10,650
There we go.

76

00:06:10,920  -->  00:06:14,700
Just to save some time we'll go ahead and copy paste this twice.

77

00:06:15,090  -->  00:06:16,420
So Will do.

78

00:06:16,960  -->  00:06:29,340
Once twice the second one will change to bean categories and the last one will be content and will also

79

00:06:29,340  -->  00:06:34,820
change the input type here from input to a text area.

80

00:06:34,860  -->  00:06:40,020
So on this last one we've got textarea with class name farm control.

81

00:06:40,020  -->  00:06:49,140
Finally at the bottom we'll add our submit button so will do a button type submit and we'll have a class

82

00:06:49,140  -->  00:07:02,340
name of Button button primary will close the button off and text we'll just say submit so have a button

83

00:07:02,340  -->  00:07:03,300
that says that.

84

00:07:03,870  -->  00:07:07,820
OK so this is all building just a normal each female form.

85

00:07:07,830  -->  00:07:11,310
Obviously you know with react but nonetheless just a normal form.

86

00:07:11,310  -->  00:07:12,890
We've got our foreign component.

87

00:07:12,960  -->  00:07:18,340
We've got some labels and we've got some inputs on here so we can upheld our end of the bargain here

88

00:07:18,340  -->  00:07:18,360
.

89

00:07:18,360  -->  00:07:20,250
We created the form.

90

00:07:20,250  -->  00:07:25,360
We also told redux form about the different fields that it's going to contain.

91

00:07:25,920  -->  00:07:31,410
So let's continue in the next section where we're going to take that configuration from redux form and

92

00:07:31,410  -->  00:07:35,300
make sure that it gets wired up to the individual inputs within our form.

93

00:07:35,310  -->  00:07:36,420
I'll see in the next section