In the last section we finish wiring up producer to work with the email field.
How do you this one very quick review on what's going on.
And we're going to speed through the password implementation as well.
OK.
So this is our flow that we're going through every single time a user typed something inside an input
field.
You start at the very top left a user presses selects an input field and type something on their keyboard
that pops up on the screen the instant they do that we call an action creator with the new text that
the issue just entered the action creator.
Returns in action.
The action is a plain javascript object that has a type property and a payload property.
The action is sent to all the different producers inside of our application.
Right now we just have one the author douceur producer calculates a new application state.
So it says OK I just got an action.
Here is a new version of state taking this action into mind.
Redux assembles the state from all the different reducers in our application.
Yeah Right now there is only one but in the future there will be more.
That state is sent to all the different components our components render with new application state
and when that happens our input has a value set to this process.
Email then everything finishes rendering everything on screen gets updated and we sit back twiddle our
thumbs and wait for a new change initiated by the user.
So this fluorite here just happens again and again and again throughout our entire application.
Everything follows this flow right here in redux everything follows this flow.
OK so again we have wired up our email input.
We need to do the same exact thing for our password input as well.
I'm not going to drag out the implementation here this time around is going to get through it pretty
quickly.
So let's wrap it all up inside of this section on the input.
The first thing we need to do is add in an event handler will say on change text run a callback of.
On password.
Change it because we are going to reference this in that callback.
We need to bind the context.
Now inside this file we will define on password change.
It will be called with the new text of the input when it gets called.
We are going to call an action creator called the Stop proper start.
Password changed and yes it is very tedious to have one action creator for every property here.
We will talk about ways or we will actually refactor another form in just a little bit to show you how
to handle many different properties with just one action creator so we'll get through all this boilerplate.
So we're going to call the action creator called password change.
We have not yet created that action creator but of course we're going to do in just a second.
So I'm going to continue wiring up this file assuming that it actually exists.
So from our actions file I'm going to also import password changes and also define that actual action
creator.
So inside of my actions index start J as File we will first define our action Kreator
and from there I will return an object with a type property of password changes and a payload of the
text so the text is the new password that the user just entered.
I have to also define my password type here so every action creator has its own singular unique action
type and I do that all inside of my type's file.
Let's first up open up the types file.
So Type start.
Yes we will define our Konst of Password changed.
A sign is a string.
Again remember the string is not important.
The value can be anything we want.
It just has to be something unique.
So I'll save this file are done inside of here and enclose it.
I need to import the password changed up at the top because I expect this line to get pretty darn long
pretty quickly.
I'm going to line it here as well like so
so here's my password changed.
Cool.
Everything looks good in here.
Now I'm going to flip over to my author seducer.
Inside the author inducer.
We need to also import that password change type and we're going to add a case to catch that type.
So all I will again.
New Line this one as well.
Import password change.
I'm going to add on a new type or in a new case to watch for that type
and when we come across that type we're going to update our state objects so we will return dot dot
dot state.
So take all the properties in our state object toss them in here and also throw on password of action
dot payload and the last thing we should do.
We don't have to do as per se but I recommend you do.
I need to update my initial state object to have a password as well.
So by default password starts off as empty string again I do not have to default this year.
When our application first executes our first renders to the screen if I have a password of undefined
and I try to pass into the input it's still going to render just A-OK.
The real idea behind defining this password and really even the e-mail ahead of time with empty string
is to just let other engineers in the future know hey this reducer is responsible for an e-mail and
a password property.
Like that's what it takes care of all right now the very last step is all flip back to a log and form.
We're going to update our map state to prop's function at the bottom and then pass that to our input.
So at the bottom here's my map stage props.
Oops mouse jumped.
So I'm going to also take a password property from state DOT DOT DOT password and now my phone has access
to this dot props up password.
I noticed that I am duplicating state DOT off here and even state is getting duplicated quite a bit
as well.
This will be a pretty reasonable time to use some yes 60 structuring if you like too.
I'm just gonna leave it as is right now because I know that section is already getting quite long so
I'm going to try to wrap things up here.
So the very last thing we need to do is on top of our password input.
So here it is right here.
I'm going to give it a value of this process password OK.
So one last time remember repeating the cycle over and over again user type something.
We update the value in the reducer.
The new state gets sent back to our component and then we can assume that new state inside of our component.
That's the whole thing repeated over and over and over again.
OK.
So I do a quick refresh here just to confirm that.
Yes.
No big typos.
Everything still runs.
I can help.
Looks like I made a mistake in my fall at the top we imported password change the action creator.
I did not come back through and add it to the correct function at the bottom.
Let's do that really quick.
So I'm going to take password changed.
I'm going to find my connect statement at the bottom and give it another action creator of password
change like so.
All right let's do another refresh.
I'm happy we did that little test.
Now I can update my e-mail and I can update my password as well.
OK.
Now we're good to go.
Let's continue in the next section