In the last section we spoke a lot about all the different components we're going to use to put together
the overall survey form in this section we're going to continue by talking about a very key technology
or a key library that we're going to use to wire this form together and make it work nicely.
Now the library is called redux form.
I've taught redux form in several different courses and in all those different courses I've usually
just kind of dove in and said hey we're going to use redux form.
Here's how it works and here's what we're going to do.
Let's just write some code to make it happen.
But I found that redux form is not really the easiest thing in the world to use.
And so I've got a lot of pushback from people who said Stephen why are we using redux form this is crazy
it seems like it's making life really challenging.
So this time around and this course we're going to do things just a little bit differently.
We're going to first start off by talking about how we might handle this form without access to redux
form at all.
And then we're going to talk about some of the problems that might arise out of that and then we'll
talk about why we're using redux form and what it's really doing for us that's going to make our lives
so easy.
So this is another location where if you don't want to hear about a lot of lecturing or things like
that feel free to pause the video right now.
Continue in the next section.
We're not going write any code here.
We're just talking about what redux form is and why we're using it.
So again if you don't wanna hear it pause continue on.
Otherwise let's get to it.
OK.
So again we've got a lot of different components floating around here.
Right.
Lot of different components now to be clear we are using all these different components to make sure
that this form can easily be updated or changed in the future.
Yes we could build this entire form inside of a single component if we really had to but that would
end up with some really nasty looking code.
So instead we're going to break everything out to use these separate components.
Now I took the liberty of looking at all these different components.
I thought about how they kind of are wired together or what the relation between all of them are.
And I came up with a diagram that kind of looks like this right here.
So at the very top we've got our app component that contains our re-act router.
And inside there we've got our logic to show the survey new component.
And of course we haven't really wired up any of this stuff yet.
We're going to be doing it very shortly.
Now we had said that the survey new would really serve as a wrapper around the survey form and the survey
form review components the survey forms purpose is really just to wrap and display all the different
fields that should appear on the screen and each of these fields are the actual labels and inputs that
the user is going to type into.
Now the survey form of view is where we're going to present the user their inputs and say like hey are
you happy or are you ready to make this up and do you want to actually send this out.
Now let's think a little bit about kind of the relation of data inside of the structure right here.
Let's kind of think about how it's all put together.
So the survey fields these contain inputs that a user is going to be typing into and that's going to
produce some data.
Right.
Like the actual form data and at some point in time when a user clicks like Submit or take me to review
screen we want to somehow transfer the data that is being produced by these components right here from
the user typing into them into the survey form review.
So we want to get data from here over to here.
Now let's first sit down and think about how we would approach this problem if we did not if we were
just using react like just react.
No redox no redux form just react by itself if we wanted to get some data from these fields over to
this component.
We would have to store all this data right here on the lead.
Nice.
What's the best way of putting this like the lowest common parent.
So basically the lowest common parent is the suit serve a new component right here.
So the survey new component would store all the inputs all the input data and they would pass down that
data as props to the survey form of view.
Now already just thinking about that.
Things get pretty nasty because that means that every single time a user enters some text into a survey
field we have to somehow communicate that data backup to serve a new so that it can pass data down to
survey form review.
And so just thinking about that.
I mean even just saying that process to you you're probably thinking like what what like how would we
do that.
And yeah exactly that's the point.
Communicating from the survey field directly over to the survey form view component is not easy.
It's tough and it would end up for some really nasty looking re-act code look at so let's think about
a very close at hand solution or like a very easy solution to this which would be making use of a library
that we've been using and like the last two hours as we talked about the sap.
So specifically thinking about using redux here.
So in the redux world communicating from the survey fields over to the survey form our view starts to
get a lot easier and here's why we'll say that maybe every single time that a user enters some input
into a survey field maybe that calls an action creator and updates the state and redux.
So maybe we'll say that typing typing calls action creator updates state in redux store.
So maybe the redux store will contain the text from each of these fields.
Well if we do that then communicating that data down to the survey form starts to get really easy.
We can connect the survey form of view to our read X store just as we have done previously using that
connect helper.
So we would say in this case survey form review can use connect to pull data out of redux like some
now this process right here is something that is really at the core of redux right and this is something
that we've spoken about many times the entire point of redux is to put all of our data at the very top
and allow any component anywhere inside of our hierarchy to pull data out of that store without having
to worry about really complicated system where we pass along like a bunch of props all the way through
this chain or something like that.
So this would be a very normal a very standard use of redux as I've just described it.
But one when we really sit down and we start to think about wiring this together well think about it.
That means that we would have to put together like all these different action creators we would have
to create a new reducer inside of our store.
We would have to wire up the survey form of view and attach that map state to props to it.
We would have to probably figure out where to add in some custom validation logic because obviously
at some point we want to like validate the data that the user is entering into these fields.
Right.
We want to make sure that the user actually submits data before we allow them to transition from the
survey form over to the survey form of view.
And so when we really think about building the solution with redux Yeah you know I can definitely imagine
it happening but it feels kind of complicated.
It feels like there might be a lot of code there and so that is the exact problem that redux form is
trying to solve.
Redux form is doing all of this stuff all the stuff.
It's wiring up the action creators.
It's putting the data into the redux store.
It's pulling data out and giving access to that data to other components inside of your app and it's
doing it all for you automatically.
So redux form is not really you know bringing anything new to the table per se.
They're not like magically producing some brand new feature or some magic for us or anything like that.
They're not expanding redux in any fashion all redux form is doing is saving us the trouble of having
to go through this entire process through the use of a couple of helpers that redux form contains.
OK.
So that's pretty much it.
That's like the summary.
That's why we're using redux form we use redux form so we don't have to wire up all these very manual
pieces that we would have to do otherwise in practice.
You know for very simple forms I will say that redux form sometimes introduces more code than you save
for like a very simple form like you know for saying just entering these data and then click submit
and that's it.
You know we're going to go post this data to some server or something for forums like that redux form
kind of is overkill.
But as soon as we start talking about any particularly advanced form or complicated form like the type
that we have here where we've got what's kind of called a multi-page form or a wizard type form it's
a form that has multiple pages or multiple components to it.
As soon as we start talking about this type of situation we want to be thinking about redux form because
that's going to be a lot easier to use redox form for this than trying to do it by scratch or from scratch.
OK.
All right.
So I think that's enough about the purpose of relex form.
The last thing I want to tell you about is just a little bit about what's going on internally with redux
form specifically during the installation process.
OK.
So here we go.
This is a diagram of redux.
So we use redox to create our store and the store is where all the data lives inside of our application
we modify or update that data through the use of our reducers remember.
And so right now we've got a single reducer called Author douceur.
Now looking back at this form right here I said several times like yeah action create or update the
data inside of redux update the data inside the store.
And so as soon as I start saying that stuff you want to be thinking about actual creators actions and
reducers and so clearly if redux form is kind of getting involved in this redux process it must be doing
something with reducers or something like that.
That's kind of like a reasonable assumption.
And so that is totally accurate when redux form is handling all this automatic stuff or it's doing all
this stuff for us automatically.
It is still using redux under the hood to do it for us.
So when we install redux form we are going to wire up a form reducer.
It's called a Form reducer from the redux form library to our store.
And that's what gives redux form kind of like a handle directly into our redux store and allows it to
take care of all this busy work for us.
So again behind the scenes I can't stress it enough redux form is not doing anything special for us
it is just saving us from having to write code that we would be writing anyways.
That's all it's really doing.
OK.
So hopefully now the purpose of redux form is a little bit more clear really at the end of the day it's
time savings.
It is keeping us from having to write stuff that we'd be writing anyways.
And of course there's you know a lot of just really best practices baked in there and a lot of nice
features that are otherwise kind of complicated to build out yourself.
So with all that in mind now that we have a better idea of what redux form is doing for us let's take
a break.
We're going to come back in the next section.
We're going to install a redux form and then we're going to wire it up to the redux side of our app
with the form reducer.
So I'll see it in just a second.