In the last section we implement to navigation between the Post's index page and the Post's new page 2
using the link component from re-act router. 3
In this section we're going to continue with Step 4 of adding our new feature we need to flesh out the 4
form that users will use to create a new blog post. 5
Looking back at our mockup for the blog post form we have a title some categories in some content. 6
It's pretty straightforward. 7
Now we've already created input elements in the past but this time our form is going to be different 8
. 9
We're going to actually require some validation of the inputs. 10
Validation is the process of making sure that the data that the user enters is correct or accurate or 11
at least to some requirements that we impose we're going to set up validation on our posts create form 12
to require users to always enter text into each field. 13
So if the users say doesn't enter a title but they do enter a category in the content we're going to 14
say no. 15
You know this form is not valid. 16
You need to add some additional information for you can cement this blog post. 17
And specifically we're going to show it in the form of highlighting this input read in showing some 18
text on here as well. 19
So to help us with building a form we're going to make use of a library called redux form which is probably 20
one the best darn little libraries around redux. 21
It's really a pleasure to use. 22
So let's get started by checking out some of the documentation for the library in a browser. 23
I'm going to go ahead and search for redux form 24
and then as the top link on here you're specifically looking for Eric wrasse redux form. 25
So this will take you to the github page. 26
You can read some of the documentation on here. 27
It's got some links right here. 28
They also have a fantastic home page to here at the top which are going to go to. 29
And same set of documentation on here as well. 30
I'm going to pop open the getting started right here and you can see that's got a fantastic implementation 31
guide. 32
We're going to go through all these steps right here. 33
But if you know as the as we go through these steps and you look kind of funky or kind of weird you 34
can always refer back to the documentation. 35
It's pretty darn clear what's going on with the documentation here. 36
So don't don't be afraid to pause the video and check out some of the docs. 37
OK. 38
So the first thing we need to do is install this library. 39
And like all of our other libraries we're going to install it using NPM so at my terminal I'm going 40
to go ahead and install 41
redux florham with NPM install dasht just save redux form and we're gonna install a specific version 42
just because API again does change from time to time. 43
Four point one. 44
Point three. 45
So we'll say at four point 1.3. 46
And this should just take a second to install it's pretty darn lightweight gone. 47
Looks good. 48
So the first thing we need to do with redux form is hook it up to our reducer. 49
We're going to talk to exactly how redux form works but let's just do the set up real quick get it over 50
with and then we can jump into your description of how it all comes together. 51
So inside of our reducers index not just file we will import reduce reducer has Formery douceur 52
from redox form. 53
We haven't used this kind of syntax here before. 54
All this is doing is Sayne import redux form grab the reduce or property off of it and then create a 55
variable with it named former douceur. 56
This is just done to. 57
It kind of has a convenience by the author of redux form to avoid any naming conflicts with other reduce 58
areas that we might be importing into this file. 59
Next we'll add the reducer to our existing combined reducers call specifically with the key form. 60
Make sure you use form here and not anything else and will say form reducer. 61
So Farmer do server farm reducer or cool. 62
Now we need to do is set up our posts new component to use redux form before we do that though. 63
Let me tell you a bit about what's going on behind the scenes with redux form. 64
I'm going to pull up a diagram to explain what's going on with it in this diagram is going to look a 65
little bit weird but you know bear with me will do the time of initial walkthrough and then I think 66
as we start to go through the process of wiring up redux form stuff is going to make a lot more sense 67
. 68
OK so this diagram is kind of a combination of you know what's going on behind the scenes. 69
And when we actually run our application and the combination of you know how we're going to wire up 70
redux for him let's see if we get a decent zoom level right here I think this is good. 71
OK. 72
So the diagram is intended to go from left to right. 73
And again it's kind of the process of what's going on. 74
This first box right here is a word of this in terms of a you know letter sending letters or e-mail 75
over to the redux form library. 76
So this is the redux form this is our first letter right here. 77
So the first thing we're going to do we set up redux form is we're going to tell it hey I'm creating 78
a new form in my application and that form is called post new That's the name of the form. 79
When I create this form there are going to be three different inputs on the form they are named. 80
And we're going to name each of them. 81
Title categories and content. 82
So here you go here's a new form called post-New and it has three fields that I want she had take care 83
of read X form takes this information that we've declared you know says OK like you know I see this 84
new form. 85
I can go ahead and keep track of this stuff and it replies to us. 86
Sure thing no problem I can I can handle each of these forms. 87
Just tell them that I'm going to manage them completely. 88
You don't have to touch any of the forms at all. 89
I'm going to manage them myself. 90
So it implements its own set of rules for each field that we need to basically introduce to each field 91
I mean to say hey input you're being managed by redux form now I don't want to touch you at all. 92
I don't want to know what's going on with you whenever something happens to you. 93
Just go ahead and tell redux form. 94
So again we're kind of passing control off of our inputs over to redux form. 95
In addition we're not only passing off the inputs but we're also passing off the entire form object 96
in general. 97
Remember in our previous section when we implemented our weather search spot at the top we used a form 98
element we're going to use a form element again for this application for this form. 99
And you know an actual age TNL form tag. 100
And so redux form is also going to be in charge of handling the submission of that form as well redux 101
form is then going to pass back some properties to us. 102
It's going to say okay like I can handle all of this stuff I can take over your fields for you. 103
I can manage the the forms the middle but you need to do me a favor. 104
You need to make sure that each of those components you know the three inputs and the form knows about 105
these set of rules I have for them. 106
So it passes back an object to us in the form of some props and those props are specifically specifically 107
going to be a handle submit call. 108
So you know this function should be called whenever the form attempts to be submitted. 109
And it's also got an object of fields with title categories and content it knows about the existence 110
of these fields because we declared them back here in the initial setup process and then we said hey 111
here are these three fields. 112
So we're going to take the Handelsman function and then fields dot title fields dot categories and fields 113
dot content. 114
And we're going to pass them directly to our H.T. team. 115
You know really our GSX tags we're going to pass them directly to the different input elements that 116
we declare. 117
So the net result all of this is that we're going to take fields that title we're going to make sure 118
that we pass that configuration to this input. 119
We're going to take fields of categories. 120
We're going to make sure we pass it to this input. 121
We're going to take field Zuk content. 122
You know you kind of get the idea of where this is going and make sure that it goes to this text area 123
you know not we're not using and we using an textarea here. 124
And finally whenever this form is submitted so you know the user clicks the submit button here we need 125
to make sure that we call this handle submit function that's passed to us by redux form read X is going 126
to Orsini redux form is going to take this handle Samit function and is going to you know do some massaging 127
the data blah blah blah and stuff I don't want to get too much into it right now let's talk about that 128
when we get there. 129
But basically we're going to use this handle Samit function in conjunction with an action creator and 130
that action creator will get handed the final values from the form and the final validated input for 131
us. 132
So again you know we're going to watch this entire process. 133
I just want to give you kind of a overall overview before we delve into it because once you dive in 134
a lot of the stuff that happens here is really going to look like magic because it's really going to 135
be very easy to put the form together. 136
Why won't she have an idea of kind of what's going on behind the scenes here. 137
OK. 138
With all this in mind let's go ahead and start wiring this all up in the next section.