1

00:00:01,860  -->  00:00:03,090
So we've got our form here.

2

00:00:03,120  -->  00:00:05,890
But we still haven't wired up any portion of it yet.

3

00:00:05,970  -->  00:00:12,090
No updates are actually being reflected on our state on either the component level or even the application

4

00:00:12,090  -->  00:00:12,810
level.

5

00:00:12,840  -->  00:00:19,460
We've just got a plain aged email form with some plain input elements right here.

6

00:00:20,400  -->  00:00:25,080
Let's think back to a couple of sections and we talked about the contract that you're entering in with

7

00:00:25,080  -->  00:00:26,190
redux form.

8

00:00:26,430  -->  00:00:32,610
We told redux form that we were creating a new form named Post's new form and we told about the different

9

00:00:32,610  -->  00:00:34,510
fields that we were going to find in it.

10

00:00:34,980  -->  00:00:41,600
And then we wired that into the redux form helper and that also wrapped our post-New component.

11

00:00:41,670  -->  00:00:49,350
So just in the exact same way that our connect helper that we've used in other places injects prop's

12

00:00:49,410  -->  00:00:53,820
into our components redux form does the exact same thing.

13

00:00:53,880  -->  00:01:01,740
So redux form is injecting some helper's for us onto this stop prop's inside of this component here

14

00:01:03,240  -->  00:01:09,870
so we can get access to those props by just saying you know this doc props and then pull off whatever

15

00:01:09,870  -->  00:01:12,590
different helpers we want on it.

16

00:01:12,810  -->  00:01:16,760
One specific property that gives us is called Handels summit.

17

00:01:17,010  -->  00:01:21,300
So I'm going to pull that off now I will say Konst handle submits

18

00:01:24,330  -->  00:01:26,160
this syntax right here.

19

00:01:26,250  -->  00:01:29,090
We've covered it before it's just some more E6.

20

00:01:29,090  -->  00:01:37,090
It's totally equivalent to writing Konst handle Samit equals this dot probs dot handle submit totally

21

00:01:37,120  -->  00:01:37,830
the same thing.

22

00:01:37,860  -->  00:01:40,760
To save this little bit of characters.

23

00:01:41,790  -->  00:01:48,540
OK so this handle Samit function right here that we got handed to us from redux form is what you want

24

00:01:48,540  -->  00:01:51,190
to call whenever the form tries to submit itself.

25

00:01:51,210  -->  00:01:55,530
So like you know when the user presses the enter key or when they click the submit button.

26

00:01:55,530  -->  00:01:58,280
This is the function that we want to call.

27

00:01:58,320  -->  00:02:06,750
So let's go ahead and add in that event handler right now will save form on submit handle submit.

28

00:02:06,840  -->  00:02:07,800
Simple enough right.

29

00:02:07,800  -->  00:02:08,970
Not too bad.

30

00:02:09,510  -->  00:02:15,030
This handle Samit function right here is what tells redux form hey the user is trying to submit this

31

00:02:15,030  -->  00:02:15,840
form right now.

32

00:02:15,960  -->  00:02:19,830
Probably a good time to validate the form and if the form isn't valid.

33

00:02:19,830  -->  00:02:21,720
Make sure we stopped the validation.

34

00:02:21,930  -->  00:02:28,980
So if the user say hasn't entered any text into any of these inputs and we say no user has to enter

35

00:02:28,980  -->  00:02:35,790
text this even have a right here will block the form submittal and will see that out by hand here just

36

00:02:35,820  -->  00:02:37,590
very shortly.

37

00:02:38,790  -->  00:02:40,190
OK.

38

00:02:40,320  -->  00:02:43,630
So Redus form is now handling the form Smillie event for us.

39

00:02:43,630  -->  00:02:48,960
There just one more thing we need to do now we need to map the different inputs in our form to the different

40

00:02:48,960  -->  00:02:51,840
fields that we defined at the bottom.

41

00:02:51,840  -->  00:02:57,220
Remember when we looked at the diagram previously we tell redux farm about the different fields we have

42

00:02:57,230  -->  00:02:57,460
.

43

00:02:57,810  -->  00:03:04,710
And then redux form gives us some helpers some sets of rules for managing these inputs read ex-Foreign

44

00:03:04,710  -->  00:03:08,670
basically takes over management of these forms entirely from us.

45

00:03:08,670  -->  00:03:13,290
We don't have to deal with the form with the seasonally inputs at all we don't have to deal with them

46

00:03:13,290  -->  00:03:14,510
at all.

47

00:03:15,330  -->  00:03:19,620
So these helpers are provided to us again on this process.

48

00:03:19,680  -->  00:03:24,330
They're injected by the redux form here help or at the bottom.

49

00:03:24,330  -->  00:03:28,910
So the helpers are available on a property here called fields

50

00:03:31,560  -->  00:03:35,880
so Fields is actually an object that contains the three different fields that we declared.

51

00:03:36,180  -->  00:03:45,450
So we can pull them off by writing fields title categories and content.

52

00:03:45,540  -->  00:03:48,690
This is just again you know some yes six right here.

53

00:03:48,690  -->  00:03:51,780
It's totally equivalent to doing something like Condes title

54

00:03:54,530  -->  00:04:00,420
equals this dot probs dot fields dot title totally equivalent you can write it either way that you want

55

00:04:00,440  -->  00:04:00,590
.

56

00:04:00,750  -->  00:04:06,720
It's totally up to you if you want to stick with some more vanilla E.S. five you know just like this

57

00:04:06,720  -->  00:04:06,810
.

58

00:04:06,810  -->  00:04:07,670
Go for it.

59

00:04:07,830  -->  00:04:12,910
Otherwise you can use the shorthand which is as we've written it just right here.

60

00:04:13,920  -->  00:04:14,470
OK.

61

00:04:14,670  -->  00:04:17,480
So we've now got these configuration objects right here.

62

00:04:17,520  -->  00:04:22,120
And you know I don't know about you but I'm kind of curious what the heck they're doing.

63

00:04:22,130  -->  00:04:24,810
So let's go ahead and cons a log.

64

00:04:24,990  -->  00:04:25,460
One of them.

65

00:04:25,500  -->  00:04:29,430
So we'll just go out and cons. Like title let's you know take a look at what this configuration object

66

00:04:29,430  -->  00:04:30,690
is.

67

00:04:31,560  -->  00:04:33,330
So I'm going to go over to my browser.

68

00:04:33,350  -->  00:04:37,470
I'm going to refresh the page and see our form pop up.

69

00:04:37,500  -->  00:04:42,220
You know he added that in previous section and here's our console log.

70

00:04:42,240  -->  00:04:46,440
So this is the title configuration object.

71

00:04:46,500  -->  00:04:50,220
So if you look at it there's actually a lot of interesting looking properties on here.

72

00:04:50,220  -->  00:04:52,210
It's got stuff like valid.

73

00:04:52,230  -->  00:04:53,040
True.

74

00:04:53,370  -->  00:04:55,080
Has the field been visited.

75

00:04:55,080  -->  00:04:56,650
Has it been touched.

76

00:04:56,670  -->  00:04:57,680
Is it dirty.

77

00:04:57,690  -->  00:04:59,540
You know whatever that means.

78

00:04:59,940  -->  00:05:06,300
The name of the field and then also has some event handlers on here like onchange which we're familiar

79

00:05:06,300  -->  00:05:10,310
with has on focus on update and on blur.

80

00:05:10,740  -->  00:05:15,280
So I can click in here and that would run the on focus handler.

81

00:05:15,510  -->  00:05:22,110
I can make a change and that would call the on change handler and I can also blur the field which is

82

00:05:22,110  -->  00:05:27,750
just the process of having it selected and then selecting it like so you can see it's not select anymore

83

00:05:28,170  -->  00:05:30,880
that triggers the on blurry handler.

84

00:05:31,620  -->  00:05:37,770
So this configuration object you know like I mentioned before is completely managing the entire input

85

00:05:37,770  -->  00:05:43,490
for us all we need to do is make sure that we pass this configuration object into the input.

86

00:05:43,510  -->  00:05:46,180
So let's go ahead and do that now.

87

00:05:47,310  -->  00:05:52,860
I'm going to delete the console log here at the top and then we're going to make sure that we pass the

88

00:05:52,860  -->  00:05:58,080
entire configuration object into this input tag as a property.

89

00:05:58,680  -->  00:06:03,600
We're not going to define we're not going to pass it in as a property like we did you know on these

90

00:06:03,600  -->  00:06:09,330
other tags here we're going to use a little bit of a different syntax will do curly braces and then

91

00:06:09,330  -->  00:06:13,530
we'll write dot dot dot title.

92

00:06:13,590  -->  00:06:19,290
So what this does is it's it does what's called destructuring of the object.

93

00:06:19,290  -->  00:06:26,100
So it says hey I want to pass this object into input but I don't want to pass it in as like you know

94

00:06:26,210  -->  00:06:36,180
a form of property like say form prop's equals just title because then it would show up on Inside the

95

00:06:36,180  -->  00:06:42,030
input as something like this stop Propst form this dot Propst form props.

96

00:06:42,120  -->  00:06:49,560
Instead we just want to make sure that every one of the properties on the title object shows up inside

97

00:06:49,560  -->  00:06:51,100
the input.

98

00:06:51,240  -->  00:06:57,130
So it kind of structures the object into its separate keys and values and passes it into the input.

99

00:06:57,720  -->  00:07:04,470
So in the effect all those properties we just saw in the console like say onchange show up inside here

100

00:07:04,500  -->  00:07:10,080
as something like you know on change title change onchange

101

00:07:13,170  -->  00:07:15,410
like so.

102

00:07:16,790  -->  00:07:17,440
OK.

103

00:07:17,790  -->  00:07:22,310
So again we've got the configuration object we're passing it into the input.

104

00:07:22,380  -->  00:07:26,930
So redux form can entirely control this input tag right here.

105

00:07:26,970  -->  00:07:30,900
Let's repeat this process for other two inputs.

106

00:07:31,080  -->  00:07:39,710
So we'll do our categories and our content like so.

107

00:07:40,380  -->  00:07:41,000
Okay.

108

00:07:41,220  -->  00:07:46,670
So now each of our three form elements are being completely managed by redux form.

109

00:07:46,890  -->  00:07:51,120
Let's continue in the next section and talk a little bit more about what this does for us.