In this video we're going to start working on our create stream form right here.
So the idea is that we're going to enter in some title for a stream.
Any description when we submit it we're going to want to reach out to some API server that we have not
yet put together but we will very shortly and create a new record that says that a given user has created
a stream.
Now in order to put this in we're going to be using a library called redux form redux form is kind of
notorious I guess.
On one hand some people think it's kind of challenging to understand but on the other hand it does a
ton of stuff for you automatically and it makes life pretty darn easy compared to if you try to put
all these different forms together by hand and integrate all that stuff with redux.
So it's kind of a mixed bag depending on your attitude I suppose.
At any rate we're going to figure out exactly how it works.
Now we're going to first begin by installing a redux form into our project.
So I'm going to change on over to my terminal.
I'm going to start my server and I'll do an NPM install dash dash save redux dash form like so and then
I'll just go ahead and let that do its thing while it's going on.
We're going to take a look at a quick diagram or two.
All right.
So I want you to first think about how we've been handling forms throughout this entire course up to
this point in time at this point.
We have always been making use of class based components these class based components have been making
use of component level state.
So we had some states object that recorded the current value of an input element.
We then took that value out of that state object on the component and we essentially pushed it into
that input element inside the dam.
Remember the idea here is was that we wanted to tell the input element what its value was and that we
did not want to store any of our state or our D data inside the dome itself.
Then whenever a user changed that text we would have an on change callback.
The onchange callback would essentially call our set state method and update our component level state.
So we had this little cycle here that just went on over and over and over again.
And the real pinnacle are the cornerstone of it was that our class based component held the real truth
of data inside of our application that state object knew what the true value of that text input was.
So once we start making use of redux this little approach right here is going to change ever so slightly.
Remember that in general with redux we want to hold all of our data inside the redux store.
And so no longer are we going to have class based components that have a ton of state on them that are
going to manage these different input elements.
Instead we're going to store that data inside of our redux store.
And any time a user changes a element we're going to probably call an action creator that's going to
attempt to change that data inside of a redux store.
Now let me show you a quick diagram that can help you understand how a redux form is going to automate
some portions of that flow OK here we go.
So just as before we might have some input element over here on the far right hand side this input element
is going to be assigned a value.
And in onchange handler by our application because we never let the DOM hold information about our app.
Instead our app holds information and then we essentially push it into the DOM.
Now everything on the left hand side is essentially going to be a little bit different.
So we're going to have some redo cert that's going to hold all the states of our different forms inside
of our application.
So that might be the value of some input element or the selection of some dropdown or the current checkboxes
that are checked inside of application.
Essentially all of our foreign data is going to exist inside of our redux store and all that form data
is going to be maintained by a reducer.
Then in order to make sure that we can get the data from that store into our input elements of whatever
type they are we're going to essentially have something like Map state to prop's that's going to take
that foreign data out of the redux store and get it into our component as props.
And then we're going to make sure that you and I take that prop object and all the different values
inside there and pass them into our different input elements as values just as we did before when we
were making use of component level state then any time a user makes a change to an element we're going
to have some callback handler inside of our component that's going to probably an action creator and
try to update the form data inside of a redux store.
And here's the great thing about this entire scenario redux form is essentially going to do all of that
stuff for us because it is so incredibly repetitive.
I bet you can kind of tell at this point in time that every single time that we want to change data
inside of a redux store what do we do we call an action creator.
And any time that you want to get data out of a redux store into a component What do we do.
When we write a map state to prop's function.
So those are two pretty repetitive operations.
And so we can essentially just abstract all that work away from us and have redux form do it for us
automatically.
So essentially redux form is going to have a producer that we are going to wire up to our application.
You and I are not going to write this reducer this is included with the redux form library.
We're going to take that reducer and wired up to our store.
We are not going to write any outstate to prop's function redux form is going to essentially do that
for us automatically.
You and I are not going to write any actual creators redux form is going to do that for us automatically.
The only thing that you and I really have to do is make sure that we eventually get some form information
down into some given input element and make sure that that input element understands that it needs to
call some callback handler.
Provided I can buy redux form anytime that it gets changed.
So this is essentially what is going on behind the scenes.
It is still making use of the entire redux system as you understand it but it's done all for us automatically.
All right.
So let's flip back over toward terminal.
It looks like the installation is complete.
I'm going to start my application back up with NPM start and we're going to take a quick pause right
now when we come back the next video.
I want show you the redux foreign documentation very quickly because it is absolutely outstanding documentation
and I really suspect that you're going to want to reference it at some point in the future for your
own purposes.
And then after that we're going to start to wire up relax form to our application so quick pause and
I'll see you in just a minute.