Our application now works and I would say works out pretty well.
We're now using these three different state variables inside of here.
And yeah we've got this nice function to validate our changes.
Everything's looking pretty good but we could make this a little bit better.
So in this video I'm gonna walk you through the process of using a slightly different way of managing
our state.
At I want to do is give you a couple notes here.
The first note of these notes the app definitely works right now.
We could absolutely walk away from this.
We could call it good.
Move on to our next application.
No changes required whatsoever.
So what I'm about to show you is 100 percent in theory.
Optional change when I say optional.
I mean that you and I don't really have to make this change.
But I really would love if you stayed around and watch these videos because what we're going to talk
about right now is going to be really important for some stuff we do later on.
So I say optional again.
I mean to say we don't technically have to change our code but it's required in the sense that you got
to watch this video and so to speak anyways we'd have to make this change but we're going to do it anyways
just to make our code slightly better and because it's also going to open up the door for some stuff
that we're going to learn about later on it's going to point out some thoughts about what's going on
inside of our component right now.
At present we have three separate pieces of state.
We have color or semi red green and blue.
Now I want to point out that out of all those pieces of state for this particular application those
three pieces of state are extremely closely related.
In other words having our square screen right here doesn't really make a lot of sense.
If we say drop the color green or if we decide to drop the color blue.
Yes the application would still work and we would be able to show some color changing Square but it
would not be a complete application.
So without a doubt these three different state values are pretty darn interconnected.
In addition there is a very precise set of very well-known ways in which we are updating these values.
So what I mean by that there are precisely six ways in which you and I are changing these values right
now precisely six no more the different ways in which we make these changes are an increase to red or
a decrease to red.
We can either do a increase to green or a decrease to green and an increase or decrease to blue.
So there are precisely six ways in which we are changing our state variables in total so because of
these two qualities right here because we have three pieces of state or essentially multiple pieces
of state that are very closely related and there is a very precisely known set of ways in which we are
changing these pieces of state that makes our application or our component a great candidate for having
our state managed by something called a reducer as opposed to what we're doing right now so anytime
that we are working on an application where we've got some multiple state values that are very closely
related and we know exactly which ways in which we're going to update those values over time we might
try looking at using this reducer thing that's going to be what we're talking about here that's what
we are going to do this refactor around let's first begin by discussing Well what is the reducer.
Okay.
So first thing I want to say here about reduced is it's a fancy name.
Just forget the name reducer.
The word reducer was made up by someone a while ago and it's really a kind of describes what's going
on.
But the term really just throws a lot of confusion as to what its purpose it's a better term than reducer
would be like a function that manages changes to an object.
If I was to rewrite all this stuff from scratch I would probably use that really long name.
People would probably hate me for it but that's essentially what a reducer is it is a function that's
managing changes to some kind of object.
Let's talk about some more details about what a reducer really is.
All right.
So it is a function.
This function is always going to be called with two separate objects.
The first argument or the first object is going to be an object that has all of our different state
variables inside of it.
So in our application the one you and I are working on right now our object our argument number one
right here we would refer to as our state object and it might be something like red with the starting
value of 0 green with the starting value 0 and blue with the starting value of 0.
So that's going to be the first argument to this reduce our function.
The second argument is going to be an object that describes the update that we want to make to argument
number one.
So in our case we are trying to change red green or blue by a very precise amount.
We are either adding some amount or decreasing some amount.
So in our case we might have an object that looks something like this over here.
It might say here's the color that we want to change.
In this case it's red.
And here's how much we want to change it by notice how already by looking at argument number one an
argument number two you might be able to tell that that's very similar to what we have right here a
set color with set color we don't really have that first argument number one.
That has all of our different state properties inside of it but the two arguments we have right here
are very close to argument number two inside that diagram.
These two arguments precisely describe what kind of change we want to make to our state variables is
describing the color that we want to change and how much we want to change it by so argument number
two is very similar to the two arguments that we have inside of our current set color function now inside
the reducer.
We're going to look at argument number two and depending upon this object right here you and I are going
to inspect some of the different properties on it and depending upon the different properties in the
different values inside there we're going to make some decision on how we're going to change our state
object.
So if we had it argument number two that looks like this right here that said colored to change of red
an amount 15.
Well chances are we would want to write some code that would take the state object right here and increment
the property red by 15 very similar to what we are currently doing inside of our set color function.
At present we are inspecting those two arguments right there and depending upon those values we're deciding
to update read in some way.
Now there's just two caveats to this.
Two really big important things to understand and these are going to be two things are going to be slightly
different than what's going on inside of our current set color function.
So the first thing to be aware of here is that we're never going to change that argument.
No one directly.
So in other words we're never going to write out if this is something like Kent State equals blah blah
blah.
You and I are never going to write out some code that says like state DOT red equals state DOT red plus
10 very similar to how we set about our state variables back over here of red green and blue that we're
never going to modify these variables directly.
Same exact thing where this argument number one right here we're never going to modify that object directly
to you might be kind of curious how we're going to make any changes to it.
Don't worry we'll discuss exactly how we're going to do that so technicality.
Number two our reduce our function or our function that manages changes to an object must always return
a value that's essentially going to be used as our state object or our argument number one.
So right now inside of our set color function at every turn or every case right here we eventually return
just to get out of our switch statement.
But essentially we don't really return any value reducer works slightly differently whatever value we
return from a reducer is used as our state object will also go into this in great detail because it's
telling you with words it's not super helpful.
OK.
So let's just do a quick review on some things we discussed right here.
You're going to start writing some code in the next video.
So first off because we have a set of state values that are all extremely related and we know the exact
ways in which we're going to update these values.
Our application is a great candidate for being managed by a reducer or using a reducer to manage our
state secondly a reducer is a function that's going to somehow manage changes that we make to our state
object.
This function is always going to be called with two objects.
The first one will be an object that has all of our state inside of it.
The second argument will be an object that describes exactly how we are supposed to change that state
and then to technicalities.
First off we're never going to change argument number one directly and number two and remember we're
going to go into great detail on this.
We're always going to make sure that we return a value from a reducer as well.
So now we've got some basics put together here.
Let's take a quick pause when we come back the next video we're going to start to refactor our square
screen component to make use of the reducer.