Instructor: In this section,
we're going to take advantage
of the Redux Store that we just wired
up to our application by adding in Redux Form.
The Redux Form setup process is gonna
start inside of our "reducers", "index.js" file.
And, then we'll come back over
to the signup component
and make use of the Redux Form helper.
So, inside of my "reducers", "index.js" file,
I will import the Redux Form reducer.
So, we'll do "import",
"reducer as reduxForm",
"from"- actually, you know what,
let's name that something a little bit better.
Let's do "formReducer"
and we'll get that "from 'redux-form'".
So, quick thing here,
if you've not seen this before,
it is renaming an import statement.
So, the helper that we want to import
from Redux Form is called "reducer".
But, if we just import a variable called "reducer"
into a reducers file,
well, that'd be a little bit unclear.
So, we take care of that
with this "as" helper that allows us to
rename this reducer variable
to "formReducer" instead.
So, now we can easily wire this up
to our "combineReducers" call under the form key,
which is required to do with Redux Form
and we'll call it "formReducer".
Okay, so that's how we set up Redux Form
on the Redux side of things.
Now, we can flip back over
to our "components", "auth", "Signup.js" file
and we can start making use
of Redux Form inside of here.
So, at the very top we can get started
by importing "reduxForm"
and the "Field" component "from 'redux-form'".
Now, remember how we make use of Redux Form.
We first add it to our component export statement.
We tell it about the different field names
that we're going to call this thing,
and then we can make use of
the field component inside the component itself.
So, we'll first go down to the bottom.
Here's our "Signup" statement,
We'll do our "reduxForm".
And, remember, it has a signature
very similar to the connect tag.
So, we have to provide an options object
to this thing, and inside of it,
we have to give a name
for the form that we are creating.
So, in this case, we'll call this form simply
"signup", like so.
So, now that we've wired up the form,
we can make use of that "Field" tag
to create the two inputs
that we're going to need
for the Email and the Password.
So, let's first take care of our Email.
I'm going to place my "Field" tag,
and I'm gonna give myself a little bit
of space to add some props inside of here.
So, on the "Field" tag for the Email input
I'm gonna give this field a name of "email".
I'm gonna give it a type of "text",
and then I will tell Redux Form what type
of component I want it to render.
So, I want it to render a normal text input.
So, all I have to do is say "component", "input".
Now, we can repeat the same process
on the Password field as well.
So, underneath that label,
I'll add on a field, as well.
I'll give it a name of "password".
I'll give it a type of "password"
which is going to make sure anytime
someone enters a character in here,
it shows the little dot instead
of the actual character.
And, then we will also tell it to
use a "input" component, as well.
Now, when I save this file,
I apologize for that jump,
it's my code reformatter kicking in.
I know it's probably a little bit annoying to
see my code jump throughout the course,
but, honestly, it's usually for the best,
because it makes sure that
when you are looking at my code,
you see crystal clear, very well-formatted code.
So, I think it's worth the trouble.
All right, so we've now got a "email" input
and a "password" input.
Let's now flip back over to our browser,
and we're gonna see how this looks.
So, now back over here,
we have "Email" and "Password".
If I type inside of "Email",
I get normal characters,
and if I type inside of "Password",
I get the little dots that we would expect.
Now, one thing I wanna point out here is
that you'll notice a warning down here that says,
"Input elements should have autocomplete attributes".
Depending upon the version of Chrome
that you are using,
or, if you're not using Chrome,
you may or may not see this warning.
But, essentially, the browser wants to see us
adding an autocomplete property
to these two inputs to help our users fill them out.
So, we need to to have a quick discussion
about the autocomplete properties
we're gonna use here.
In the case of "Email" and "Password"
on specifically the "Signup" form,
we don't really know what autocomplete the user
should be prompted with,
and maybe they want to use
an email that they've used
in this browser before,
but, personally, I don't know.
I want to leave it up to the user
to decide what email and what password
they wanna put in here.
And, I don't really want to
show them any autocompletes,
'cause if I show them an autocomplete
on a signup form, that might make them think
that they've already signed up
to our application before in the past,
which might not necessarily be the case.
So, I'm gonna add an autocomplete prop
to both these fields of "none",
which means "do not show any autocomplete stuff".
And, little typo here,
the autocomplete should be "auto", all lowercase,
and then a capital C for "Complete".
And, then, we'll do the same thing
down on the second field, as well.
Okay, so now, if we save this file
and flip back over to the browser,
that warning message should go away.
Very good.
You might still see some stuff like this,
the set timeout, that's totally fine.
We can ignore that,
and I think that we're totally good to go.
So, let's take a quick pause right here.
We'll come back to the next section.
We're gonna talk about how we're going to
handle submission of this form,
and we'll also start talking about
adding in some styling to make it all
look a little bit better than it looks right now.
So, quick break,
and I'll see you in just a minute.