We now have our producer properly setup for catching our action type.
So now we just have to update our state object with the new text that the user just typed in there.
So remember the entire goal is like the overarching theme is we are using the reducer to store the current
value of the text input.
So by default is an empty string but eventually the user is going to start typing in their email and
we're going to catch that right here.
All right.
You're on this line when action comes across our inducer.
Now as we have learned whatever value we returned from the producer will end up as our application state.
Right.
So we need to somehow update our state object and then return it from this line right here.
So eventually we're going to end up with something that says like you know returns state or something
like that.
Right.
The question is how do we update our state object.
How do we do it.
So first let me show you a little diagram to help you understand what's kind of going on behind the
scenes like what redux is actually doing.
So this is what Reducto is actually doing whenever we call an action creator or like for a better piece
of terminology dispatching action.
We take our slice of state like the state that the single producer like this author Duzer.
That's what this is supposed to be right here.
We take this slice of state that the reducer last publisher like last produced we throw it into the
producer along with the action and then out we get this like a new fantastic piece of state.
OK so some piece of state is going in.
New piece of state is coming out like that.
That's it.
OK.
Now there's one very interesting little detail in here.
OK so this is the expanded diagram still same diagram on the top half.
I just added on a couple of boxes on the bottom after our reduce or runs redux looks at the old value
of states and the new one.
So I'm talking about like this slice of state up here this like initial arguments the reducer and the
return value.
It looks like the two of them.
So new state right here as I have written.
Is this like new slice of stay right here old state would be the old slice of state at the top left
up here.
And it says is the new state equal to the old state and specifically like specifically with a triple
equal sign right there.
Specifically chirpily equals if the result of that is yes.
If the two of them are equal then redux assumes hey it's the same object.
I guess nothing happened.
No day to change nothing happened.
I don't have to worry about telling any component's about what is going on here.
On the flip side if the two if the equality fails so if they are like know not equal and I probably
got the colors here a little bit backwards of the green red.
But whatever.
So if they are not equal then redux says aha something must have change.
This is a new object.
They are not identical they are not equal.
Something must have changed.
That means the user or Seamew the developer intended there to be some new piece of state.
I must take this new state and send it off to all the different components out there in the wild.
Now the real key the real key here is this triple equals comparison here in the middle.
That's like the whole key to this.
So you might be paying yourself.
Oh yeah you know like redux is going to compare these two objects.
Hey if we just put like a new value somewhere on that object it's not the same object anymore right.
Like well maybe not quite.
This is where we start to really go down the rabbit hole a little bit.
OK this is a little bit of pseudo code here that I'm trying to make like a singular point just like
one point here.
Let's say that I take some variable declaration some say like constant equals.
New objects are like empty object.
And then I say conc new state equal state.
So now I have the variable state which looks at an object and I have the variable new state which also
looks at the very same object they're both pointing at this object right here and now say new state
color equals red.
Ok so I am setting a property on this object right here.
Color equals red.
Then if I said new state equals equals equal state what would I expect to get back.
I have changed the objects that new state is looking at what I expect to get back there.
Well the answer to that is by really understanding how javascript compares equality between variables
with this triple equal sign.
So it's like one or two more slides here.
Just bear with me for a second.
So this is a rant on the left down side.
Same diagram on the right hand side diagram of kind of what's going on with javascript behind the scenes.
So with the first line with a state an empty object.
We are now.
We have now created an object in memory.
Like on your devices ram we have an object in memory and we have a pointer that is like a variable essentially
that is looking at that object we're saying hey here's an object in memory and I have a reference of
state to that object.
Then with a second line here when we say new state equals state we are not making a copy of the object
that is like that is the super mind boggling part about javascript to that that you really got to wrap
your head around.
We are not creating a new object here.
The same object is city memory.
There is only one but both state and new state are looking at that object finally.
Or if but next when we say new state color equals red we still only have one object and we did not create
like a new mystery object like nothing copied out for us here.
It is still just a singular object so new state is still looking at the object with a property color
in a value of red and now state is still looking at the exact same object.
So at the bottom at the very last step here when we say hey is state triple equals you state what is
happening behind the scenes is javascript Assane.
I have two pointers like I'm two points here that are pointing out some values.
Is are they both looking at the exact same object in memory.
And the answer is unequivocally yes unequivocally yes.
So the entire point this lecture entire thing I'm trying to say here is inside of our reducer when we
try to update our state object with this you know email property and we take whatever text that the
user just entered.
That's going to come in from this action right here.
And we try to update that state object if we do not modify it if we do not update it in the correct
fashion.
We are not going to redo this is going to think hey nothing actually change is going to think no change
actually occurred.
We don't need to look at this just yet.
Sorry nothing actually occurred.
So we need to figure out a way to make sure that redux understands that hey we updated our state object
but something did change here like something actually did change.
So that's what our big goal here is we're going to take care of the next section.
But the very last part of this lecture that I really want to convey to you is I should probably bookmark
this file right here.
So this is a part of the redux library.
So you know I'd get hub react J.S. redux and I'm in the source for the combined reducers call.
So combine reducers Yes I should really bookmark the saying because I end up setting up sending out
just all the time to try to convey this whole topic of how redux compares a quality song just go down
to the very bottom really just want you to see here is like visual proof of what I'm what I'm trying
to convey here and that is you have to make a new object or you have to make sure that redux understands
that you change the value.
So this is like the real magic line right here like these two right here.
This go to appear is what takes this the action that you have dispatched and sends it off to all the
different reducers inside your application after each reducer runs has changed is declared as did de-value
actually change like is the thing still here is it has the value actually changed the piece of State
of the reducer hasn't actually changed.
And then eventually a comparison is made and said hey has anything actually changed.
If it has returned the next date.
Otherwise return the old state.
This is like kind of the root of redux where this comparison is being made.
Looking at this stuff isn't super necessary for understanding I do here.
I just want to point this out if you have any interest in kind of diving into the source a little bit
more.
You can always check out that combine reducers call.
OK.
So let's take a quick break come back in the next section.
Figure out how we actually implement all this knowledge about how redux expects to redux expects us
to see our state object changed.