So we've got our form here. 2
But we still haven't wired up any portion of it yet. 3
No updates are actually being reflected on our state on either the component level or even the application 4
level. 5
We've just got a plain aged email form with some plain input elements right here. 6
Let's think back to a couple of sections and we talked about the contract that you're entering in with 7
redux form. 8
We told redux form that we were creating a new form named Post's new form and we told about the different 9
fields that we were going to find in it. 10
And then we wired that into the redux form helper and that also wrapped our post-New component. 11
So just in the exact same way that our connect helper that we've used in other places injects prop's 12
into our components redux form does the exact same thing. 13
So redux form is injecting some helper's for us onto this stop prop's inside of this component here 14
so we can get access to those props by just saying you know this doc props and then pull off whatever 15
different helpers we want on it. 16
One specific property that gives us is called Handels summit. 17
So I'm going to pull that off now I will say Konst handle submits 18
this syntax right here. 19
We've covered it before it's just some more E6. 20
It's totally equivalent to writing Konst handle Samit equals this dot probs dot handle submit totally 21
the same thing. 22
To save this little bit of characters. 23
OK so this handle Samit function right here that we got handed to us from redux form is what you want 24
to call whenever the form tries to submit itself. 25
So like you know when the user presses the enter key or when they click the submit button. 26
This is the function that we want to call. 27
So let's go ahead and add in that event handler right now will save form on submit handle submit. 28
Simple enough right. 29
Not too bad. 30
This handle Samit function right here is what tells redux form hey the user is trying to submit this 31
form right now. 32
Probably a good time to validate the form and if the form isn't valid. 33
Make sure we stopped the validation. 34
So if the user say hasn't entered any text into any of these inputs and we say no user has to enter 35
text this even have a right here will block the form submittal and will see that out by hand here just 36
very shortly. 37
OK. 38
So Redus form is now handling the form Smillie event for us. 39
There just one more thing we need to do now we need to map the different inputs in our form to the different 40
fields that we defined at the bottom. 41
Remember when we looked at the diagram previously we tell redux farm about the different fields we have 42
. 43
And then redux form gives us some helpers some sets of rules for managing these inputs read ex-Foreign 44
basically takes over management of these forms entirely from us. 45
We don't have to deal with the form with the seasonally inputs at all we don't have to deal with them 46
at all. 47
So these helpers are provided to us again on this process. 48
They're injected by the redux form here help or at the bottom. 49
So the helpers are available on a property here called fields 50
so Fields is actually an object that contains the three different fields that we declared. 51
So we can pull them off by writing fields title categories and content. 52
This is just again you know some yes six right here. 53
It's totally equivalent to doing something like Condes title 54
equals this dot probs dot fields dot title totally equivalent you can write it either way that you want 55
. 56
It's totally up to you if you want to stick with some more vanilla E.S. five you know just like this 57
. 58
Go for it. 59
Otherwise you can use the shorthand which is as we've written it just right here. 60
OK. 61
So we've now got these configuration objects right here. 62
And you know I don't know about you but I'm kind of curious what the heck they're doing. 63
So let's go ahead and cons a log. 64
One of them. 65
So we'll just go out and cons. Like title let's you know take a look at what this configuration object 66
is. 67
So I'm going to go over to my browser. 68
I'm going to refresh the page and see our form pop up. 69
You know he added that in previous section and here's our console log. 70
So this is the title configuration object. 71
So if you look at it there's actually a lot of interesting looking properties on here. 72
It's got stuff like valid. 73
True. 74
Has the field been visited. 75
Has it been touched. 76
Is it dirty. 77
You know whatever that means. 78
The name of the field and then also has some event handlers on here like onchange which we're familiar 79
with has on focus on update and on blur. 80
So I can click in here and that would run the on focus handler. 81
I can make a change and that would call the on change handler and I can also blur the field which is 82
just the process of having it selected and then selecting it like so you can see it's not select anymore 83
that triggers the on blurry handler. 84
So this configuration object you know like I mentioned before is completely managing the entire input 85
for us all we need to do is make sure that we pass this configuration object into the input. 86
So let's go ahead and do that now. 87
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
entire configuration object into this input tag as a property. 89
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
other tags here we're going to use a little bit of a different syntax will do curly braces and then 91
we'll write dot dot dot title. 92
So what this does is it's it does what's called destructuring of the object. 93
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
a form of property like say form prop's equals just title because then it would show up on Inside the 95
input as something like this stop Propst form this dot Propst form props. 96
Instead we just want to make sure that every one of the properties on the title object shows up inside 97
the input. 98
So it kind of structures the object into its separate keys and values and passes it into the input. 99
So in the effect all those properties we just saw in the console like say onchange show up inside here 100
as something like you know on change title change onchange 101
like so. 102
OK. 103
So again we've got the configuration object we're passing it into the input. 104
So redux form can entirely control this input tag right here. 105
Let's repeat this process for other two inputs. 106
So we'll do our categories and our content like so. 107
Okay. 108
So now each of our three form elements are being completely managed by redux form. 109
Let's continue in the next section and talk a little bit more about what this does for us.