In the last section we put together our survey new component as a reminder the survey news job is to
show the survey form and the survey form review and kind of toggle the visibility between the two so
that the user thinks that they first fill out the form and then go on to reviewing all their import
input Susie inputs in the survey form review.
However we don't have either of these components put together just yet.
So there's really not a large lot of logic for us to wire up inside of survey new.
So I'm thinking that we'll probably just pause working on survey new for a little bit.
We'll put together these two components and then we'll come back to the thing and wiring it up.
So let's get to it.
We'll start off by making our survey form and putting a little boiler plate inside of there back inside
my code editor.
I need to find my source components surveys directory and I'll make a new file called survey form.
J.S..
Now like I just said we want to get some boilerplate for a class based component in here.
We just put together all the boilerplate for a class based component inside of survey new however.
So rather than retype all that I think we should just copy all this change back over to survey form
and paste it all in here.
So now my survey form has a bunch of boilerplate code for a re-act component.
Of course it still has a bunch of references to the survey a new component all over the place.
So let's update each of those to say survey form instead we've got one up here.
The class title.
We've got one inside of our render method.
And then one down at the export default statement as well.
Finally we'll change back over to the survey new component.
So now here is survey a new survey new we will import the survey form and then show it inside of here
because remember that's the entire purpose of survey new.
It wants to show the survey form.
So back in Servais new We'll put our import statement for survey form
and then we will show it inside the render method.
Survey form.
There we go.
OK let's test the sound inside the browser make sure we didn't make any mistakes.
I will wait for the automatic refresh to kick in and I should see the text survey form appear on the
screen.
Now I know that the terminology that we're working with right now like survey a new survey form really
feels quite identical and it's very confusing.
Unfortunately you know in production applications we really want to have components that belong together
to be at least somewhat named similarly.
So even though I'm seeing these words and it probably sounds confusing when you read the component names
it's a lot more reasonable.
So if you just read to yourself survey form and survey new.
Yeah they're two separate components of course.
But when I start saying survey new survey form survey new survey form Yeah it's more confusing.
Just to make sure that we don't make any further mistakes at the very top of the survey new component
are going to put a little comment that says survey new shows survey form and survey form reveal just
a little reminder to myself.
And then inside of the survey form we'll put a comment in here as well.
Survey form shows a form for a user to add input like so.
OK.
So hopefully now we've got these little comments just to remind ourselves about the difference between
these two components.
Now let's stick inside of survey form which is where we're going to be doing a lot of work inside of
survey form.
I first want to get a little bit of experience hooking this component up to the redux form library.
So we're going to import statement at the very top of this file that's going to import a little helper
from redux form and allow us to tell redux form that it needs to be in control of any forms that is
inside of that are inside of this component.
So the top will add on an import statement.
We're going to import one function from the redux foreign library called redux form and we'll get that
from redox dash form.
Now again the redux foreign library it exports multiple different values multiple functions multiple
objects.
So we make sure that we use our curly braces to say hey we want this one specific exported value from
redux form the redux form helper right here is what allows redux form to communicate with our redux
store.
So recall that in a couple sections ago when we had a little bit of the backstory on redux form and
what it does for us we had said that redux form takes care of calling action creators it takes care
of pulling data out of our store and providing it to other components for us.
So clearly redux form does have to be in charge or have the ability to communicate with our retail store
at the top of our application this redux form helper can be thought of as being nearly identical to
the connect helper that we've been using from the re-act redux library.
So the redux form function right here allows our component to communicate with the read store at the
top of our application that is enclosed by that provider tag.
So we set up way long ago the redux form function right here is so similar to the connect function.
In fact that it is wired up to our component with the exact same method signature.
So we're going to say redux form down here at the bottom.
We'll put down one set of empty parentheses and then a second set around our component.
Now that's kind of where the similarities end between connect and redux Sunia redux forum redux form.
Rather than taking a couple of different arguments it only takes one single argument that contains a
couple of different options that we will want to use to customize how our form behaves.
So I just added in an empty javascript object right here and then I added a new line so we can easily
add in a property to it.
The redux form helper only requires one option to be passed inside this object and that property or
that option is called for.
Now we're going to give this thing a form value of survey form for right now.
I would love to tell you the purpose of this property but right now we're going to just kind of let
this thing sit for a little bit.
OK.
We're going to come back to this property right here and we'll talk about what its purposes.
As soon as we start adding text to our actual form or at least once we can start typing in our form
and get some text to actually show up.
OK.
So we'll come back to this option right here.
But right now we're just going to take a pause on it and we'll just forget that it exists.
OK.
So that's pretty much it for setting up redux form.
We are now have the ability to make use of it inside of our component as we wish.
But of course why do we actually use it for it.
How do we use it.
Still a little bit of stuff to figure out here.
So let's take a quick pause.
When we come back we'll figure out how we make use of redux form inside of our survey form component.
So Acia in just a second.