In the last video we created our first reducer function right here.
So now we just need to finish wiring up our use reducer inside of square screen.
All right let's reevaluate this line right here now with what we know.
First off we call the use reducer.
We passed in our reducer function to it.
We also passed in an initial value for our state object when we call use reducer.
That gives us back two things.
First off it gives us our current state.
Very similar to how with our use state hook we had said whenever we called a set or a setter with you
state that made our component automatically render in a very similar fashion.
When we use use reducer right here anytime our state object changes because of our reducer the entire
component is going to re render.
So over time our function this entire Functional Component right here is going to be called multiple
different times every time it gets called the value of state is going to be slightly different.
It's going to have whatever changes we made inside a very juicer function right here.
Now the very last question is how do we actually run that reducer and make a change.
Well that's the job of this dispatch function right here a better name for dispatch would probably be
run my reducer.
That would be a way better name than dispatch whenever we want to make a change to our state object.
We're going to run run my reducer.
We're going to invoke it and we're going to pass in an argument to be used as our action object.
That's the entire key.
So you and I are going to change first minute run my reducer.
We're gonna pass in some object that describes how we want to modify our state reactors then going to
automatically run our reducer and whenever we passed into the run my reduce our function right here
we'll be provided as the second argument.
So then inside of here we will inspect that second argument and decide how to change our state OK.
So what that means is we now need to go back around to all of our on increase and on decrease callbacks
inside of here and in each case we need to make sure we call run my reducer with the appropriate action
object.
When I say appropriate action object I essentially mean we have to call it with the appropriate color
to change prop and the appropriate amount either plus 15 or minus 15 so let's give it a shot.
Before we add it back in I'm going to change the name of run my reducer back here to dispatch.
Now we don't have to call it dispatch if you want to call it run by reducer.
Just leave it as that.
There's actually no requirement whatsoever to call this function Dispatch.
It's just convention.
That's all I'm going to leave it as dispatch.
Just so I technically show you the right thing but honestly I would recommend you still call it run
by reducer.
OK so on color counter right here for on increase we're going to call dispatch we're going to pass in
an object.
Remember this object right here is going to be showing up inside of reducer as that action.
So it needs to have a color to change crop of red green or blue.
And the amount that we want to change red green or blue by so when we call dispatch we're going to pass
an option which we object we'll give it a property of color to change we want to change the color red
so I'll pass that as a string and then we need to also provide the amount.
And so that's going to be our color increment constant and we defined at the very top of this file in
this case we're trying to increase color.
So I'm going to pass in a positive color increment okay.
So now we can duplicate that down too on decrease in the case of on the decrease we're going to call
dispatch again.
Once again we're going to define colored to change of red.
But this time for the amount we want to do negative 1 times color increment like so because now we want
to decrease our color.
So we're going to essentially add a negative number.
All right.
Now we can essentially repeat these two dispatch statements for all of our different color counters.
I'm going to zoom out for a second just you can see that line very easily and then I'll write in my
dispatch statements or color counter blue and color counter Green as well.
So I'll do my dispatch the second one color and change in this case will be you're not green but blue
the amount will be color increment and we'll do our next dispatch this will have a color change color
to change sorry type of their color to change in both cases
of blue in our amount will be color increment and this one needs to be negative so I'll once again do
negative 1 times color increment and now we'll repeat that once meant once again.
So dispatch color to change green amount is color increment then finally dispatch for the negative case
color to change green amount color increment OK.
There we go.
There's all three them put together so we've now got three very distinct action objects.
Well I guess six once again that technically we've got color change of red with a positive color in
command and a negative.
So yeah really six and total
now the very last thing you have to do to test all this out back down inside of our view element down
here.
Remember that square that we're giving you a background color too.
Right now we're referencing red green and blue red green and blue are no longer defined inside of our
component.
Instead red green and blue are nested inside of the state object so we can either update red green blue
right here to be like state red state dark green and state dark blue but another way to do this would
be to use a little bit of restructuring let's try doing that instead.
So to use some de structuring we could write out const red green blue is coming from state like so now
we have access to the variables red green and blue inside of our component once again we could alternatively
try to D structure off of this state value inside of here like inside the array but honestly that might
make things a little bit too confusing right now so I'm going to leave this as is OK.
So I gotta say this and we'll do a quick test now if you see any errors inside of your device.
First thing to do.
Remember tried to reload the application.
If you're on a physical device you can do that by shaking the phone.
You should see the development menu come up.
You can hit reload javascript if you're on a emulator or a simulator you can at the reload button down
here at the bottom.
Eventually we should get back to our home screen.
If you don't see the home screen appear and if you only see a red screen saying that there's some typo
I can guarantee you I can absolutely guarantee you.
You made a typo in the code we just wrote.
So please triple check whatever code you just wrote the error message will give you a very distinct
line number to look at the error message that's coming up.
Might tell you to look at a line number that's slightly underneath whatever typo you just made however.
So do we start to like look a little bit above or below or whatever else.
All right.
So go to my square demo and I'll do increase red.
Yep.
Getting red X black there's blue and there's green as well.
Looks like we might have a little typo here.
So I'm heading decrease green but the colors just getting more and more green.
A are we probably made a typo.
Yep he definitely did so on my amount right here.
I have color increment positive.
I never multiplied by negative 1 we take care of that really quickly.
That's better.
So on my green I've got an amount of negative 1 times color increment.
Now I can test again.
Increase green.
That's better.
So that's pretty much it.
That is our first experience at using reduced eyes.
Now I know that this is probably seem really over the top.
Like way more complicated than it needs to be.
And I agree with you 100 percent don't get me wrong.
The code we wrote Inside of here maybe not the best approach for handling just a simple color changing
application.
The reason we use this pattern is that it's going to make handling data and managing state inside of
more complex applications way easier than if we were trying to use separate state variables.
So this is kind of a contrived example where it's kind of hard to see the benefits but eventually we're
going to work on way more complicated applications.
We're using this pattern is going to be a huge blessing and we're gonna be really happy that we learned
how to use reducer like this.
All right.
So we'd love one last thing to do.
Remember we need to make sure that we add in some validation to make sure that we don't increase or
decrease any of our colors by too much.
So let's take care of that in the next video.