In the last video we discussed exactly what a reducer is.
Early some high level notes on it.
It's now in this video.
We're going to flip back over to our square screen component right here.
We're going to start to refactor it to use a reducer instead of these separate independently managed
state variables.
So in general anytime we make use of reducer we're either using a reducer to manage our state or we
are using this you state hook thing instead.
One of the other.
We're not going to have any scenario where we have identical variables being managed by both you state
and reducer.
OK.
So to get started on the first start to clean up my square screen component specifically I'm going to
go through here and delete everything related to our current management of state.
So we're going to essentially write out all this use reduce our stuff from scratch entirely from scratch.
I highly recommend you do the same and delete this code along with me if you want to keep a backup of
everything we've written so far.
You can always create a duplicate of these square screen dot J.S. file.
OK.
So let's start on a little bit of cleanup.
We're going to delete everything related to state inside this component right now.
So going to first find square screen all then take these first three lines to highlight them and delete
them after that.
I'm going to highlight the entire set color function and delete that as well.
And then I'm going to go through all of my on increase in on decrease callbacks right here and I'm gonna
delete these set color call inside of each of them.
I am going to leave behind the arrow function you see right there.
I'm going to delete.
Just set color in its arguments.
So delete set color delete that.
There's three or five and six and you'll notice that I've got some syntax errors here because we have
some ERO functions without a body that's totally fine.
We're gonna come back and fix these up in just a little bit OK.
So now back at the very top of the file we can start to add in our code to use a reducer inside this
component.
It's the first thing we're going to do is fine line number one right here rather than importing you
state from react.
We're gonna delete that and instead we're going to import a different hook function one called use reducer
this use reducer is a hook function very similar to how it used state is a hook function as well remember
a hook adds in some additional functionality or some additional capability to a functional component.
So we're going to use use reducer to add in the functionality to essentially use a reducer inside of
our square screen let's first take a look at how we call this use reducer function so inside of square
screen I'm going to write out some syntax that looks rather similar to you state so I'm going to say
const I'm then going to place those square brackets and I'll say state dispatch then my equals sign
and I'll call use reducer I'm going to pass in a reducer function we are about to write this we have
not created this variable yet this is going to be the reducer function you and I put together it's going
to add that in and just a moment but right now I'll add in the argument right away then as the second
value we're going to put in our initial state object.
So this is very similar back to this diagram right here.
Remember we said that we're going to have one object that has all of our state in it.
Remember back when we were using you state.
Just a moment ago when we called you state we had to put in an initial value for each different value.
So very similar when we make use of reducer.
We have to provide an initial value for our state object.
So this is where we're going to essentially set the tone for what our state looks like.
In our case I think that we should have an object that has a red property that'll start off as zero
a green property that starts off a zero and blue that starts off as zero as well OK.
So now right away we can immediately see that we've got one variable right here called state state initially
is going to be exactly equal to that object the state variable is going to essentially be how we access
our different state values.
So before we had those three separate different values floating around of red green and blue now instead
they're all combined into this one single object so once again just to be really clear if we were to
do a console log of state right here when our component is first shown on the screen we would see inside
of our terminal that object right there.
So that's our starting initial value of state OK.
Now that we've set all this stuff up we now need to just do one other thing believe it or not we have
to define our reducer function so I'm going to define my reducer function right above my use reduce
or call I'll give myself a little bit of space up here and I'll define a new function called reducer
OK.
Now technically we can define this function inside of square screen but usually by convention we define
it outside of our component in the reason for that is that remember argument number one to our reducer
is going to be our current state object.
That's what argument number one it's our object that has all of our different state inside of it if
we define our reducer function inside of square screen we will want to refer to that first argument
right there as state because that is gonna be our state object but if we have that argument right there
that's called States it'll be very quickly confused with this other declaration of state over here.
Now technically this would not result in an error but it's gonna make life for you really confusing
because you're going to have essentially two different variables called state floating around the inside
of this one component.
So in general I recommend for you to define the reducer function not inside of your component but just
maybe right above instead it's gonna make your life just a little bit easier
OK.
So now let's continue with art reduce our function again our first argument to it is our state object
so our state object is that thing right there red green and blue our second argument to it.
So this is argument number two that we just saw inside that diagram is gonna be the object that describes
how we're supposed to change our state object it describes the update that we want to make so it would
make a lot of sense to call that second argument something like how to change state objects but that's
a really long name.
Usually by convention we instead call that second argument action instead.
So the word action really means and what you should really think of it is how should we change our state
object.
What change are we making.
Are we increasing red or decreasing it.
Are we increasing blue decreasing green.
What are we doing.
That's the job of the second argument.
If you see the word action just think to yourself This is an object that tells me how I need to change
my state object it's now inside of here we're going to inspect that action object and make some change
to our state object using it we usually do this by writing out a switch statement very similar to the
one that you just saw inside of our set color function before we worry about writing out that switch
statement however.
I just want to reiterate and put down some comments inside this function to remind myself exactly what
state is and what action is right.
Hearing us say that state is going to be equal to an object that has a red property that's no green
that's no in blue.
That's a number as well.
And notice this is not really valid javascript right here.
This is just a comment to myself to remind me exactly what that state object is I'm also gonna write
out a comment for action as well.
Once again just to remind me exactly what it is.
So you and I get to define exactly how we pass in this action object or what properties it has.
So I think that right now we should plan on that action object having some property like color to change
and that will tell her tell us what color to change and how much to change it by.
So like a number of 15 or minus 15 or whatever it's all adding a comment here.
I'm going to say that the action object is going to have a property color to change and that's going
to be red or green or blue it will also have an amount property and that will be something like positive
15 or negative 15.
Again this is not necessarily valid javascript right here.
This is just a comment to remind myself what that action object is going to look like.
All right.
So now we can write out that switch statement so I can write out switch and we're going to switch over
action dot color to change.
Very similar to what we've just had a moment ago inside of our set color function.
So do action dot color to change so there are three different possibilities of what color change is
going to be either red green or blue.
So write out those three cases.
Case red case Green case blue.
We should also technically have a default case on here as well.
The default case is going to handle the case in which we accidentally throw an action inside of here
with like maybe a invalid color to change or a undefined color to change.
It's not extremely likely to happen in this application you and I are putting together but usually by
convention we nonetheless add in this default case just in case we have not added in an appropriate
case switch or case handling statement.
All right.
Now just like our set color function inside of each of these different case statements we're going to
inspect our action object once again and use that to decide how much we want to change are given color
by now right now we're just going to ignore doing our validation step.
I'm not going to worry about decreasing red underneath zero or above 255 and similar for green and blue
as well.
We're just gonna say whoops if we change it by too much.
Oh well we'll come back in a little bit and add in that validation logic gates.
Now inside of here we're going to decide we've essentially gone to the point where we've realized OK
we need to modify the red property of our state object.
Now here's the one catch.
Remember technicality number one right here.
We're never gonna change argument number one directly.
So inside of the switch statement you and I are never going to do something like state DOT red equals
state DOT red minus 15.
Remember we saw something very similar back when we were using R U state hook.
We said that we're never going to modify our state values directly so same thing inside this reducer.
So that might make life a little bit challenging.
You might be thinking OK well with the you state hook we had the setter function to make our changes
and that made life pretty straightforward and easy.
So how are we going to make a change in this case.
Well essentially anytime you want to change a property inside of our state object we're going to rebuild
that entire state object from scratch.
So we're going to take the state object right here.
We're going to rebuild the entire thing into a new object but the new object is going to have the changed
value forever that we want.
So let me show you how to do that.
We're gonna write out return curly braces.
Dot dot dot state then we'll write out the change that we want to make.
So I want a new value for red and I want that new value for red to be state DOT red plus action dot
amount.
So take the current value of whatever red is an add in however much we specified on that action object.
So what's going on with the syntax right here.
Well it's essentially means make a brand new object so that's where we are assembling a new object.
We're then going to take all the existing properties out of our state object and we're going to essentially
copy paste them into this new one then we're going to overwrite the existing red property and the new
value for red will be state plus red plus action dot amount.
So with this code right here we are not making any change whatsoever to our state object.
Instead we are copy pasting all the values out of it adding them to this new object and then making
a change to the new object.
So no change has been made to the original state object which is exactly what we want.
We don't want to make any change directly to state and visualize the syntax a little bit more easily.
Here's what's really going on.
We can kind of imagine let me do a quick copy paste here we can kind of imagine that with this dot dot
dot state that essentially gets changed at runtime into something like this.
So again with the dot dot dot state we take all the values out of state which is red green and blue
and we essentially copy paste them into this new object that includes the red property.
But now we've redefined red to the right hand side of the existing one.
When we redefine a new property like so later on INSIDE AN OBJECT it overwrite the existing one.
So essentially this red of 0 right here gets deleted and we end up with just green of zero blue of 0
and red of the new value.
So that's what's really going on with that syntax OK.
So now he's seen how he can update a state object without technically changing the state object.
Now we will repeat this process for case green and blue as well.
So I'm going to copy paste that down twice on green right here.
I'm going to change the key of red to green and I'll change state DOT red to green as well.
Same thing for blue so go to blue and state DOT blue.
Now once again very much like I complained or has to do with the set color function please triple check
make sure you've got case red green blue and you should see red red green green blue blue now finally
for our default case right here if we do not match any of these different cases that means we don't
want to make any change to our state whatsoever.
So in the default case we're always going to return these state object OK.
Now I want you to notice something inside this reducer are reducer now conforms to technicality number
two right here.
We are always going to return a value to be used as argument number one we've returned our state object
no matter what.
From our reducer function.
So whenever we call this reduce our function or whenever it gets called by react automatically in every
scenario no matter what we are always returning a new object to be used as our state.
This is slightly different than the set color function we were working on a little bit ago in set color.
We were making use of those setters.
So in this case we make use of reducer whatever we returned from this function will be used as our new
state object OK.
So this is our reducer in total for right now.
Now this video is running really long.
So going to save this we're going to take a quick pause right here.
When we come back the next video we're going to wire all this backup to our square screen component.
We're going to see everything actually work.
Believe it or not we just have to make like a couple little additions and everything is going to be
working just how it did a moment ago so a quick pause and we'll resume this in just a moment.