In the last section we had a discussion about how a redux decides whether or not you have updated your
application state introducer the end result of all that discussion was a realization that if we want
to update our state object we cannot just modify our existing object so I can not like the whole thing.
I'm trying to convey here is that we can not do something like state DOT email equals action dot payload
and then return state.
That is like the whole goal here.
This is what I'm trying to convey.
If you do something like this redux is going to compare the old value of states and a new one that you
have returned.
It is the same object in memory and so redux is going to think that nothing actually changed within
your application and no updates will be sent off to your components.
So instead of returning our state object here we have to return something that makes redux just kind
of think that we made a change.
That's like the whole goal here we're just trying to kind and trying to trick it just a little bit into
thinking we actually change the value here.
So this next part I don't really have a fantastic lead in.
So we're going to throw the code on the screen and just talk about how it works.
So I'm going to take a little bit out now the return statement right here.
I'm going to do a little bit of an update.
I'm going to make an object and say dot dot dot state e-mail is actually not payload and then close
off the object like so you can read this line right here as plain-English it says make a new object.
That's the outer parentheses are seeing outer curly braces.
Take all of the properties off of my existing state object and throw them into that object then define
the property email given the value of action not payload and toss it on top of whatever properties are
on that state object.
OK.
So if email or if the state object already has an e-mail property it will be overwritten by this one
that we are trying to add in on top here.
So by default when our user first runs we're going to have an initial state of e-mail is an empty object
right.
Like that's that's where we start out with.
And then the user is going to like select the email input and they're going to press the like Esky right
for Steven at gmail dot com or whatever it might be.
We're going to get an actual payload of S like the string.
Yes.
We're going to hit this line of code right here.
This line that dot dot dot state is going to come across as e-mails empty string.
We're then going to throw on top of it e-mail with a value of s.
It is going to overwrite the existing property on the state object.
OK.
So the last part about this that's a little bit about what's going on inside of it.
The really critical part though is the fact that we created a new object right here so we made a brand
new object.
We took all the values off the state object and threw them right in there.
So because we made a new object return this from the reducer redux is going to say Aha.
OK.
And I see that you have a new value here.
Is this brand new object right here.
Equals equals equals equal to state.
And of course because this is a brand new object a new object is allocated in memory and no they are
not equal.
Therefore redux knows that we actually change something.
So there's a lot of build up from one simple little hand because I think that's very much the whole
story.
That is what is going on with this line of code.
That is why we use the dot dot dot state here that is like I'm trying to convey when you return a value
from reducer if it's an object you gotta make sure that you produce a brand new object.
Otherwise Reducto is going to think it's the same object doesn't have to actually do anything.
It was really a mouthful.
OK so now we get back on track or start writing code again.
Reducers should now be producing the correct state whenever a user types in the key like you know types
in that e-mail address every single key press that they put in is going to call or sir.
We're going to reformulate our off piece of state.
And then when we need to send that back down into our component.
So that's what we need to do right now.
We need to make sure that this piece of state ends up back inside of our log in form.
We've done that a couple of times now by using the map state to prop's helper from the re-act redux
library.
So remember the map state to prop's function is how we end up getting some piece of state into our component.
In this case our log in form.
So the first thing we have to do is define our map state to prop's function at the bottom.
So down at the bottom of my log and form of the fine map state to prop's this we called with our global
application state and it is our job to just return the property that we care about from that from that
state object.
So I think that right now the only property we really care about is the e-mail.
So I'm gonna say give me that e-mail.
It's coming from state DOT DOT e-mail.
Remember it is specifically off because that is the value that we assigned or reduce or to in our combined
users call and the reducers indexed J.S. file and then reducers what is actually producing this e-mail
property right here after defining that state to prop's we're going to pass it as the first argument
to our connect function.
So map state to prop's
like so and now inside of our component we have access to this stuff.
Props.
Email is the value that was produced by the producer.
So now very last step inside of our input I'm going to add on the value to say hey this is what your
value is.
You're not telling us what the value is we're telling you what the value is and it's going to be this
probably e-mail like so.
So.
Wow.
How was a lot of work to just make one text him put a lot of work.
Let's do a quick test in the simulator.
Just make sure it's working.
So you know it's like my input type in something and yep it's worked in just the way I would expect.
You might click on the passer as well and type in here.
And you might be asking yourself Hey Steve why does this work.
We didn't wire this up with everything.
Well yeah it works but we can't actually pull or you know we were not reading the value out of it.
Right.
We're not getting the value out of there.
That email field is working as we expected to user presses something we update our application state.
And then at any point in time when ever we want to get access to that e-mail the text that's actually
in there we can reference state DOT offcut email.
OK.
So we are now done with that first input.
I think there's a good time to take a break to do a quick review on what we've done and we're going
to come back and do the exact same thing for the password.
You know like I said we're just going to drill this stuff in one way or another.
Let's take a quick break do a quick review and then knock out the password field as well.