The last section we wired up read form to our survey form component but we still don't really have a
good idea of you know what that's done for us.
All right we wired this thing up but how do we actually make use of redux form inside of here.
So just to figure out how redux form works we're going to take a quick little diversion inside the section.
We're going to say that you know we know we understand the survey form is supposed to show the survey
fields components and each survey field is supposed to be responsible for somehow showing a label in
a text input to our user.
But for just this section we're going to say forget about those and instead I want to figure out how
to show a text input inside of my survey form component.
Once we figure out that very basic usage of redux form we will then refactor our code to have all the
separate survey fields instead.
OK so let's get to our plan we're going to start simple get something working inside of survey form
and then refactor it out to our separate components.
So don't change back to my code editor.
I'm still inside the survey form the genius file.
I'm going to find the redux form import statement and I'm going to add one additional import to this
thing.
So in addition to the redux form helper I'm also going to pull out the field component the field component
is a helper provided by redux form for rendering absolutely any type any type of traditional HMO form
element.
And so I'm talking about like text areas text inputs file inputs checkboxes radio buttons dropdown it's
all those types of things can all be somehow rendered or represented by this field component.
So you can kind of think of this field component here as being like a Swiss Army knife of sorts.
It's like a component that we can use to show any type of different input or any type of different HDMI
elements that will somehow collect input from our user.
So let's try showing this thing inside of our component because again it is a reactive component and
we'll see what happens.
So place the field let's save the file and you know what.
Let's let's just see what happens inside the browser.
Let's see how this goes.
So change back over.
And when I do.
Looks like we might get a nice big error message so I don't expect this to say something like cannot
render element OK so element type is invalid expected a string.
OK.
So clearly using the field by itself doesn't quite work which is totally fine.
So like I just said the field component can be thought of as like a Swiss Army knife of sorts that has
a lot of different capabilities.
But in order for you to make use of those in order for you to actually make use of the fuel component
you have to provide the field components some number of minimum props to tell it how to render itself.
So by itself the fuel component really does nothing.
We have to give it a lot of different instructions to tell it how to behave.
So we're going to pass this thing a couple of different props.
First we're going to give it a type of text.
We're going to give it a name of survey title and we're going to give it a component of input like so.
Now we'll talk about these different props and what they are for in just a second.
But right now let's just say this file and see what happens.
Now when our application refreshes so we get our refresh and when we do I should now see a nice text
input appear on the screen that I can type into.
OK.
That's the field component in practice.
Let's talk about what's going on with that a little bit more in detail.
First off we pass it a type We'll talk about the type in just one second.
Instead let's kind of focus on the name property right here.
So the name property I passed in a string of survey title the name property can be absolutely any string
that we wish.
So I just randomly off the top of my head decided to use survey title right here.
The name property tells redux form that we have one piece of data being produced by our form called
survey title.
So once we start typing into this field like as soon as we start typing on our keyboard redux form is
going to see that someone's typing in this field.
It's going to take the value out of that input like the value that we're typing in and it's going to
automatically store it inside of our redux store under a key of survey title and we'll see that in practice
in just a second.
Now the third property here of component right now is a string of input.
And so it tells redux form.
It tells the field I want this to appear as an HMO input tag like just a normal input tag like that
right there.
With that in mind knowing that this specifies the type of HMO tag we want to show maybe the type over
here is the far left starts to make a little bit more sense.
So we're showing a component of input and the input should be of type text.
Remember that input tags can have many different types some common type of like say file picker to show
a which is still input tag but that is a type of file picker which would show a file picker to our users.
So again that's three different required properties to always pass into these field elements.
Now this is again the most basic usage of a field element that we're going to get to further customize
this field and how it behaves.
A very common practice is to replace a component right here with not a string saying what type of vanilla
HTL component we want to show or ational tag but instead to replace it with some type of custom re-act
component that we will write.
So for example we might replace that component Propp of input right there with a custom component we
make like say one called survey fields.
So we might see something like.
Survey field like so then you and I would put together the survey fields component and kind of teach
it how to work nicely with redux form.
And that's exactly what we're going to do in just a little bit.
But right now how about we just stick with a component of type input.
Okay.
OK.
So now the next thing I want to look at is how we actually submit a form.
So sure maybe it's enough that we are actually putting a field tag here we're recording some input from
our user but at some point in time we want to actually submit the form and create a new survey or create
new campaign whatever it is by using the data that the user entered in this field right here to do so.
We will wrap our field with the form tag
and then inside this form tag we're going to add a prop on submit.
And then this next part is going to be just a little bit complicated.
OK just a little bit country is going to look just a little bit nasty.
Let's write the code out and we'll talk about what it's doing.
I'm going to say this doc props handles submit and I'm going to pass it.
This is a function right here.
I'm going to pass it an arrow function my own going to save values arrow cancel dot log values and then
very quickly I get a new line to sing to make sure you can easily read it.
OK.
There we go.
The props dot handle submit function right here is a function that is provided to us automatically by
the redux form helper that we wired up at the bottom.
So remember in the past we had said that the Kinect tag can kind of manipulate the props that are being
passed to our component.
And so that's exactly what the redux for untagged is doing here as well.
It's adding some additional props to the survey form one of those props is called handle Samit.
If we call handle submit and pass it a function of our own the function that we pass to it will be automatically
called whenever a user attempts to submit our form.
And when I say Samit I mean like a very classic h TMail style forms middle's like pressing the enter
key or clicking a button that says Submit or something like that.
So speaking of which let's do that right now let's add on a button.
That contains the text submit and we'll give it a type of cement as well.
So now in theory when the user attempts to submit the form that automat or that function that was passed
to us by redux form will be called it internally is going to call the Aero function that we put right
here and I'm not going to say a lot about the error function right here let's just kind of see what
happens.
OK.
So going to save all this will change back over my out.
I can now see the submit button on the screen.
I'm going to add a little bit of text in here and I'm going to click the submit button and I do so do
so.
I see a concert log with a key of the title and a value of the text.
I had put into the input itself.
OK.
So that's pretty much like the entire flow of redux form in a nutshell.
When we add on the on Samit handler to the form and then call handle Samit inside there and provide
our arrow function our arrow function will be called automatically whenever a user submits the form.
And so our arrow function right here would be a fantastic opportunity to take the values out of the
form and save them to get some back end server or process them in some other fashion.
Now the other thing I want to say about the value is object that was passed to us that object that we
saw inside of a console log right here.
You'll notice that we got the value inside that object was the text we had entered into the input but
the key of that object was the name that we had added to the field component.
So again this name property right here is used as kind of like the recordkeeping like when we enter
in some text in the field inputs.
That means we are updating the survey title property and so of course we want to make sure that we pick
the names of all of these fields to be somewhat at least somewhat reasonable somewhat relevant throughout
our application.
Okay.
So I think that's probably enough of a overview of how redux form works and how we kind of make use
of some of these very low level concepts.
Now we still have to figure out some other stuff like say validation and whatnot.
We'll definitely get to that over time.
But right now let's take a pause and when we come back we're going to do a little bit of refactoring
to our form and break it out to use separate survey field components.
So let's take care of that in the next section.