Now that we have the ability to navigate from our index page over to the new page we're going to move
on to Step Four which is going to involve adding a form to our posts new component.
So the form itself has to be pretty straightforward.
We'll have a title some categories for the post and some contents to fill in for the post as well.
After a user fills in all those inputs and typesafe right here great role take that post data and we'll
save it to our remote API.
Now building the form itself is going to be a little bit more complex than some of the inputs that we've
dealt with previously inside this course because we have several different inputs in here and we probably
want to validate whatever the user puts into each of these inputs.
We're going to use an additional library called redux form redux form is all about handling any type
of form that you put together with redux validating the input and then submitting the form in some fashion.
In this section let's take a glance at the documentation around redux form and then we install it as
an NPM module.
So first we'll take a look at the documentation inside my browser.
I'll do a google search for redux form.
Now click on the first link that pops up.
Now this is definitely one library where I really like to show you the documentation for because the
documentation is just fantastic.
Really good documentation around redux form.
If you go to the examples section over here you'll see that they have examples for all different types
of forms that you could possibly imagine you would ever make inside of a web application.
So they have an example with a simple form with validation with room most middle with wizard type forms
like a multistep form with handling external widgets just many different inputs are many different types
of forms.
You might want to use inside of your own application.
So if you start working on your own app after this course and you want to make a form of any type I
really recommend you check out some examples inside the documentation here.
Now to get started wiring up relax form is a little bit more complex than some other libraries that
we've used previously.
So I can scroll up to the top of this list over here on the left and find the getting started guide.
So we're going to follow the exact steps through here steps 1 2 and 3.
So we're going to go right through these steps right now for getting this installed.
Let's get to it.
First thing we'll do is open up our terminal and we're going to install redux form as an NPM package.
So I'll run NPM install dash dash save redux dash form and we're going to get a very particular version.
So I'm going to say at 6.6 point three like so
OK so while that runs let's now flip back over to our code editor and I'm going to find my reducers
index dot J.S. file.
Now feel free to read through some of the setup documentation.
Essentially what we have to do here is import a reducer from the read ex-Foreign library and hook it
up to our combined reducers call.
So internally redux form uses our redux instance or our instance of the redux store for handling all
of the state that is being produced by the form like the actual form that's getting rendered on the
screen at the end of the day what read X form is really doing for us is just saving us from having to
wire up a bunch of manual action creators.
That's really all it's doing.
So it's really just saving us time and it's not really bringing any functionality in here that we wouldn't
just be kind of otherwise writing ourselves which is I find kind of interesting.
OK.
So the first thing I will do is import the reducer from redux form and how to do this.
They recommend using a little bit compacted since whoops reduce or as form reducer.
There we go from redux form.
So we recommend importing this reducer property as something called former douceur.
So this as key We're right here is essentially doing the import of the reducer property and assigned
to this alias of sorts called former douceur.
So anywhere else in Suddens file we would not be referring to reducer we would be referring to former
douceur.
Again we're really just renaming this property.
We're renaming the reducer property right here just in case we ever import anything else into this file
called just reducer as well like reducers kind of a little bit too casual a keyword it's too generic.
So read form does recommend that we kind of set this alias ahead of time.
Now here's the really important part of set up.
We're going to wire in this reducer from redux form into our combined reducers call the very important
part is to make sure that we assign it to the key of form.
So a safe form is form reducer.
All the different forms that we hook up inside of our different components are going to assume that
the former douceur is being applied to the form piece of state right here.
So it is really critical that we get that keyword correct.
OK.
So that's pretty much it for wiring up redux form.
But we still haven't really explained a whole lot about what it's doing for us.
So we still have to kind of figure out exactly how we're going to make use of redux form and the very
practical level.
So let's continue and address that in the next section.