1
00:00:01,000 --> 00:00:04,000
In this video we need to make one last change will reduce our function.

2
00:00:04,000 --> 00:00:06,730
Right now we're not doing any validation on red green or blue.

3
00:00:06,730 --> 00:00:09,730
So essentially we just have to add that validation in to do so.

4
00:00:09,730 --> 00:00:14,020
We're going to write out some validation logic inside of each case to make sure that we don't exceed

5
00:00:14,020 --> 00:00:18,540
red green or blue by too much or alternatively go into the negatives.

6
00:00:19,690 --> 00:00:24,360
To write this out we're gonna first add in an if statement and we're gonna refactor it into a ternary

7
00:00:24,390 --> 00:00:25,080
instead.

8
00:00:25,080 --> 00:00:27,800
So let's get to it inside of case red.

9
00:00:27,840 --> 00:00:34,920
I'm going to add in an if statement and we're going to check to see if state DOT red plus action dot

10
00:00:35,070 --> 00:00:35,730
amount.

11
00:00:35,730 --> 00:00:40,990
So this is essentially what we want to change our value of red to if that is greater than two fifty

12
00:00:40,990 --> 00:00:42,080
five.

13
00:00:42,210 --> 00:00:50,100
Or alternatively if state DOT red plus action dot amount is less than zero then that means we do not

14
00:00:50,100 --> 00:00:52,920
make want to make any update whatsoever.

15
00:00:52,920 --> 00:00:57,490
So you might want to put inside of your dislike return and say don't do anything just get out of here.

16
00:00:57,630 --> 00:01:01,550
Remember there's a big gotcha here back over here.

17
00:01:01,580 --> 00:01:07,250
Number two no matter what we always must return a value from our reducer.

18
00:01:07,250 --> 00:01:09,520
Just so you understand what's going on behind the scenes.

19
00:01:09,680 --> 00:01:14,810
I'm gonna go back down to my component down here at some point time you and I are calling that dispatch

20
00:01:14,810 --> 00:01:20,320
function when we call dispatch reactor's going to call the reducer that we hooked up right there.

21
00:01:20,360 --> 00:01:21,850
That's a function we defined right above.

22
00:01:21,860 --> 00:01:28,460
Remember when we eventually return a value from our reducer right here react is going to automatically

23
00:01:28,520 --> 00:01:34,520
re render our square screen component when square screen gets re rendered for a second or third or fourth

24
00:01:34,520 --> 00:01:41,450
time whichever time whatever we return from that reducer is going to be provided to us in this state

25
00:01:41,510 --> 00:01:47,020
object right here and that's why it's so important for us to always return something from our reducer

26
00:01:47,030 --> 00:01:47,730
function.

27
00:01:47,990 --> 00:01:52,460
If we don't return anything at all and state is going to show up inside of our function during the next

28
00:01:52,890 --> 00:01:59,060
next re render as undefined and that is going to very quickly result in error as a matter of fact let's

29
00:01:59,060 --> 00:02:02,470
just test that out right now to see what kind of error message we would get.

30
00:02:02,550 --> 00:02:03,630
It's a backup here.

31
00:02:03,650 --> 00:02:05,760
I've got my first validation.

32
00:02:05,930 --> 00:02:12,500
So if we go into anything above 255 or if we go below zero we're not going to return anything.

33
00:02:12,560 --> 00:02:13,510
And again bad.

34
00:02:13,550 --> 00:02:14,730
Don't want to do that.

35
00:02:14,840 --> 00:02:18,860
So let's save this and see what kind of error message we get if that occurs.

36
00:02:18,860 --> 00:02:19,850
It's going to save that.

37
00:02:19,850 --> 00:02:25,490
I'll go back over and I'll hit decreased red right away and sure enough I instantly see a nastier message

38
00:02:25,490 --> 00:02:27,880
that says undefined is not an object.

39
00:02:27,920 --> 00:02:28,970
So what's going on there.

40
00:02:28,970 --> 00:02:33,560
Well remember we're doing some D structuring right here so we are looking at that state object.

41
00:02:33,590 --> 00:02:38,780
We're trying to pull off red green and blue because we return nothing from our reducer.

42
00:02:38,780 --> 00:02:42,980
State has shown up inside of our component during a re render as undefined.

43
00:02:42,980 --> 00:02:48,920
So we are essentially trying to reference the red property on undefined and that's exactly why we're

44
00:02:48,920 --> 00:02:53,360
seeing this error message undefined is not an object which means we cannot pull off the red property

45
00:02:53,360 --> 00:02:54,670
from it.

46
00:02:54,680 --> 00:02:59,930
So again we have to make sure no matter what we always return something for our producer.

47
00:02:59,980 --> 00:03:01,570
So what do we return if.

48
00:03:01,570 --> 00:03:05,590
Well we don't want to make any changes in this case right here we don't want to change our state object

49
00:03:05,650 --> 00:03:07,460
at all if that's the case.

50
00:03:07,480 --> 00:03:08,410
No problem.

51
00:03:08,410 --> 00:03:13,550
We just return the state object that was passed into our reducer without making any changes.

52
00:03:13,720 --> 00:03:17,660
So we would change us to return state like so.

53
00:03:17,690 --> 00:03:21,740
So again we can evaluate this as saying If we don't want to make a change because that would give us

54
00:03:21,770 --> 00:03:27,400
an invalid state district turn the existing state object don't do anything at all it's let's save this

55
00:03:28,030 --> 00:03:30,200
and we'll test it out really quickly.

56
00:03:30,220 --> 00:03:33,760
Now once should built a hit decrease read right away and not see a crash.

57
00:03:33,760 --> 00:03:34,810
Perfect.

58
00:03:34,850 --> 00:03:38,320
Nice to be able to hit increase read and see the color change immediately.

59
00:03:38,320 --> 00:03:42,850
I should be able to get all the way to like bright red right here and then if I tap on decrease red

60
00:03:43,060 --> 00:03:45,910
it should change a shade of color right away.

61
00:03:45,910 --> 00:03:47,670
Yep definitely did.

62
00:03:47,680 --> 00:03:47,910
Okay.

63
00:03:47,970 --> 00:03:52,160
So Alex pretty good this is pretty good right here.

64
00:03:52,290 --> 00:03:56,260
But we could update this logic to use a ternary expression instead.

65
00:03:56,400 --> 00:03:58,240
Let's write that out really quickly.

66
00:03:58,530 --> 00:04:02,880
So to use a ternary expression here we would first find the opening if statement right here.

67
00:04:02,880 --> 00:04:08,870
I would delete if and the opening parentheses I would then go to the very end of the line and delete

68
00:04:08,900 --> 00:04:15,530
the closing parentheses and that curly brace so that ternary expression is going to evaluate this line

69
00:04:15,530 --> 00:04:16,400
right here.

70
00:04:16,610 --> 00:04:21,650
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

71
00:04:21,680 --> 00:04:23,100
return our state object.

72
00:04:23,140 --> 00:04:26,580
Now again inside of a ternary we cannot have a return expression.

73
00:04:26,630 --> 00:04:33,260
So if this is true right here I'm then going to delete return state allowed in a question mark and put

74
00:04:33,260 --> 00:04:37,880
in state like so and then if that expression is false we'll see.

75
00:04:37,910 --> 00:04:43,850
So I'll add in a comma or semicolon if that's the case that I instead want to return our updated state

76
00:04:43,880 --> 00:04:49,190
object what we wrote down there it's all pasted in right there like so.

77
00:04:49,420 --> 00:04:51,550
Now remember we need to return something at some point.

78
00:04:51,640 --> 00:04:57,910
So we're gonna put a return statement right in front of the ternary expression so now whatever this

79
00:04:57,910 --> 00:05:03,870
entire expression evaluates to either state or the updated state we're going to return that.

80
00:05:03,940 --> 00:05:07,570
Again this is just a more compact way of writing out that if statement that we are just taking a look

81
00:05:07,570 --> 00:05:10,520
at and just to make sure we didn't make any typos here.

82
00:05:10,540 --> 00:05:12,520
Let's save this really quickly.

83
00:05:12,610 --> 00:05:15,160
What back over I will increase.

84
00:05:15,160 --> 00:05:17,560
Yep definitely getting lighter and getting darker.

85
00:05:17,560 --> 00:05:19,060
Perfect.

86
00:05:19,060 --> 00:05:23,140
So if you just made these changes with me and you're now seeing an error message I can guarantee you

87
00:05:23,200 --> 00:05:26,200
you just made a typo somewhere inside of your hundred percent.

88
00:05:26,200 --> 00:05:30,610
There's definitely a typo inside here so please triple check your code there if you're getting an error

89
00:05:30,610 --> 00:05:34,270
message and find wherever that typo is all right.

90
00:05:34,290 --> 00:05:38,750
So we can now duplicate this return statement for our other two cases as well.

91
00:05:39,120 --> 00:05:44,590
So I'm going to highlight the entire ternary expression all three lines are going to copy it.

92
00:05:44,740 --> 00:05:47,890
I'm going to add it into green in place of the existing one.

93
00:05:47,930 --> 00:05:55,150
So going to delete the case green body and paste that in and I'll delete the case blue body and paste

94
00:05:55,150 --> 00:05:59,440
that in as well on both K screen and case blue.

95
00:05:59,470 --> 00:06:06,970
We have to update a couple of property names in total we need to update 1 2 and 3 different property

96
00:06:07,400 --> 00:06:08,630
4.

97
00:06:08,650 --> 00:06:13,840
So in each of these bodies we have the word red four times so we need to change this first one to green

98
00:06:14,170 --> 00:06:22,580
it's all do state dark green there's one there's two there's three and there's four.

99
00:06:22,580 --> 00:06:27,270
Make sure you made four updates as well and then we'll repeat that for Blue as well.

100
00:06:27,590 --> 00:06:33,620
So I'll do one to three and four.

101
00:06:33,630 --> 00:06:37,330
Once again you should've made four updates to case blue.

102
00:06:37,520 --> 00:06:37,750
All right.

103
00:06:37,820 --> 00:06:39,350
So we can now finally do a test.

104
00:06:39,350 --> 00:06:40,700
I'll save this.

105
00:06:41,000 --> 00:06:42,530
Go back to square demo.

106
00:06:42,790 --> 00:06:44,200
I'll increase red.

107
00:06:44,240 --> 00:06:45,410
Yep works.

108
00:06:45,440 --> 00:06:47,000
Increase blue.

109
00:06:47,000 --> 00:06:47,240
Yep.

110
00:06:47,240 --> 00:06:50,090
Definitely works and increased green.

111
00:06:50,400 --> 00:06:51,670
Yep definitely works as well.

112
00:06:52,630 --> 00:06:52,950
All right.

113
00:06:52,970 --> 00:06:53,750
And that's pretty much it.

114
00:06:54,820 --> 00:06:59,400
OK so we've now seen reduced is in action so let's say a quick pause right here and continue in the

115
00:06:59,400 --> 00:06:59,940
next video.