In the last section we installed redux form inside of our application and we did a little bit of setup
for it.
Let's now talk a little bit more about what redux form is going to do for us and exactly why we are
using it at all.
Like why are we just handling his inputs manually as we did in the past.
So I'm going to flip on over to a diagram.
Let's look at what it's going to do for us.
So this is a little bit of a guideline on how to use redux form as we talk about how we're going to
use it.
I think that the purpose of redux form is going to become a little bit more clear.
The first thing we're going to do is to identify the different pieces of state that exist inside of
our form.
Some for the form that we are working with we have identified that we have three different pieces of
state a title some categories and some contents for the actual post for each different piece of state
that we have.
We're going to create something called a field component a field component is created by redux form
for us all we have to do is tell the field what type of input we want to receive from the user.
So it might be like a radio button or a checkbox or some text input or something like that or even a
file input if we want it then at some point in time a user is going to change that field input.
So they might check the checkbox change the radio box enter some text or out of file attachment or something
like that internally redux form is going to automatically handle all these changes for us.
So we've already seen what happens whenever we want to handle inputs inside of reactor right.
We said that we'd put on the onchange handler.
We set our state and then we set the value on the input ourself.
That's a whole bunch of boilerplate that really gets tedious to write very quickly.
And so this right here is what redux form is really doing for us that's saving us a lot of trouble.
Redux form is going to automatically handle any changes that are made to any input of any type inside
of our application.
So we don't have to put together a set state call.
We don't have to make an action creator.
We don't have to set the value of the input.
All those different pieces of boilerplate that get really tedious to write over and over again are going
to be handled automatically for us by redux form finally once a user sets all the different inputs and
says OK this looks good.
I want to submit the form.
They're going to attempt to submit the form.
And at that point in time we're going to pass two callbacks to redux form that validate the different
inputs that the users provided.
And then also if the form is valid you know if the user has actually submitted valid input then we will
also handle foreign some middle.
So the last stage right here handling forms the middle that's really one redux form hands control of
the form back to us and says Okay it looks like the user is attempting to submit the form.
It looks like all the input is valid.
So go ahead take this data and save it to your back and server or whatever you really want to do with
it.
So that's when relex form really hands control back over to us.
OK.
So let's start working through our implementation here.
Remember the first thing we're going to do is identify the different pieces of form state.
We've more or less already done that.
So we're going to move on to making one field component per piece of state.
So this right here might seem a little bit confusing.
So let's get to it and then flip back over to our posts new component here and is right here and at
the top we're going to import two helpers from the redux foreign library.
We're going to import field and redux form from redux form so we've spoken very briefly about the field
component right here it is a reactive component and it's something that's wired up automatically to
redux form.
The other piece that we imported from redux form is a function.
This is a function right here called redux form.
You can essentially think of this Funk's right here as being identical or at least very similar I should
say to the Kinect helper that we've been using from re-act redux.
So remember that just a moment ago inside of our reducers index start G-S file we hooked up that former
douceur.
So clearly redux form is being integrated somehow into the redux side of our application this redux
form helper right here is what allows our component to communicate with that additional reducer that
we just wired in.
So again we can really think of this thing as being very similar to the connect helper.
It is what is allowing our component to talk directly to the redux store.
Lets wire up our redux form help right here in exactly the same fashion as we would use our connect
helper.
So we're going to use that read ex-Foreign help right here and attach it somehow to the post-New component
at the bottom we'll call redux form to put our first set of parentheses and then a second set of parentheses
around the component itself.
Now there's just a little bit of configuration we have to pass into this redux form function right here.
Remember that whenever we use the connect helper we defined the map state to props and the map dispatched
to prop's functions.
In the case of redux form however we pass a single argument which is a function and this function can
take some number of different configuration options for it.
Now the only configure configuration option we're going to specify is the form option.
So let's fill out the value right here and I'll tell you about a little bit about what this thing is
used for.
So I'm going to put in here posts new form like so.
OK.
So this right here this form property that we've just designated You can really think of as being the
name of the form.
So inside of any given react or a redux application you can easily imagine cases where you might want
to show multiple different forms on a page at a single time.
Right.
Like of course we might want to show user multiple forms on a single page.
For example maybe whenever a user wants to sign into our application we want to show them both a sign
in and a sign up form at the same time to handle the case in which they've already signed up to a click
application or the case in which they need to sign up.
So easy to imagine the case in which we have multiple forms visible on the screen at any given time.
That is exactly what this form property right here is helping us with by providing a unique string right
here.
And there's absolutely no requirement for formatting in the string whatsoever.
Just has to be unique.
That's the only requirement.
We ensure that if we are showing multiple different forms on the screen at a different time or I should
say at the same time redux form will handle all those different forms correctly.
So I won't try to merge state from multiple different forms into a single piece of state essentially.
I can tell you that if we had some other component inside of our applications let's say light posts
at it.
Us if We have an export default statement and there as well and we said that that forms name was also
post-New form that would cause all the form state that exist inside of this other component to be merged
into this one over here.
So this is a lot of very in-depth discussion but all I'm really trying to communicate here is to say
make sure that the string that you assign to this form property is unique.
That's all that's all it really has to be again there is absolutely no requirement or formatting of
the string.
So I could have just as easily done one two three four five six whatever I want to be.
It just has to be something unique OK.
So there is our helper that's going to allow redux form to communicate directly from the component to
the reducers that we've already set up.
Now the next thing I want to work on is setting up the actual form inside of our component and wiring
up our first field.
So let's get this thing a shot.
As you might imagine it is called redux form.
It is all about handling form elements.
So we still are going to be working with a page T.M. form element then inside of here will specify our
first field so field is a component.
We're going to pass it some number of different props the first proper going to specify is the name
crop.
We're going to give it a name of title the name right here is essentially what piece of state are we
trying to describe here what piece of state is the user editing.
In this case our first field is meant to reflect the title of a post.
And so I think that an appropriate name would be title
The second property is going to be something called component.
So are you going to specify component right for the component property takes in a function.
So a function or another component that will be used to display this field component right here.
So this is where things start to get a little bit confusing.
So I think that is probably going to be best strategy to take a break right now.
We'll kind of collect our breath collect our thoughts.
We're going to come back and talk a little bit more about exactly what this component property is doing
for us.
So let's take a quick break and I'll talk to you in just a second.