1
00:00:00,820 --> 00:00:03,940
In the last video we created our first reducer function right here.

2
00:00:03,970 --> 00:00:08,830
So now we just need to finish wiring up our use reducer inside of square screen.

3
00:00:08,830 --> 00:00:12,300
All right let's reevaluate this line right here now with what we know.

4
00:00:12,310 --> 00:00:13,990
First off we call the use reducer.

5
00:00:14,080 --> 00:00:16,390
We passed in our reducer function to it.

6
00:00:16,420 --> 00:00:21,550
We also passed in an initial value for our state object when we call use reducer.

7
00:00:21,550 --> 00:00:23,570
That gives us back two things.

8
00:00:23,590 --> 00:00:26,000
First off it gives us our current state.

9
00:00:26,110 --> 00:00:32,440
Very similar to how with our use state hook we had said whenever we called a set or a setter with you

10
00:00:32,440 --> 00:00:36,700
state that made our component automatically render in a very similar fashion.

11
00:00:36,730 --> 00:00:42,310
When we use use reducer right here anytime our state object changes because of our reducer the entire

12
00:00:42,310 --> 00:00:44,080
component is going to re render.

13
00:00:44,140 --> 00:00:49,600
So over time our function this entire Functional Component right here is going to be called multiple

14
00:00:49,660 --> 00:00:55,000
different times every time it gets called the value of state is going to be slightly different.

15
00:00:55,060 --> 00:01:00,560
It's going to have whatever changes we made inside a very juicer function right here.

16
00:01:00,610 --> 00:01:05,370
Now the very last question is how do we actually run that reducer and make a change.

17
00:01:05,380 --> 00:01:10,960
Well that's the job of this dispatch function right here a better name for dispatch would probably be

18
00:01:11,560 --> 00:01:14,170
run my reducer.

19
00:01:14,170 --> 00:01:19,890
That would be a way better name than dispatch whenever we want to make a change to our state object.

20
00:01:19,890 --> 00:01:21,900
We're going to run run my reducer.

21
00:01:21,900 --> 00:01:28,200
We're going to invoke it and we're going to pass in an argument to be used as our action object.

22
00:01:28,230 --> 00:01:29,340
That's the entire key.

23
00:01:29,940 --> 00:01:33,930
So you and I are going to change first minute run my reducer.

24
00:01:33,930 --> 00:01:38,880
We're gonna pass in some object that describes how we want to modify our state reactors then going to

25
00:01:38,970 --> 00:01:44,670
automatically run our reducer and whenever we passed into the run my reduce our function right here

26
00:01:44,880 --> 00:01:47,760
we'll be provided as the second argument.

27
00:01:47,760 --> 00:01:55,140
So then inside of here we will inspect that second argument and decide how to change our state OK.

28
00:01:55,200 --> 00:02:00,420
So what that means is we now need to go back around to all of our on increase and on decrease callbacks

29
00:02:00,420 --> 00:02:05,970
inside of here and in each case we need to make sure we call run my reducer with the appropriate action

30
00:02:06,030 --> 00:02:06,840
object.

31
00:02:07,110 --> 00:02:11,460
When I say appropriate action object I essentially mean we have to call it with the appropriate color

32
00:02:11,460 --> 00:02:18,560
to change prop and the appropriate amount either plus 15 or minus 15 so let's give it a shot.

33
00:02:18,800 --> 00:02:23,660
Before we add it back in I'm going to change the name of run my reducer back here to dispatch.

34
00:02:23,660 --> 00:02:27,740
Now we don't have to call it dispatch if you want to call it run by reducer.

35
00:02:27,740 --> 00:02:28,650
Just leave it as that.

36
00:02:28,670 --> 00:02:32,150
There's actually no requirement whatsoever to call this function Dispatch.

37
00:02:32,150 --> 00:02:33,330
It's just convention.

38
00:02:33,380 --> 00:02:35,930
That's all I'm going to leave it as dispatch.

39
00:02:35,940 --> 00:02:39,870
Just so I technically show you the right thing but honestly I would recommend you still call it run

40
00:02:39,870 --> 00:02:41,300
by reducer.

41
00:02:41,310 --> 00:02:47,200
OK so on color counter right here for on increase we're going to call dispatch we're going to pass in

42
00:02:47,210 --> 00:02:48,090
an object.

43
00:02:48,090 --> 00:02:53,300
Remember this object right here is going to be showing up inside of reducer as that action.

44
00:02:53,310 --> 00:02:56,820
So it needs to have a color to change crop of red green or blue.

45
00:02:56,940 --> 00:03:02,370
And the amount that we want to change red green or blue by so when we call dispatch we're going to pass

46
00:03:02,370 --> 00:03:10,530
an option which we object we'll give it a property of color to change we want to change the color red

47
00:03:10,530 --> 00:03:15,070
so I'll pass that as a string and then we need to also provide the amount.

48
00:03:15,330 --> 00:03:22,260
And so that's going to be our color increment constant and we defined at the very top of this file in

49
00:03:22,260 --> 00:03:24,480
this case we're trying to increase color.

50
00:03:24,480 --> 00:03:28,870
So I'm going to pass in a positive color increment okay.

51
00:03:28,880 --> 00:03:33,620
So now we can duplicate that down too on decrease in the case of on the decrease we're going to call

52
00:03:33,620 --> 00:03:35,300
dispatch again.

53
00:03:35,300 --> 00:03:39,550
Once again we're going to define colored to change of red.

54
00:03:39,920 --> 00:03:48,610
But this time for the amount we want to do negative 1 times color increment like so because now we want

55
00:03:48,610 --> 00:03:50,220
to decrease our color.

56
00:03:50,290 --> 00:03:54,820
So we're going to essentially add a negative number.

57
00:03:54,840 --> 00:03:55,110
All right.

58
00:03:55,140 --> 00:04:00,250
Now we can essentially repeat these two dispatch statements for all of our different color counters.

59
00:04:00,260 --> 00:04:04,990
I'm going to zoom out for a second just you can see that line very easily and then I'll write in my

60
00:04:04,990 --> 00:04:10,060
dispatch statements or color counter blue and color counter Green as well.

61
00:04:10,360 --> 00:04:16,360
So I'll do my dispatch the second one color and change in this case will be you're not green but blue

62
00:04:17,420 --> 00:04:27,520
the amount will be color increment and we'll do our next dispatch this will have a color change color

63
00:04:27,520 --> 00:04:31,000
to change sorry type of their color to change in both cases

64
00:04:34,040 --> 00:04:40,660
of blue in our amount will be color increment and this one needs to be negative so I'll once again do

65
00:04:40,670 --> 00:04:46,340
negative 1 times color increment and now we'll repeat that once meant once again.

66
00:04:46,440 --> 00:05:00,190
So dispatch color to change green amount is color increment then finally dispatch for the negative case

67
00:05:00,340 --> 00:05:07,220
color to change green amount color increment OK.

68
00:05:07,230 --> 00:05:07,800
There we go.

69
00:05:07,820 --> 00:05:14,870
There's all three them put together so we've now got three very distinct action objects.

70
00:05:14,880 --> 00:05:20,550
Well I guess six once again that technically we've got color change of red with a positive color in

71
00:05:20,560 --> 00:05:21,330
command and a negative.

72
00:05:21,330 --> 00:05:22,530
So yeah really six and total

73
00:05:25,490 --> 00:05:30,200
now the very last thing you have to do to test all this out back down inside of our view element down

74
00:05:30,200 --> 00:05:30,530
here.

75
00:05:30,530 --> 00:05:33,010
Remember that square that we're giving you a background color too.

76
00:05:33,020 --> 00:05:37,820
Right now we're referencing red green and blue red green and blue are no longer defined inside of our

77
00:05:37,820 --> 00:05:38,520
component.

78
00:05:38,690 --> 00:05:46,390
Instead red green and blue are nested inside of the state object so we can either update red green blue

79
00:05:46,390 --> 00:05:53,350
right here to be like state red state dark green and state dark blue but another way to do this would

80
00:05:53,350 --> 00:05:58,830
be to use a little bit of restructuring let's try doing that instead.

81
00:05:58,830 --> 00:06:08,970
So to use some de structuring we could write out const red green blue is coming from state like so now

82
00:06:08,970 --> 00:06:13,980
we have access to the variables red green and blue inside of our component once again we could alternatively

83
00:06:13,980 --> 00:06:20,280
try to D structure off of this state value inside of here like inside the array but honestly that might

84
00:06:20,280 --> 00:06:25,450
make things a little bit too confusing right now so I'm going to leave this as is OK.

85
00:06:25,490 --> 00:06:31,930
So I gotta say this and we'll do a quick test now if you see any errors inside of your device.

86
00:06:31,960 --> 00:06:32,800
First thing to do.

87
00:06:32,800 --> 00:06:35,140
Remember tried to reload the application.

88
00:06:35,320 --> 00:06:38,020
If you're on a physical device you can do that by shaking the phone.

89
00:06:38,110 --> 00:06:40,510
You should see the development menu come up.

90
00:06:40,510 --> 00:06:45,640
You can hit reload javascript if you're on a emulator or a simulator you can at the reload button down

91
00:06:45,640 --> 00:06:47,220
here at the bottom.

92
00:06:47,290 --> 00:06:49,800
Eventually we should get back to our home screen.

93
00:06:49,930 --> 00:06:54,490
If you don't see the home screen appear and if you only see a red screen saying that there's some typo

94
00:06:54,700 --> 00:06:57,610
I can guarantee you I can absolutely guarantee you.

95
00:06:57,610 --> 00:06:59,760
You made a typo in the code we just wrote.

96
00:06:59,830 --> 00:07:04,990
So please triple check whatever code you just wrote the error message will give you a very distinct

97
00:07:05,050 --> 00:07:07,830
line number to look at the error message that's coming up.

98
00:07:07,840 --> 00:07:12,410
Might tell you to look at a line number that's slightly underneath whatever typo you just made however.

99
00:07:12,430 --> 00:07:17,700
So do we start to like look a little bit above or below or whatever else.

100
00:07:17,700 --> 00:07:17,960
All right.

101
00:07:17,970 --> 00:07:21,040
So go to my square demo and I'll do increase red.

102
00:07:21,050 --> 00:07:21,300
Yep.

103
00:07:21,330 --> 00:07:29,820
Getting red X black there's blue and there's green as well.

104
00:07:30,570 --> 00:07:32,500
Looks like we might have a little typo here.

105
00:07:32,550 --> 00:07:36,840
So I'm heading decrease green but the colors just getting more and more green.

106
00:07:36,890 --> 00:07:38,990
A are we probably made a typo.

107
00:07:39,060 --> 00:07:41,520
Yep he definitely did so on my amount right here.

108
00:07:41,520 --> 00:07:43,280
I have color increment positive.

109
00:07:43,290 --> 00:07:47,410
I never multiplied by negative 1 we take care of that really quickly.

110
00:07:47,440 --> 00:07:48,750
That's better.

111
00:07:48,760 --> 00:07:52,570
So on my green I've got an amount of negative 1 times color increment.

112
00:07:52,600 --> 00:07:54,040
Now I can test again.

113
00:07:54,270 --> 00:07:55,590
Increase green.

114
00:07:55,590 --> 00:07:58,220
That's better.

115
00:07:58,270 --> 00:07:59,010
So that's pretty much it.

116
00:07:59,040 --> 00:08:02,200
That is our first experience at using reduced eyes.

117
00:08:02,220 --> 00:08:05,470
Now I know that this is probably seem really over the top.

118
00:08:05,490 --> 00:08:07,710
Like way more complicated than it needs to be.

119
00:08:07,740 --> 00:08:10,890
And I agree with you 100 percent don't get me wrong.

120
00:08:10,980 --> 00:08:16,620
The code we wrote Inside of here maybe not the best approach for handling just a simple color changing

121
00:08:16,620 --> 00:08:17,800
application.

122
00:08:17,850 --> 00:08:23,040
The reason we use this pattern is that it's going to make handling data and managing state inside of

123
00:08:23,100 --> 00:08:29,280
more complex applications way easier than if we were trying to use separate state variables.

124
00:08:29,280 --> 00:08:33,720
So this is kind of a contrived example where it's kind of hard to see the benefits but eventually we're

125
00:08:33,720 --> 00:08:36,240
going to work on way more complicated applications.

126
00:08:36,240 --> 00:08:41,340
We're using this pattern is going to be a huge blessing and we're gonna be really happy that we learned

127
00:08:41,370 --> 00:08:43,840
how to use reducer like this.

128
00:08:43,870 --> 00:08:44,130
All right.

129
00:08:44,160 --> 00:08:45,820
So we'd love one last thing to do.

130
00:08:45,820 --> 00:08:50,080
Remember we need to make sure that we add in some validation to make sure that we don't increase or

131
00:08:50,080 --> 00:08:52,580
decrease any of our colors by too much.

132
00:08:52,570 --> 00:08:54,240
So let's take care of that in the next video.