1
00:00:01,010 --> 00:00:04,220
Our application now works and I would say works out pretty well.

2
00:00:04,220 --> 00:00:06,890
We're now using these three different state variables inside of here.

3
00:00:06,900 --> 00:00:10,380
And yeah we've got this nice function to validate our changes.

4
00:00:10,470 --> 00:00:16,060
Everything's looking pretty good but we could make this a little bit better.

5
00:00:16,070 --> 00:00:20,660
So in this video I'm gonna walk you through the process of using a slightly different way of managing

6
00:00:20,720 --> 00:00:22,150
our state.

7
00:00:22,190 --> 00:00:24,350
At I want to do is give you a couple notes here.

8
00:00:24,350 --> 00:00:27,680
The first note of these notes the app definitely works right now.

9
00:00:27,680 --> 00:00:30,190
We could absolutely walk away from this.

10
00:00:30,200 --> 00:00:31,270
We could call it good.

11
00:00:31,400 --> 00:00:32,990
Move on to our next application.

12
00:00:32,990 --> 00:00:35,300
No changes required whatsoever.

13
00:00:35,300 --> 00:00:38,280
So what I'm about to show you is 100 percent in theory.

14
00:00:38,300 --> 00:00:40,890
Optional change when I say optional.

15
00:00:40,970 --> 00:00:43,490
I mean that you and I don't really have to make this change.

16
00:00:43,580 --> 00:00:47,990
But I really would love if you stayed around and watch these videos because what we're going to talk

17
00:00:47,990 --> 00:00:51,210
about right now is going to be really important for some stuff we do later on.

18
00:00:51,230 --> 00:00:52,300
So I say optional again.

19
00:00:52,310 --> 00:00:57,310
I mean to say we don't technically have to change our code but it's required in the sense that you got

20
00:00:57,310 --> 00:01:02,710
to watch this video and so to speak anyways we'd have to make this change but we're going to do it anyways

21
00:01:02,750 --> 00:01:06,620
just to make our code slightly better and because it's also going to open up the door for some stuff

22
00:01:06,650 --> 00:01:10,690
that we're going to learn about later on it's going to point out some thoughts about what's going on

23
00:01:10,690 --> 00:01:12,110
inside of our component right now.

24
00:01:12,140 --> 00:01:15,150
At present we have three separate pieces of state.

25
00:01:15,200 --> 00:01:18,500
We have color or semi red green and blue.

26
00:01:18,540 --> 00:01:23,260
Now I want to point out that out of all those pieces of state for this particular application those

27
00:01:23,260 --> 00:01:26,710
three pieces of state are extremely closely related.

28
00:01:26,740 --> 00:01:31,260
In other words having our square screen right here doesn't really make a lot of sense.

29
00:01:31,360 --> 00:01:35,810
If we say drop the color green or if we decide to drop the color blue.

30
00:01:35,890 --> 00:01:40,630
Yes the application would still work and we would be able to show some color changing Square but it

31
00:01:40,630 --> 00:01:42,560
would not be a complete application.

32
00:01:42,640 --> 00:01:48,770
So without a doubt these three different state values are pretty darn interconnected.

33
00:01:48,790 --> 00:01:55,540
In addition there is a very precise set of very well-known ways in which we are updating these values.

34
00:01:55,570 --> 00:02:00,970
So what I mean by that there are precisely six ways in which you and I are changing these values right

35
00:02:00,970 --> 00:02:07,930
now precisely six no more the different ways in which we make these changes are an increase to red or

36
00:02:07,960 --> 00:02:09,490
a decrease to red.

37
00:02:09,610 --> 00:02:15,670
We can either do a increase to green or a decrease to green and an increase or decrease to blue.

38
00:02:15,670 --> 00:02:21,970
So there are precisely six ways in which we are changing our state variables in total so because of

39
00:02:21,970 --> 00:02:26,890
these two qualities right here because we have three pieces of state or essentially multiple pieces

40
00:02:26,890 --> 00:02:32,530
of state that are very closely related and there is a very precisely known set of ways in which we are

41
00:02:32,530 --> 00:02:38,440
changing these pieces of state that makes our application or our component a great candidate for having

42
00:02:38,440 --> 00:02:44,770
our state managed by something called a reducer as opposed to what we're doing right now so anytime

43
00:02:44,780 --> 00:02:49,280
that we are working on an application where we've got some multiple state values that are very closely

44
00:02:49,280 --> 00:02:54,620
related and we know exactly which ways in which we're going to update those values over time we might

45
00:02:54,620 --> 00:03:00,260
try looking at using this reducer thing that's going to be what we're talking about here that's what

46
00:03:00,290 --> 00:03:07,170
we are going to do this refactor around let's first begin by discussing Well what is the reducer.

47
00:03:07,290 --> 00:03:07,560
Okay.

48
00:03:07,600 --> 00:03:11,440
So first thing I want to say here about reduced is it's a fancy name.

49
00:03:11,440 --> 00:03:12,930
Just forget the name reducer.

50
00:03:12,940 --> 00:03:18,400
The word reducer was made up by someone a while ago and it's really a kind of describes what's going

51
00:03:18,400 --> 00:03:18,800
on.

52
00:03:18,880 --> 00:03:25,060
But the term really just throws a lot of confusion as to what its purpose it's a better term than reducer

53
00:03:25,150 --> 00:03:31,230
would be like a function that manages changes to an object.

54
00:03:31,240 --> 00:03:36,030
If I was to rewrite all this stuff from scratch I would probably use that really long name.

55
00:03:36,130 --> 00:03:40,450
People would probably hate me for it but that's essentially what a reducer is it is a function that's

56
00:03:40,450 --> 00:03:43,780
managing changes to some kind of object.

57
00:03:43,780 --> 00:03:47,600
Let's talk about some more details about what a reducer really is.

58
00:03:47,620 --> 00:03:47,860
All right.

59
00:03:47,890 --> 00:03:49,090
So it is a function.

60
00:03:49,180 --> 00:03:53,780
This function is always going to be called with two separate objects.

61
00:03:53,880 --> 00:03:59,040
The first argument or the first object is going to be an object that has all of our different state

62
00:03:59,040 --> 00:04:00,820
variables inside of it.

63
00:04:00,840 --> 00:04:05,910
So in our application the one you and I are working on right now our object our argument number one

64
00:04:05,910 --> 00:04:11,850
right here we would refer to as our state object and it might be something like red with the starting

65
00:04:11,850 --> 00:04:16,560
value of 0 green with the starting value 0 and blue with the starting value of 0.

66
00:04:16,610 --> 00:04:20,510
So that's going to be the first argument to this reduce our function.

67
00:04:20,520 --> 00:04:26,370
The second argument is going to be an object that describes the update that we want to make to argument

68
00:04:26,370 --> 00:04:27,620
number one.

69
00:04:27,720 --> 00:04:33,630
So in our case we are trying to change red green or blue by a very precise amount.

70
00:04:33,630 --> 00:04:37,460
We are either adding some amount or decreasing some amount.

71
00:04:37,620 --> 00:04:42,230
So in our case we might have an object that looks something like this over here.

72
00:04:42,360 --> 00:04:44,580
It might say here's the color that we want to change.

73
00:04:44,580 --> 00:04:45,840
In this case it's red.

74
00:04:46,050 --> 00:04:52,500
And here's how much we want to change it by notice how already by looking at argument number one an

75
00:04:52,500 --> 00:04:56,610
argument number two you might be able to tell that that's very similar to what we have right here a

76
00:04:56,610 --> 00:05:02,170
set color with set color we don't really have that first argument number one.

77
00:05:02,210 --> 00:05:06,590
That has all of our different state properties inside of it but the two arguments we have right here

78
00:05:06,890 --> 00:05:10,110
are very close to argument number two inside that diagram.

79
00:05:10,250 --> 00:05:15,470
These two arguments precisely describe what kind of change we want to make to our state variables is

80
00:05:15,470 --> 00:05:21,980
describing the color that we want to change and how much we want to change it by so argument number

81
00:05:21,980 --> 00:05:28,080
two is very similar to the two arguments that we have inside of our current set color function now inside

82
00:05:28,080 --> 00:05:28,950
the reducer.

83
00:05:29,100 --> 00:05:34,320
We're going to look at argument number two and depending upon this object right here you and I are going

84
00:05:34,320 --> 00:05:38,430
to inspect some of the different properties on it and depending upon the different properties in the

85
00:05:38,430 --> 00:05:43,200
different values inside there we're going to make some decision on how we're going to change our state

86
00:05:43,230 --> 00:05:44,360
object.

87
00:05:44,550 --> 00:05:48,660
So if we had it argument number two that looks like this right here that said colored to change of red

88
00:05:48,680 --> 00:05:49,860
an amount 15.

89
00:05:50,040 --> 00:05:55,290
Well chances are we would want to write some code that would take the state object right here and increment

90
00:05:55,350 --> 00:06:01,300
the property red by 15 very similar to what we are currently doing inside of our set color function.

91
00:06:01,320 --> 00:06:06,480
At present we are inspecting those two arguments right there and depending upon those values we're deciding

92
00:06:06,480 --> 00:06:10,250
to update read in some way.

93
00:06:10,290 --> 00:06:12,120
Now there's just two caveats to this.

94
00:06:12,120 --> 00:06:17,730
Two really big important things to understand and these are going to be two things are going to be slightly

95
00:06:17,730 --> 00:06:21,360
different than what's going on inside of our current set color function.

96
00:06:21,360 --> 00:06:25,230
So the first thing to be aware of here is that we're never going to change that argument.

97
00:06:25,230 --> 00:06:27,590
No one directly.

98
00:06:27,630 --> 00:06:32,010
So in other words we're never going to write out if this is something like Kent State equals blah blah

99
00:06:32,010 --> 00:06:32,490
blah.

100
00:06:32,550 --> 00:06:39,360
You and I are never going to write out some code that says like state DOT red equals state DOT red plus

101
00:06:39,360 --> 00:06:44,820
10 very similar to how we set about our state variables back over here of red green and blue that we're

102
00:06:44,820 --> 00:06:47,370
never going to modify these variables directly.

103
00:06:47,370 --> 00:06:53,220
Same exact thing where this argument number one right here we're never going to modify that object directly

104
00:06:53,640 --> 00:06:56,590
to you might be kind of curious how we're going to make any changes to it.

105
00:06:56,640 --> 00:07:01,160
Don't worry we'll discuss exactly how we're going to do that so technicality.

106
00:07:01,160 --> 00:07:07,490
Number two our reduce our function or our function that manages changes to an object must always return

107
00:07:07,520 --> 00:07:13,240
a value that's essentially going to be used as our state object or our argument number one.

108
00:07:13,250 --> 00:07:19,160
So right now inside of our set color function at every turn or every case right here we eventually return

109
00:07:19,190 --> 00:07:21,140
just to get out of our switch statement.

110
00:07:21,140 --> 00:07:27,440
But essentially we don't really return any value reducer works slightly differently whatever value we

111
00:07:27,440 --> 00:07:33,470
return from a reducer is used as our state object will also go into this in great detail because it's

112
00:07:33,470 --> 00:07:36,070
telling you with words it's not super helpful.

113
00:07:36,070 --> 00:07:36,280
OK.

114
00:07:36,320 --> 00:07:39,070
So let's just do a quick review on some things we discussed right here.

115
00:07:39,110 --> 00:07:41,210
You're going to start writing some code in the next video.

116
00:07:41,270 --> 00:07:48,590
So first off because we have a set of state values that are all extremely related and we know the exact

117
00:07:48,590 --> 00:07:50,980
ways in which we're going to update these values.

118
00:07:51,200 --> 00:07:56,600
Our application is a great candidate for being managed by a reducer or using a reducer to manage our

119
00:07:56,600 --> 00:08:03,330
state secondly a reducer is a function that's going to somehow manage changes that we make to our state

120
00:08:03,390 --> 00:08:04,570
object.

121
00:08:04,590 --> 00:08:06,930
This function is always going to be called with two objects.

122
00:08:06,930 --> 00:08:10,740
The first one will be an object that has all of our state inside of it.

123
00:08:10,740 --> 00:08:15,060
The second argument will be an object that describes exactly how we are supposed to change that state

124
00:08:16,120 --> 00:08:17,410
and then to technicalities.

125
00:08:17,410 --> 00:08:22,600
First off we're never going to change argument number one directly and number two and remember we're

126
00:08:22,600 --> 00:08:24,340
going to go into great detail on this.

127
00:08:24,370 --> 00:08:29,730
We're always going to make sure that we return a value from a reducer as well.

128
00:08:29,790 --> 00:08:31,610
So now we've got some basics put together here.

129
00:08:31,640 --> 00:08:35,870
Let's take a quick pause when we come back the next video we're going to start to refactor our square

130
00:08:35,870 --> 00:08:38,030
screen component to make use of the reducer.