In this video we need to make one last change will reduce our function.
Right now we're not doing any validation on red green or blue.
So essentially we just have to add that validation in to do so.
We're going to write out some validation logic inside of each case to make sure that we don't exceed
red green or blue by too much or alternatively go into the negatives.
To write this out we're gonna first add in an if statement and we're gonna refactor it into a ternary
instead.
So let's get to it inside of case red.
I'm going to add in an if statement and we're going to check to see if state DOT red plus action dot
amount.
So this is essentially what we want to change our value of red to if that is greater than two fifty
five.
Or alternatively if state DOT red plus action dot amount is less than zero then that means we do not
make want to make any update whatsoever.
So you might want to put inside of your dislike return and say don't do anything just get out of here.
Remember there's a big gotcha here back over here.
Number two no matter what we always must return a value from our reducer.
Just so you understand what's going on behind the scenes.
I'm gonna go back down to my component down here at some point time you and I are calling that dispatch
function when we call dispatch reactor's going to call the reducer that we hooked up right there.
That's a function we defined right above.
Remember when we eventually return a value from our reducer right here react is going to automatically
re render our square screen component when square screen gets re rendered for a second or third or fourth
time whichever time whatever we return from that reducer is going to be provided to us in this state
object right here and that's why it's so important for us to always return something from our reducer
function.
If we don't return anything at all and state is going to show up inside of our function during the next
next re render as undefined and that is going to very quickly result in error as a matter of fact let's
just test that out right now to see what kind of error message we would get.
It's a backup here.
I've got my first validation.
So if we go into anything above 255 or if we go below zero we're not going to return anything.
And again bad.
Don't want to do that.
So let's save this and see what kind of error message we get if that occurs.
It's going to save that.
I'll go back over and I'll hit decreased red right away and sure enough I instantly see a nastier message
that says undefined is not an object.
So what's going on there.
Well remember we're doing some D structuring right here so we are looking at that state object.
We're trying to pull off red green and blue because we return nothing from our reducer.
State has shown up inside of our component during a re render as undefined.
So we are essentially trying to reference the red property on undefined and that's exactly why we're
seeing this error message undefined is not an object which means we cannot pull off the red property
from it.
So again we have to make sure no matter what we always return something for our producer.
So what do we return if.
Well we don't want to make any changes in this case right here we don't want to change our state object
at all if that's the case.
No problem.
We just return the state object that was passed into our reducer without making any changes.
So we would change us to return state like so.
So again we can evaluate this as saying If we don't want to make a change because that would give us
an invalid state district turn the existing state object don't do anything at all it's let's save this
and we'll test it out really quickly.
Now once should built a hit decrease read right away and not see a crash.
Perfect.
Nice to be able to hit increase read and see the color change immediately.
I should be able to get all the way to like bright red right here and then if I tap on decrease red
it should change a shade of color right away.
Yep definitely did.
Okay.
So Alex pretty good this is pretty good right here.
But we could update this logic to use a ternary expression instead.
Let's write that out really quickly.
So to use a ternary expression here we would first find the opening if statement right here.
I would delete if and the opening parentheses I would then go to the very end of the line and delete
the closing parentheses and that curly brace so that ternary expression is going to evaluate this line
right here.
If that's true or if we don't want to or we're going to get into an invalid state then we want to immediately
return our state object.
Now again inside of a ternary we cannot have a return expression.
So if this is true right here I'm then going to delete return state allowed in a question mark and put
in state like so and then if that expression is false we'll see.
So I'll add in a comma or semicolon if that's the case that I instead want to return our updated state
object what we wrote down there it's all pasted in right there like so.
Now remember we need to return something at some point.
So we're gonna put a return statement right in front of the ternary expression so now whatever this
entire expression evaluates to either state or the updated state we're going to return that.
Again this is just a more compact way of writing out that if statement that we are just taking a look
at and just to make sure we didn't make any typos here.
Let's save this really quickly.
What back over I will increase.
Yep definitely getting lighter and getting darker.
Perfect.
So if you just made these changes with me and you're now seeing an error message I can guarantee you
you just made a typo somewhere inside of your hundred percent.
There's definitely a typo inside here so please triple check your code there if you're getting an error
message and find wherever that typo is all right.
So we can now duplicate this return statement for our other two cases as well.
So I'm going to highlight the entire ternary expression all three lines are going to copy it.
I'm going to add it into green in place of the existing one.
So going to delete the case green body and paste that in and I'll delete the case blue body and paste
that in as well on both K screen and case blue.
We have to update a couple of property names in total we need to update 1 2 and 3 different property
4.
So in each of these bodies we have the word red four times so we need to change this first one to green
it's all do state dark green there's one there's two there's three and there's four.
Make sure you made four updates as well and then we'll repeat that for Blue as well.
So I'll do one to three and four.
Once again you should've made four updates to case blue.
All right.
So we can now finally do a test.
I'll save this.
Go back to square demo.
I'll increase red.
Yep works.
Increase blue.
Yep.
Definitely works and increased green.
Yep definitely works as well.
All right.
And that's pretty much it.
OK so we've now seen reduced is in action so let's say a quick pause right here and continue in the
next video.