In the last section we started integrating redux form by installing the library and looking it up as 2
a reducer. 3
And then we did a brief discussion about kind of what's going on behind the scenes or you know how we're 4
going to work with redux form in this section we're going to continue integrating redux form by creating 5
an actual form element inside of our posts new component the code that we're getting right and the section 6
is you know again it's going look a little bit like magic because to be honest it kind of is pretty 7
magic. 8
Let's go out and check it out. 9
So first thing we're going to do at the top is import redux form from redux form. 10
So this redux form object right here is nearly identical to the connect function from the re-act redux 11
library almost identical to it. 12
We're going to use this redux form function right here to wrap our post-New component here at the bottom 13
. 14
Let's go ahead and do that and then we'll discuss exactly what's going on. 15
So we'll say redux form 16
and then we're going to do one set of parentheses and then a separate set of parentheses around post-New 17
. 18
So just like we did with CONNECT in the past then inside the first set we're going to make an object 19
and it enter a space it out to make sure we've got redux form one set of parentheses with curly braces 20
and then a second set of parentheses around post-New. 21
So this is where we're going to pass in our configuration to read ex-Foreign this is we're going to 22
say hey redux forms here are. 23
Here's what the form is going to be called. 24
And here is what the fields that you need to be in charge of are going to be called. 25
This is the letter that we're passing off to to redux form. 26
So the first will name our form so we'll say posts knew the name and the form does not have to match 27
the name of the component right here. 28
It can be post-New form if we want to do whatever it needs to be. 29
It just needs to be some unique token. 30
Next we'll go ahead and declare the fields that this form is going to contain. 31
So we'll say fields and then pass it in array and it's going to have a field name title categories and 32
content content. 33
There you go. 34
So this is the array of fields that tells redux form hey here's the different pieces of data that our 35
form is going to contain. 36
We need you to create some you know configuration for these we need you to watch for these inputs. 37
You can imagine in practice exactly what's going on behind the scenes here with the form name. 38
There's just real quick aside I want to talk about this back in the previous section inside of our index 39
reduce or right here we add in on the form reducer under the key for him right here. 40
And so that's why this form name right here is so critical and why it needs to be unique. 41
Here's what's really going on behind the scenes. 42
Whenever we make changes to any of these inputs or whenever the user makes changes I should say it's 43
actually setting the new value of these different inputs on our global application state. 44
So in reality kind of behind the scenes whenever a say user types something in. 45
Record it on application state our new state is going to look something like form form is from the producer 46
that we added posts new form. 47
That's the purpose of the name right here. 48
And then it records the properties for each of the fields. 49
So we'll have something like title and this will be you know whatever the user types in categories and 50
content. 51
So behind the scenes redux form is using this information right here to record the input to the user 52
ads on these different keys on our global state object kind of juxtapose that with how he handled forums 53
in the past where we handled the forms of value by recording it on the component level state. 54
So what redux form here is doing is it's pulling that level of state from the component level back up 55
to the application level just a little difference in implementation. 56
OK so I got to delete all this down here. 57
Cool. 58
OK. 59
So redux form is going to handle the state side is going to handle the data side but we still need to 60
build the actual form that the user will be working with. 61
So our form is going to have three inputs. 62
Title categories in content. 63
Each of these will be a normal text input except for the content which will be a text area. 64
Let's go ahead and build the form right now. 65
Is going to be a little bit typing so we'll delete the existing div and we'll make a form instead and 66
then we'll put it at the top a nice big title that just says Create a say a new post 67
and then we'll do a div we'll do one div for each form control. 68
So we'll have class name form group and the form group right here is just to get some styling from Bootstrap 69
and will add in the label 70
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
control and then just to save some time here. 72
Oops. 73
Don't forget to close the input. 74
Don't be like me. 75
There we go. 76
Just to save some time we'll go ahead and copy paste this twice. 77
So Will do. 78
Once twice the second one will change to bean categories and the last one will be content and will also 79
change the input type here from input to a text area. 80
So on this last one we've got textarea with class name farm control. 81
Finally at the bottom we'll add our submit button so will do a button type submit and we'll have a class 82
name of Button button primary will close the button off and text we'll just say submit so have a button 83
that says that. 84
OK so this is all building just a normal each female form. 85
Obviously you know with react but nonetheless just a normal form. 86
We've got our foreign component. 87
We've got some labels and we've got some inputs on here so we can upheld our end of the bargain here 88
. 89
We created the form. 90
We also told redux form about the different fields that it's going to contain. 91
So let's continue in the next section where we're going to take that configuration from redux form and 92
make sure that it gets wired up to the individual inputs within our form. 93
I'll see in the next section