1
00:00:00,120 --> 00:00:07,230
So now that we have created a scorecard container and the guide item and we have done with the context,

2
00:00:07,230 --> 00:00:12,920
the global context, let's move our application from use trade to the use reducer.

3
00:00:12,960 --> 00:00:19,410
Hope to basically use reducer is just the upgraded version of the used trade hook.

4
00:00:19,920 --> 00:00:21,030
But it is.

5
00:00:21,120 --> 00:00:23,070
It provides us more functionalities.

6
00:00:23,070 --> 00:00:28,410
You can handle multiple states and you can perform multiple actions to the particular variable, which

7
00:00:28,410 --> 00:00:30,030
is that in the state.

8
00:00:30,510 --> 00:00:35,550
And it is used for it is used for some more complex operations.

9
00:00:36,120 --> 00:00:40,860
So let me first explain the basic syntax and the basic working of the user.

10
00:00:40,900 --> 00:00:47,970
You said, OK, before that, I will take you to a very beautiful article here on this and.

11
00:00:49,490 --> 00:00:57,330
This has explained the to do so in a very real way, so as you can see, it's threatened clearly that

12
00:00:57,510 --> 00:01:03,150
the use reducer is the better alternative to use that hook and is generally more preferred over the

13
00:01:03,150 --> 00:01:03,790
use to talk.

14
00:01:03,810 --> 00:01:09,690
When you have complex building logic or in the next well depends upon the previous value.

15
00:01:10,170 --> 00:01:14,100
So this is the basic pillar of using a new set hook.

16
00:01:14,600 --> 00:01:19,050
So if you know use it, it's very easy for you to understand you introduce it.

17
00:01:19,290 --> 00:01:24,000
But if you don't know that, then you need to go and look up for use to talk and understand that first

18
00:01:24,330 --> 00:01:26,280
and then to come to use reduce it.

19
00:01:26,730 --> 00:01:29,940
OK, so the syntax is quite similar to the use state.

20
00:01:30,480 --> 00:01:32,330
We have the sconce keyword here.

21
00:01:32,340 --> 00:01:38,790
We have this arrowhead inside that that is, of course variable and with the value will be stored.

22
00:01:38,790 --> 00:01:40,440
And of course, that is a function.

23
00:01:40,890 --> 00:01:45,600
So here we cannot give our custom function right here.

24
00:01:45,930 --> 00:01:54,900
This is a dart dispatch function and this is responsible for everything like whatever the switch cases

25
00:01:54,900 --> 00:02:00,660
and whatever we are, whatever operations which we are going to perform on this variable.

26
00:02:01,110 --> 00:02:04,770
So that is handled by this dispatch method.

27
00:02:05,040 --> 00:02:06,870
So that is very, very important.

28
00:02:06,900 --> 00:02:13,050
And next we go to this is the key word again.

29
00:02:13,380 --> 00:02:18,690
So this is the use reducer keyword here because this is the user left hook.

30
00:02:18,990 --> 00:02:21,510
So previously it was used state.

31
00:02:21,570 --> 00:02:24,690
So you need to just change this from use to the reducer.

32
00:02:25,200 --> 00:02:28,740
And one more important thing inside to see this reducer.

33
00:02:29,010 --> 00:02:36,180
So here will be, of course, some initial values in the initial like scenario for the variable, but

34
00:02:36,510 --> 00:02:45,270
in use state what it used to be that there was only one particular initial value and that third, we

35
00:02:45,270 --> 00:02:53,520
provided one particular like maybe integer the string object array, anything, but that was only one.

36
00:02:54,060 --> 00:02:57,430
But here there are multiple arguments here.

37
00:02:57,450 --> 00:02:59,580
So here is first of all this.

38
00:02:59,580 --> 00:03:01,950
That is an argument that the reducer.

39
00:03:03,260 --> 00:03:08,540
No wonder, he said, is that user defined function that pairs the current state with a dispatch method

40
00:03:08,900 --> 00:03:09,800
to handle the state.

41
00:03:10,130 --> 00:03:12,380
And next, we have the initial arcs.

42
00:03:12,920 --> 00:03:14,300
That means the initial arguments.

43
00:03:14,540 --> 00:03:20,600
Now this initial order is what like the initial values of the particular variable.

44
00:03:20,780 --> 00:03:24,530
So this will store the initial values of that particular variable.

45
00:03:24,830 --> 00:03:29,930
Then we have in it, and it is the function to initialize the state lazily.

46
00:03:30,290 --> 00:03:31,430
Now what does this mean?

47
00:03:31,460 --> 00:03:36,290
Let us take a look at this code and get a little deeper into it.

48
00:03:36,650 --> 00:03:44,000
So inside this abroad year, we have, first of all, we want to empower the user to do so from React,

49
00:03:44,510 --> 00:03:49,370
as this is a normal thing we used to do in the U.S. state or for any number who can react.

50
00:03:49,640 --> 00:03:55,370
But the first thing which we do is we import it from the OK, so that is what we have done now.

51
00:03:55,790 --> 00:03:59,570
Next, we have defined initial state and the reducer.

52
00:03:59,840 --> 00:04:05,780
You see here the reducer and the initial are so that we have to define first, like what is the initial

53
00:04:05,780 --> 00:04:07,700
state and what is the reducer?

54
00:04:08,210 --> 00:04:13,550
So now I like explaining what is the reducer, but let's take a look at the initial state now.

55
00:04:13,790 --> 00:04:16,240
Initial state is single now.

56
00:04:16,730 --> 00:04:17,810
What does this mean?

57
00:04:18,230 --> 00:04:25,190
That whatever the variable we have part inside, but inside is the initial value is assigned over here.

58
00:04:25,610 --> 00:04:28,040
Next, we have the reducer function.

59
00:04:28,340 --> 00:04:31,010
Now this is also very interesting because.

60
00:04:31,940 --> 00:04:37,610
This expects the function and inside that also this expense to particular arguments.

61
00:04:38,090 --> 00:04:39,590
And you cannot change them.

62
00:04:40,040 --> 00:04:41,720
And the first one is the state.

63
00:04:42,350 --> 00:04:44,150
Now what is this state?

64
00:04:44,450 --> 00:04:46,580
And next is the action.

65
00:04:46,760 --> 00:04:47,760
Now where does this action?

66
00:04:47,780 --> 00:04:54,890
OK, so let me explain it to the state is the variable which we have defined over here, and this will

67
00:04:54,890 --> 00:05:02,060
be the new return variable, like when we perform the action, when we perform some operation on the

68
00:05:02,060 --> 00:05:02,720
variable.

69
00:05:03,050 --> 00:05:10,130
But what is going to be written is this state OK because we have already defined initial state.

70
00:05:10,520 --> 00:05:14,790
Now that initial state, we cannot continue with the initial state forever, right?

71
00:05:14,810 --> 00:05:18,800
We need to change our view that this is why we are here to use the user this Red Hook.

72
00:05:19,130 --> 00:05:25,880
So for that, the state comes into the picture and this is responsible for storing the like the final

73
00:05:25,880 --> 00:05:27,980
output or the result of the function.

74
00:05:28,010 --> 00:05:30,410
OK, so next we have the action.

75
00:05:30,770 --> 00:05:39,110
This action is responsible for changing the name, changing the operation, which you want to operate

76
00:05:39,110 --> 00:05:44,330
on that particular variable because as I said, in the use it or do so that you can perform multiple

77
00:05:44,330 --> 00:05:49,070
operations on a single variable and use state, what we used to do that.

78
00:05:49,370 --> 00:05:54,350
OK, we defined that as a function and we defined the variable.

79
00:05:54,620 --> 00:05:57,680
And then we defined a function that is the set variable.

80
00:05:57,890 --> 00:06:02,390
And the third variable was responsible for the changes made to the particular variable.

81
00:06:02,690 --> 00:06:08,290
But at the time, we can make only one change and that function will be executed.

82
00:06:08,300 --> 00:06:10,100
After that, the changes will be made.

83
00:06:10,340 --> 00:06:13,430
But here we can switch among the actions.

84
00:06:13,700 --> 00:06:16,490
That is why this is the action like we can switch.

85
00:06:17,000 --> 00:06:23,510
So next we have the Switch statement inside this function, and this will take an argument of this action.

86
00:06:23,510 --> 00:06:28,630
This X, this action would be paused as an argument to the Switch statement.

87
00:06:28,640 --> 00:06:32,120
OK, now inside the Switch statement.

88
00:06:32,480 --> 00:06:34,070
There are different, different cases.

89
00:06:34,580 --> 00:06:38,810
So according to that, those cases, the variable will be changed.

90
00:06:39,240 --> 00:06:46,160
So for example, here we have taken the case as add now and this will be a string, a string.

91
00:06:46,160 --> 00:06:49,460
But remember this thing which you gave here?

92
00:06:49,550 --> 00:06:54,410
This is the same value which you have to use on dispatching the action.

93
00:06:54,650 --> 00:06:57,770
Now we can bet we'll get to it in in a moment.

94
00:06:58,070 --> 00:07:04,460
But now you see this case and this is the action like this is the string.

95
00:07:04,460 --> 00:07:09,600
And next what we want to return from the state like what should be the output.

96
00:07:09,920 --> 00:07:13,500
So in the written statement, we did state plus one.

97
00:07:13,700 --> 00:07:18,650
All you can write anything state multiplied by one, divided by one or any other thing.

98
00:07:19,010 --> 00:07:19,320
OK.

99
00:07:19,670 --> 00:07:27,380
So what does this imply is that whenever we are calling this reducer and whenever we are giving and

100
00:07:27,740 --> 00:07:30,760
this add, this is string as a dispatch method.

101
00:07:31,070 --> 00:07:38,360
So this this will identify it as a dispatch matter and come here inside this switch statement and it

102
00:07:38,360 --> 00:07:40,970
will search for the add add value here.

103
00:07:41,210 --> 00:07:42,980
Now add case here, basically.

104
00:07:43,190 --> 00:07:50,450
So whenever it will match this add case, it will execute this particular action and the state will

105
00:07:50,450 --> 00:07:52,460
be returned as the final output.

106
00:07:52,490 --> 00:07:52,820
OK.

107
00:07:53,930 --> 00:07:59,570
Next same goes with another case is also now for this subtract that is minus one for each side.

108
00:07:59,870 --> 00:08:00,940
That would be a zero.

109
00:08:00,950 --> 00:08:04,850
We can even give multiply, divide or any other thing.

110
00:08:05,150 --> 00:08:06,890
Now that is our default case.

111
00:08:07,010 --> 00:08:11,900
There will be like if any of the action does not match.

112
00:08:12,380 --> 00:08:15,770
So this will be the default output which we are going to receive.

113
00:08:16,220 --> 00:08:16,520
OK.

114
00:08:16,550 --> 00:08:17,690
I hope this is clear.

115
00:08:18,290 --> 00:08:21,440
Next, we want to define that producer.

116
00:08:21,710 --> 00:08:30,440
Now, remember initializing reduce it like any hope should be initialized at the top level of the function.

117
00:08:30,860 --> 00:08:31,330
Understand.

118
00:08:31,620 --> 00:08:35,960
Now, whenever, like, for example, now we are abd just fine.

119
00:08:36,350 --> 00:08:44,000
So inside the AB function and need any hope if you want to use that particular road needs to be initialized

120
00:08:44,000 --> 00:08:45,140
at the top level.

121
00:08:45,590 --> 00:08:51,890
And if you don't, you will get the error saying that the hook should be initialized at the top level.

122
00:08:51,980 --> 00:08:56,600
So eventually you will get to know, but I'm telling you they're trying to avoid that particular error,

123
00:08:56,600 --> 00:08:56,930
OK?

124
00:08:57,080 --> 00:08:58,370
So that's what we have done here.

125
00:08:58,640 --> 00:09:04,340
We have initialized to use it or do so to hook, and you can see that is the first is the variable which

126
00:09:04,340 --> 00:09:07,040
will be responsible for the output.

127
00:09:07,280 --> 00:09:09,170
Next, we have the dispatch function.

128
00:09:09,200 --> 00:09:14,060
This will be responsible for the cases and the actions related to them.

129
00:09:14,450 --> 00:09:21,800
Next, we have this key word to use reducer and this inside this that radius argument and the initial

130
00:09:21,800 --> 00:09:22,490
state argument.

131
00:09:23,090 --> 00:09:24,620
As simple as that?

132
00:09:25,100 --> 00:09:25,490
No.

133
00:09:26,810 --> 00:09:32,930
Whenever we want to change and we want to give the instruction to that particular to do so.

134
00:09:33,410 --> 00:09:39,620
But what we want to give, we want to give the cases which we have to find in the sweet and the sweet

135
00:09:39,620 --> 00:09:40,310
statement.

136
00:09:40,670 --> 00:09:47,000
For example, it has given here inside a button, he has added on click function and inside this there.

137
00:09:47,000 --> 00:09:53,450
The fact that the function and this badge in the dispatch function is passing an argument of add the

138
00:09:53,480 --> 00:09:59,540
what it will do it will do, it will go to that statement and it will spread cheer for that and it will

139
00:09:59,690 --> 00:10:01,220
execute that particular action.

140
00:10:02,450 --> 00:10:02,870
Now.

141
00:10:03,910 --> 00:10:10,330
This and and when we want to bring that particular variable, we will we will bring this count inside

142
00:10:10,330 --> 00:10:13,650
the parameters because this is the JavaScript and this is a dynamic value.

143
00:10:13,660 --> 00:10:16,030
This is not a hardcoded static value.

144
00:10:16,510 --> 00:10:20,950
So that is why we have provided this curly braces here.

145
00:10:21,640 --> 00:10:27,100
So this was and you can see this as an example also, but this was all about the user to do so.

146
00:10:27,100 --> 00:10:29,530
The hook, I hope this is clear to you.

147
00:10:29,920 --> 00:10:37,240
And now I explain this in the beginning because now we are going to use this and I don't want any doubt

148
00:10:37,240 --> 00:10:42,490
in that because our understanding is really important before executing the main part.

149
00:10:42,880 --> 00:10:47,740
Now we can go back to our project and we can just implement that in our project.

150
00:10:48,040 --> 00:10:54,220
Now remember, this was a really, really important concept because you state, you state and use REDUCE-IT

151
00:10:54,220 --> 00:10:58,540
are like, like used very commonly in react.

152
00:10:58,810 --> 00:11:02,800
You cannot think of react bigger without use state.

153
00:11:03,070 --> 00:11:04,030
I'll use the reducer.

154
00:11:04,510 --> 00:11:06,520
So that is what we have understood.

155
00:11:06,550 --> 00:11:09,730
Next, we are going to implement that in our project.

156
00:11:10,210 --> 00:11:14,560
Now we will compete, will upgrade this use state to use it or do such.