In the last section we had a quick discussion about redux form and why we are using it inside of our
project now that we've got a better idea of what redux form is doing.
Let's make sure that we install it as an NPM module so that we can wire it up to our application.
So I think that you're familiar with what we do from here.
We're going to change on over to our terminal.
We're going to kill the running server.
We're going to make sure that we change into the client directory because this is a module that we want
to install for the client side of our application and we'll do an install dash dash save redux dash
form.
Now while that's running let's flip back over to our web browser.
I'm going to make in a new tab over here and I'm going to navigate to redux Dasch form dot com.
So I don't usually go super far in the documentation for a lot of the frameworks and libraries that
I talk about.
Redux farm is one of the big exceptions to that redux from the documentation is probably among the best
documentation for any library of any language that I've ever seen before.
It really just has very concise very clear documentation and most importantly it has very plain and
simple examples on how to use it.
So it's not just documentation on the different methods and functions that redux form has but it's also
examples of how to approach and tackle very common problems.
So if you scroll down a bit and you can find the examples section on here that's what we want to look
at right now.
So I'm showing you this example section.
So here is our list of examples and you can scroll through all the different ones right here you can
also see them on the left hand pane right here as well if you scroll down to examples.
So each of these has some sample code on some very common use cases of forms.
So for example you can look at how to put together a simple form with redux form that's it just a simple
form and it gives you a little discussion on what's going on here.
And then an example of the form itself and then the actual code that was used to create that form.
You can also go to way more complex forms like the type of form we're going to be creating is essentially
a wizard form.
So we can look at Wizard form down here
and it will give you an example of exactly how this thing works.
And then an example of the wizard form itself.
So again a wizard form is something where you have like multiple pages in a single form.
So we enter in some input we click Next click next.
OK so maybe it's not working here but hey we'll cut them the benefit of the doubt we'll just say that's
OK we'll just write that one off.
Don't sweat it.
Any ways you can still see the example in here of exactly what's going on.
So just across the board documentation is fantastic.
If we talk about redux form and you feel like something is still missing I encourage you to come back
to redux form itself the documentation and read through some of the examples.
Read through some of the frequently asked questions which again is also a fantastic resource.
So really just great overall I can't recommend it enough.
Now the last thing I want to look at on here is if we can find the getting started guide here at the
top of the list.
And so we're going to go through this getting started guide right now.
We're going to talk about all this stuff and we'll talk about what it does.
But I just want to point this out that you know if we go to the set up and you're still confused about
what's going on feel free to walk through this basic guide right here.
It'll tell you a little bit about exactly how to set redux form up and how to use it inside of your
application.
So again I just want you to be aware that you can always you know hop over here and take a glance.
All right.
So anyways back to the task at hand changing back over to the terminal.
It looks like my redux form module has completed installing So I'm going it changed back up to my server
directory and then start my server with Antium run death.
OK.
So we'll flip back over to our application.
We now have access to redux form inside of here.
So the first thing you have to do is wire it up to our application.
Remember we spoke just a second ago if you did go through that lecture and if you did watch it we had
said that redux form brings along its own form reducer that we have to hook up to our store and that's
how relaxed form gets like a handle of sorts on our application.
It gets how it gets a handle on our redux store.
And so it's going to be the first piece of set up we do.
We're going to set this former douceur so I'm going to change on over to my reducers index file.
Remember that this is where we wired together all the different reducers inside of our application.
Not only reducers that you and I right but also reducers that are used by third party modules that we
want to install as well.
So at the top of this file We're going to import this reducer that is created for us automatically by
redux form.
So we'll say import reducer from redux dush form like so now we import this as reducers because that
is the name of the function as it is exported from the library redux form.
You and I.
We cannot change this variable right here.
And I'm mentioning this because if you look at it the name reducer inside of like a reducers file is
kind of ambiguous.
Right.
Like if we have a lot of different reducers in here and then at some point in time we just see like
you know the word reducer.
I don't know about you but I would look at this and say well what reducing does this belong to.
Like this one's called Author reducer.
I know what this does.
You know I know where I can look this thing up.
But this one is just called reducer like not very descriptive.
So by convention whenever we import this reducer function from redux form we make use of another little
feature as a part of yes 6.
Yes 20:15 module imports so we can freely rename imported variables like this if we want to by adding
n as.
And then the name that we want to rename this this reducer to.
So in our case we're going to rename it to redux form.
So now we can not make reference to reduce search inside of this file.
Instead we would make reference to redux form.
And so again we're doing this just because it's kind of confusing to have a variable called reducer
floating around all over the place.
OK so we're going to add in this reducer that is created by redux form for us to our combined reducers
call.
Now remember every single reducer that we add in here has to be assigned to some key.
The key is very important because that is the key that this reducers output will be stored on in our
state object maintained by redux.
So because this year eight years off that's why in some of the previous sections we've seen like state
DOT auth dot whatever is produced by this thing right here.
So very similarly redux form has to be assigned to a very special key because relex form is going to
assume that the value is being produced by this reducer are available on a very special key and that
key is very appropriately named for.
So we assign the redux former douceur to the key of form because that is where redux form assumes all
of its state or all of its data is going to be living.
Now if for some reason you are working on an application where you have some reducer that you really
want to call form as well like you really want to call your own custom reduce or form and you don't
want to have to use up this key for the redux former douceur.
That's totally fine.
You can always check out the official docs again.
I think in the frequently asked questions they have an example on exactly how to change that key somewhere
in here.
Maybe not maybe it's in the reducer documentation over here but anyways just kind of leave that to you
and you can figure that out if you want to I would say that you know being concerned about this key
being form and wanting to use it yourself for your own application.
Pretty rare.
But you know again I thought I'd just throw it out there.
OK.
So that basically a wires redux form to our application.
So now we can make use of all the different features and side of it.
Now at this point we're ready to start working on our form.
The only problem is that we don't really have absolutely any of the components that we really need to
put the form together.
So remember we've been talking about how we want to have a survey new component a survey form the fields
blah blah all this different stuff.
So before we really dive face first into redux form and how to use it we kind of got to do a little
bit of bookkeeping and make sure that we can get this stuff just working out of the box.
Just making sure that we have these components at all.
So that's we're going to start with we're going to make to serve a new component.
We'll make the survey form component and then maybe at that point in time we'll start thinking about
how we're using redux form.
All right so back inside of our code editor I'm going to find my SIRC component's directory.
At this point all the files that are in here are kind of disorganized but now that we've got a big set
of components coming in that are all related to a very singular topic I'm thinking that maybe we should
combine all these components related to the form into a single folder so that it's really clear clear
where to find components related to the surveys that we're creating.
So I'm gonna make a new folder inside the components directory called surveys and then inside of there
we will make our root components which is serve a new.
Yes remember we had so the survey knew was going to be the top level component responsible for showing
the survey form and the survey form of view and it's real job is basically to kind of toggle between
both of these different forms.
OK.
So back inside the survey new I think that will just take care of a little bit of the boiler plate inside
of here and then we'll take a break and continue in the next section.
So let's put our boiler plate together.
The first thing I want to do is create a class based component.
So in this case I really am quite sure that we need a class based component.
And once we start to implement the functionality of toggling between our two forms you'll see why.
OK.
So at the top we will import react and components react we'll make our survey new which extends component
will at our render function on for right now we will return a div with just the text Servais new.
And then we'll export default survey knew at the bottom.
OK.
So again just usual boilerplate for creating a class based component.
Now before we end the Section One last thing I want to do just to kind of stuff as much code and work
inside as your side of this video as we can.
I want to flip back over to our outtalk G-S file and show this component inside of our re-act writer
side.
So we're going to go back to our components Aptos G-S file.
Remember this is where we set up all of our different routing logic for our application and make sure
that different components are visible on the screen.
So inside of here we'll import survey new from surveys survey new.
So unlike the dashboard and the landing pages this time the component that we're attempting to import
sits inside of a file called surveys.
And so that's why we've got the extra step in here now that we're importing survey knew we can dump
the old dummy survey new and then I'm just going to double check on our route and make sure.
OK.
Looks like that's still the right component in here.
OK.
So let's do our quick little test make sure that we don't have any typos or anything like that.
I'm going to change back over to my application and when I do I should see a reload here.
So I'm going to forcibly reload.
OK.
There we go.
So I've got survey new with an exclamation mark which is definitely from our new component.
OK.
So I think that's it for getting us started.
Let's take a quick break.
We're going to come back the next session and start tackling some this form logic.
So I'll see in just a second.