1
00:00:01,020 --> 00:00:03,750
In the last video we discussed exactly what a reducer is.

2
00:00:03,760 --> 00:00:05,540
Early some high level notes on it.

3
00:00:05,580 --> 00:00:06,420
It's now in this video.

4
00:00:06,420 --> 00:00:10,230
We're going to flip back over to our square screen component right here.

5
00:00:10,230 --> 00:00:15,630
We're going to start to refactor it to use a reducer instead of these separate independently managed

6
00:00:15,720 --> 00:00:17,340
state variables.

7
00:00:17,340 --> 00:00:22,740
So in general anytime we make use of reducer we're either using a reducer to manage our state or we

8
00:00:22,740 --> 00:00:25,480
are using this you state hook thing instead.

9
00:00:25,500 --> 00:00:26,710
One of the other.

10
00:00:26,880 --> 00:00:32,070
We're not going to have any scenario where we have identical variables being managed by both you state

11
00:00:32,190 --> 00:00:34,110
and reducer.

12
00:00:34,180 --> 00:00:34,450
OK.

13
00:00:34,450 --> 00:00:39,610
So to get started on the first start to clean up my square screen component specifically I'm going to

14
00:00:39,610 --> 00:00:45,310
go through here and delete everything related to our current management of state.

15
00:00:45,310 --> 00:00:50,480
So we're going to essentially write out all this use reduce our stuff from scratch entirely from scratch.

16
00:00:50,620 --> 00:00:55,060
I highly recommend you do the same and delete this code along with me if you want to keep a backup of

17
00:00:55,090 --> 00:00:56,430
everything we've written so far.

18
00:00:56,440 --> 00:01:00,180
You can always create a duplicate of these square screen dot J.S. file.

19
00:01:00,210 --> 00:01:00,470
OK.

20
00:01:00,490 --> 00:01:01,790
So let's start on a little bit of cleanup.

21
00:01:01,810 --> 00:01:05,580
We're going to delete everything related to state inside this component right now.

22
00:01:05,710 --> 00:01:11,950
So going to first find square screen all then take these first three lines to highlight them and delete

23
00:01:11,950 --> 00:01:15,050
them after that.

24
00:01:15,080 --> 00:01:20,070
I'm going to highlight the entire set color function and delete that as well.

25
00:01:22,580 --> 00:01:27,720
And then I'm going to go through all of my on increase in on decrease callbacks right here and I'm gonna

26
00:01:27,740 --> 00:01:31,040
delete these set color call inside of each of them.

27
00:01:31,040 --> 00:01:34,490
I am going to leave behind the arrow function you see right there.

28
00:01:34,510 --> 00:01:35,000
I'm going to delete.

29
00:01:35,000 --> 00:01:37,130
Just set color in its arguments.

30
00:01:37,400 --> 00:01:40,730
So delete set color delete that.

31
00:01:41,090 --> 00:01:49,280
There's three or five and six and you'll notice that I've got some syntax errors here because we have

32
00:01:49,280 --> 00:01:51,800
some ERO functions without a body that's totally fine.

33
00:01:51,800 --> 00:01:55,570
We're gonna come back and fix these up in just a little bit OK.

34
00:01:55,600 --> 00:02:00,940
So now back at the very top of the file we can start to add in our code to use a reducer inside this

35
00:02:00,940 --> 00:02:02,010
component.

36
00:02:02,100 --> 00:02:07,140
It's the first thing we're going to do is fine line number one right here rather than importing you

37
00:02:07,140 --> 00:02:08,220
state from react.

38
00:02:08,220 --> 00:02:14,580
We're gonna delete that and instead we're going to import a different hook function one called use reducer

39
00:02:15,570 --> 00:02:21,690
this use reducer is a hook function very similar to how it used state is a hook function as well remember

40
00:02:21,750 --> 00:02:27,840
a hook adds in some additional functionality or some additional capability to a functional component.

41
00:02:28,140 --> 00:02:34,110
So we're going to use use reducer to add in the functionality to essentially use a reducer inside of

42
00:02:34,110 --> 00:02:41,340
our square screen let's first take a look at how we call this use reducer function so inside of square

43
00:02:41,340 --> 00:02:47,490
screen I'm going to write out some syntax that looks rather similar to you state so I'm going to say

44
00:02:47,490 --> 00:02:56,830
const I'm then going to place those square brackets and I'll say state dispatch then my equals sign

45
00:02:57,490 --> 00:03:04,020
and I'll call use reducer I'm going to pass in a reducer function we are about to write this we have

46
00:03:04,020 --> 00:03:08,670
not created this variable yet this is going to be the reducer function you and I put together it's going

47
00:03:08,670 --> 00:03:14,550
to add that in and just a moment but right now I'll add in the argument right away then as the second

48
00:03:14,550 --> 00:03:18,420
value we're going to put in our initial state object.

49
00:03:18,420 --> 00:03:20,910
So this is very similar back to this diagram right here.

50
00:03:20,910 --> 00:03:25,020
Remember we said that we're going to have one object that has all of our state in it.

51
00:03:25,020 --> 00:03:26,610
Remember back when we were using you state.

52
00:03:26,610 --> 00:03:32,000
Just a moment ago when we called you state we had to put in an initial value for each different value.

53
00:03:32,280 --> 00:03:34,430
So very similar when we make use of reducer.

54
00:03:34,440 --> 00:03:38,040
We have to provide an initial value for our state object.

55
00:03:38,040 --> 00:03:42,630
So this is where we're going to essentially set the tone for what our state looks like.

56
00:03:42,630 --> 00:03:48,690
In our case I think that we should have an object that has a red property that'll start off as zero

57
00:03:49,380 --> 00:03:56,310
a green property that starts off a zero and blue that starts off as zero as well OK.

58
00:03:56,340 --> 00:04:03,120
So now right away we can immediately see that we've got one variable right here called state state initially

59
00:04:03,150 --> 00:04:09,510
is going to be exactly equal to that object the state variable is going to essentially be how we access

60
00:04:09,570 --> 00:04:11,040
our different state values.

61
00:04:11,040 --> 00:04:16,410
So before we had those three separate different values floating around of red green and blue now instead

62
00:04:16,600 --> 00:04:23,030
they're all combined into this one single object so once again just to be really clear if we were to

63
00:04:23,030 --> 00:04:31,430
do a console log of state right here when our component is first shown on the screen we would see inside

64
00:04:31,430 --> 00:04:34,280
of our terminal that object right there.

65
00:04:34,280 --> 00:04:39,020
So that's our starting initial value of state OK.

66
00:04:39,070 --> 00:04:43,810
Now that we've set all this stuff up we now need to just do one other thing believe it or not we have

67
00:04:43,810 --> 00:04:50,680
to define our reducer function so I'm going to define my reducer function right above my use reduce

68
00:04:50,680 --> 00:04:57,140
or call I'll give myself a little bit of space up here and I'll define a new function called reducer

69
00:05:00,120 --> 00:05:00,860
OK.

70
00:05:00,970 --> 00:05:06,880
Now technically we can define this function inside of square screen but usually by convention we define

71
00:05:06,880 --> 00:05:12,430
it outside of our component in the reason for that is that remember argument number one to our reducer

72
00:05:12,460 --> 00:05:14,350
is going to be our current state object.

73
00:05:14,350 --> 00:05:19,440
That's what argument number one it's our object that has all of our different state inside of it if

74
00:05:19,440 --> 00:05:24,660
we define our reducer function inside of square screen we will want to refer to that first argument

75
00:05:24,660 --> 00:05:30,420
right there as state because that is gonna be our state object but if we have that argument right there

76
00:05:30,420 --> 00:05:36,080
that's called States it'll be very quickly confused with this other declaration of state over here.

77
00:05:36,120 --> 00:05:40,290
Now technically this would not result in an error but it's gonna make life for you really confusing

78
00:05:40,420 --> 00:05:44,700
because you're going to have essentially two different variables called state floating around the inside

79
00:05:44,730 --> 00:05:46,350
of this one component.

80
00:05:46,380 --> 00:05:51,630
So in general I recommend for you to define the reducer function not inside of your component but just

81
00:05:51,690 --> 00:05:55,560
maybe right above instead it's gonna make your life just a little bit easier

82
00:05:58,530 --> 00:05:58,830
OK.

83
00:05:58,870 --> 00:06:04,390
So now let's continue with art reduce our function again our first argument to it is our state object

84
00:06:04,630 --> 00:06:10,170
so our state object is that thing right there red green and blue our second argument to it.

85
00:06:10,170 --> 00:06:14,880
So this is argument number two that we just saw inside that diagram is gonna be the object that describes

86
00:06:15,060 --> 00:06:21,310
how we're supposed to change our state object it describes the update that we want to make so it would

87
00:06:21,310 --> 00:06:28,460
make a lot of sense to call that second argument something like how to change state objects but that's

88
00:06:28,460 --> 00:06:29,490
a really long name.

89
00:06:29,600 --> 00:06:34,680
Usually by convention we instead call that second argument action instead.

90
00:06:34,820 --> 00:06:40,100
So the word action really means and what you should really think of it is how should we change our state

91
00:06:40,130 --> 00:06:40,580
object.

92
00:06:40,580 --> 00:06:41,540
What change are we making.

93
00:06:41,540 --> 00:06:43,520
Are we increasing red or decreasing it.

94
00:06:43,520 --> 00:06:45,650
Are we increasing blue decreasing green.

95
00:06:45,650 --> 00:06:46,900
What are we doing.

96
00:06:46,910 --> 00:06:49,100
That's the job of the second argument.

97
00:06:49,100 --> 00:06:53,960
If you see the word action just think to yourself This is an object that tells me how I need to change

98
00:06:53,960 --> 00:07:00,900
my state object it's now inside of here we're going to inspect that action object and make some change

99
00:07:00,900 --> 00:07:06,490
to our state object using it we usually do this by writing out a switch statement very similar to the

100
00:07:06,490 --> 00:07:11,560
one that you just saw inside of our set color function before we worry about writing out that switch

101
00:07:11,560 --> 00:07:12,270
statement however.

102
00:07:12,400 --> 00:07:16,720
I just want to reiterate and put down some comments inside this function to remind myself exactly what

103
00:07:16,720 --> 00:07:19,700
state is and what action is right.

104
00:07:19,760 --> 00:07:28,150
Hearing us say that state is going to be equal to an object that has a red property that's no green

105
00:07:28,630 --> 00:07:30,440
that's no in blue.

106
00:07:30,460 --> 00:07:31,840
That's a number as well.

107
00:07:31,840 --> 00:07:34,180
And notice this is not really valid javascript right here.

108
00:07:34,180 --> 00:07:40,020
This is just a comment to myself to remind me exactly what that state object is I'm also gonna write

109
00:07:40,020 --> 00:07:42,670
out a comment for action as well.

110
00:07:42,680 --> 00:07:44,690
Once again just to remind me exactly what it is.

111
00:07:45,660 --> 00:07:50,700
So you and I get to define exactly how we pass in this action object or what properties it has.

112
00:07:51,150 --> 00:07:57,390
So I think that right now we should plan on that action object having some property like color to change

113
00:07:57,450 --> 00:08:01,460
and that will tell her tell us what color to change and how much to change it by.

114
00:08:01,470 --> 00:08:06,830
So like a number of 15 or minus 15 or whatever it's all adding a comment here.

115
00:08:06,830 --> 00:08:12,970
I'm going to say that the action object is going to have a property color to change and that's going

116
00:08:12,970 --> 00:08:23,040
to be red or green or blue it will also have an amount property and that will be something like positive

117
00:08:23,040 --> 00:08:25,470
15 or negative 15.

118
00:08:25,470 --> 00:08:27,930
Again this is not necessarily valid javascript right here.

119
00:08:27,930 --> 00:08:33,310
This is just a comment to remind myself what that action object is going to look like.

120
00:08:33,430 --> 00:08:33,880
All right.

121
00:08:33,880 --> 00:08:39,400
So now we can write out that switch statement so I can write out switch and we're going to switch over

122
00:08:39,730 --> 00:08:42,610
action dot color to change.

123
00:08:42,610 --> 00:08:46,590
Very similar to what we've just had a moment ago inside of our set color function.

124
00:08:46,760 --> 00:08:53,850
So do action dot color to change so there are three different possibilities of what color change is

125
00:08:53,850 --> 00:08:56,200
going to be either red green or blue.

126
00:08:56,200 --> 00:08:57,870
So write out those three cases.

127
00:08:57,870 --> 00:09:04,540
Case red case Green case blue.

128
00:09:04,610 --> 00:09:07,970
We should also technically have a default case on here as well.

129
00:09:08,090 --> 00:09:12,140
The default case is going to handle the case in which we accidentally throw an action inside of here

130
00:09:12,440 --> 00:09:17,830
with like maybe a invalid color to change or a undefined color to change.

131
00:09:17,930 --> 00:09:22,520
It's not extremely likely to happen in this application you and I are putting together but usually by

132
00:09:22,520 --> 00:09:28,250
convention we nonetheless add in this default case just in case we have not added in an appropriate

133
00:09:28,250 --> 00:09:31,520
case switch or case handling statement.

134
00:09:31,620 --> 00:09:31,880
All right.

135
00:09:31,900 --> 00:09:36,460
Now just like our set color function inside of each of these different case statements we're going to

136
00:09:36,460 --> 00:09:42,910
inspect our action object once again and use that to decide how much we want to change are given color

137
00:09:42,910 --> 00:09:48,440
by now right now we're just going to ignore doing our validation step.

138
00:09:48,440 --> 00:09:54,230
I'm not going to worry about decreasing red underneath zero or above 255 and similar for green and blue

139
00:09:54,230 --> 00:09:55,070
as well.

140
00:09:55,100 --> 00:09:57,880
We're just gonna say whoops if we change it by too much.

141
00:09:58,170 --> 00:10:03,200
Oh well we'll come back in a little bit and add in that validation logic gates.

142
00:10:03,210 --> 00:10:07,980
Now inside of here we're going to decide we've essentially gone to the point where we've realized OK

143
00:10:08,040 --> 00:10:12,460
we need to modify the red property of our state object.

144
00:10:12,480 --> 00:10:13,440
Now here's the one catch.

145
00:10:13,440 --> 00:10:15,540
Remember technicality number one right here.

146
00:10:15,540 --> 00:10:19,080
We're never gonna change argument number one directly.

147
00:10:19,080 --> 00:10:26,100
So inside of the switch statement you and I are never going to do something like state DOT red equals

148
00:10:26,310 --> 00:10:29,100
state DOT red minus 15.

149
00:10:29,100 --> 00:10:32,190
Remember we saw something very similar back when we were using R U state hook.

150
00:10:32,190 --> 00:10:38,580
We said that we're never going to modify our state values directly so same thing inside this reducer.

151
00:10:38,640 --> 00:10:40,760
So that might make life a little bit challenging.

152
00:10:40,770 --> 00:10:45,120
You might be thinking OK well with the you state hook we had the setter function to make our changes

153
00:10:45,360 --> 00:10:47,730
and that made life pretty straightforward and easy.

154
00:10:47,760 --> 00:10:50,360
So how are we going to make a change in this case.

155
00:10:50,370 --> 00:10:55,230
Well essentially anytime you want to change a property inside of our state object we're going to rebuild

156
00:10:55,290 --> 00:10:58,230
that entire state object from scratch.

157
00:10:58,230 --> 00:11:00,440
So we're going to take the state object right here.

158
00:11:00,480 --> 00:11:05,700
We're going to rebuild the entire thing into a new object but the new object is going to have the changed

159
00:11:05,700 --> 00:11:07,650
value forever that we want.

160
00:11:07,650 --> 00:11:09,200
So let me show you how to do that.

161
00:11:09,330 --> 00:11:13,380
We're gonna write out return curly braces.

162
00:11:13,390 --> 00:11:18,190
Dot dot dot state then we'll write out the change that we want to make.

163
00:11:18,200 --> 00:11:27,080
So I want a new value for red and I want that new value for red to be state DOT red plus action dot

164
00:11:27,140 --> 00:11:28,280
amount.

165
00:11:28,280 --> 00:11:35,450
So take the current value of whatever red is an add in however much we specified on that action object.

166
00:11:35,450 --> 00:11:37,790
So what's going on with the syntax right here.

167
00:11:37,790 --> 00:11:42,290
Well it's essentially means make a brand new object so that's where we are assembling a new object.

168
00:11:42,290 --> 00:11:46,850
We're then going to take all the existing properties out of our state object and we're going to essentially

169
00:11:46,850 --> 00:11:54,190
copy paste them into this new one then we're going to overwrite the existing red property and the new

170
00:11:54,190 --> 00:11:57,970
value for red will be state plus red plus action dot amount.

171
00:11:57,970 --> 00:12:02,710
So with this code right here we are not making any change whatsoever to our state object.

172
00:12:02,710 --> 00:12:08,830
Instead we are copy pasting all the values out of it adding them to this new object and then making

173
00:12:08,830 --> 00:12:10,570
a change to the new object.

174
00:12:10,570 --> 00:12:15,130
So no change has been made to the original state object which is exactly what we want.

175
00:12:15,130 --> 00:12:20,410
We don't want to make any change directly to state and visualize the syntax a little bit more easily.

176
00:12:20,410 --> 00:12:21,490
Here's what's really going on.

177
00:12:21,490 --> 00:12:28,560
We can kind of imagine let me do a quick copy paste here we can kind of imagine that with this dot dot

178
00:12:28,560 --> 00:12:33,680
dot state that essentially gets changed at runtime into something like this.

179
00:12:33,690 --> 00:12:37,890
So again with the dot dot dot state we take all the values out of state which is red green and blue

180
00:12:38,140 --> 00:12:42,670
and we essentially copy paste them into this new object that includes the red property.

181
00:12:42,840 --> 00:12:47,390
But now we've redefined red to the right hand side of the existing one.

182
00:12:47,670 --> 00:12:53,220
When we redefine a new property like so later on INSIDE AN OBJECT it overwrite the existing one.

183
00:12:53,220 --> 00:12:59,680
So essentially this red of 0 right here gets deleted and we end up with just green of zero blue of 0

184
00:12:59,910 --> 00:13:02,440
and red of the new value.

185
00:13:02,440 --> 00:13:06,020
So that's what's really going on with that syntax OK.

186
00:13:06,080 --> 00:13:11,120
So now he's seen how he can update a state object without technically changing the state object.

187
00:13:11,150 --> 00:13:15,250
Now we will repeat this process for case green and blue as well.

188
00:13:15,250 --> 00:13:19,720
So I'm going to copy paste that down twice on green right here.

189
00:13:19,730 --> 00:13:26,270
I'm going to change the key of red to green and I'll change state DOT red to green as well.

190
00:13:26,270 --> 00:13:31,460
Same thing for blue so go to blue and state DOT blue.

191
00:13:31,460 --> 00:13:36,880
Now once again very much like I complained or has to do with the set color function please triple check

192
00:13:36,890 --> 00:13:45,390
make sure you've got case red green blue and you should see red red green green blue blue now finally

193
00:13:45,390 --> 00:13:50,100
for our default case right here if we do not match any of these different cases that means we don't

194
00:13:50,100 --> 00:13:52,600
want to make any change to our state whatsoever.

195
00:13:52,650 --> 00:13:57,490
So in the default case we're always going to return these state object OK.

196
00:13:57,500 --> 00:14:03,020
Now I want you to notice something inside this reducer are reducer now conforms to technicality number

197
00:14:03,020 --> 00:14:03,570
two right here.

198
00:14:03,590 --> 00:14:08,690
We are always going to return a value to be used as argument number one we've returned our state object

199
00:14:08,960 --> 00:14:10,040
no matter what.

200
00:14:10,100 --> 00:14:11,850
From our reducer function.

201
00:14:12,140 --> 00:14:16,580
So whenever we call this reduce our function or whenever it gets called by react automatically in every

202
00:14:16,580 --> 00:14:24,060
scenario no matter what we are always returning a new object to be used as our state.

203
00:14:24,100 --> 00:14:28,280
This is slightly different than the set color function we were working on a little bit ago in set color.

204
00:14:28,330 --> 00:14:30,330
We were making use of those setters.

205
00:14:30,370 --> 00:14:35,620
So in this case we make use of reducer whatever we returned from this function will be used as our new

206
00:14:35,680 --> 00:14:38,170
state object OK.

207
00:14:38,260 --> 00:14:40,360
So this is our reducer in total for right now.

208
00:14:40,840 --> 00:14:42,440
Now this video is running really long.

209
00:14:42,460 --> 00:14:44,790
So going to save this we're going to take a quick pause right here.

210
00:14:44,920 --> 00:14:49,270
When we come back the next video we're going to wire all this backup to our square screen component.

211
00:14:49,270 --> 00:14:51,510
We're going to see everything actually work.

212
00:14:51,640 --> 00:14:55,570
Believe it or not we just have to make like a couple little additions and everything is going to be

213
00:14:55,630 --> 00:15:00,090
working just how it did a moment ago so a quick pause and we'll resume this in just a moment.