1
00:00:00,150 --> 00:00:09,690
All right, and once we have refactor to basic use reducer set up, now let's see how the dispatch works,

2
00:00:10,020 --> 00:00:19,860
how the register works, and what is a function in order to affect anything in our state, we would

3
00:00:19,860 --> 00:00:20,740
need to dispatch.

4
00:00:21,240 --> 00:00:27,910
And I'm going to do that if the name is there, meaning if it is true, if it's not an empty string.

5
00:00:28,290 --> 00:00:33,950
So I'll have to add at least one letter and then I'll click on add on.

6
00:00:34,020 --> 00:00:35,550
And here we call dispatch.

7
00:00:36,360 --> 00:00:38,130
So that is our function.

8
00:00:38,490 --> 00:00:46,250
And we always, always need to pass in the object with a property by the name of type.

9
00:00:46,680 --> 00:00:48,180
So that is going to be our action.

10
00:00:48,430 --> 00:00:52,140
So action is going to be our object and not in that object.

11
00:00:52,140 --> 00:00:59,700
You must have the property by the name of type and one you need to set it equal to something.

12
00:00:59,940 --> 00:01:03,900
A common practice is using uppercase, but you don't have to.

13
00:01:04,140 --> 00:01:07,050
So in my case, I'll just call this testing.

14
00:01:07,500 --> 00:01:12,690
And then once you dispatch once you dispatch your action, that's what it's called.

15
00:01:12,990 --> 00:01:16,700
Then in register, you need to handle it.

16
00:01:16,830 --> 00:01:25,320
And like I said, reducers taking Aspromonte or two things state right before that update and then what

17
00:01:25,320 --> 00:01:26,790
action you'll want to do.

18
00:01:26,970 --> 00:01:29,220
So now that is, of course, testing.

19
00:01:29,580 --> 00:01:35,550
Now, one thing you need to keep in mind, that ProMED user, you always, always, always want to return

20
00:01:35,880 --> 00:01:42,270
some kind of state because again, this is going to be that use case where if you don't return, well,

21
00:01:42,690 --> 00:01:46,590
none of the functionality that you have later is going to make sense.

22
00:01:46,920 --> 00:01:52,320
So let me just simply start back on so long and you'll see how there's going to be a big fat error if

23
00:01:52,320 --> 00:01:54,330
we don't return the state.

24
00:01:54,630 --> 00:01:57,050
So we get the state right before the update.

25
00:01:57,210 --> 00:02:00,540
And then I also want to cancel the action.

26
00:02:00,540 --> 00:02:08,580
But if I don't return the state from this function, then this functionality won't make sense because

27
00:02:08,580 --> 00:02:10,750
now, of course, it is going to be undefined.

28
00:02:11,010 --> 00:02:17,670
So once I save and once I have the letter over here, check it out now I have cannot read property is

29
00:02:17,670 --> 00:02:19,650
model open of undefined.

30
00:02:19,650 --> 00:02:20,610
Why what?

31
00:02:20,670 --> 00:02:24,870
Because I had the initial state, the default one that is right here.

32
00:02:25,200 --> 00:02:34,650
But since I dispatched the action, then the action went to register and in register I did not return.

33
00:02:34,650 --> 00:02:42,000
And you state my whole functionality went bananas because there's no more is more open.

34
00:02:42,270 --> 00:02:49,470
That's why you always, always need to return some kind of state if you want your functionality to work.

35
00:02:50,260 --> 00:02:56,620
So once I say even then, once we have, for example, letter F, once we click, check it out, what

36
00:02:56,620 --> 00:02:57,890
do we see in the console?

37
00:02:58,330 --> 00:03:02,130
So now of course I see my old state correct.

38
00:03:02,350 --> 00:03:06,390
And I also see this object with the type of testing.

39
00:03:06,910 --> 00:03:12,380
So that is a state right before they update where we have people already and then his more open and

40
00:03:12,380 --> 00:03:13,840
then model content.

41
00:03:14,410 --> 00:03:17,740
So now let's see how we can work with these values.

42
00:03:18,070 --> 00:03:21,270
So we have the state and we also have the action.

43
00:03:21,850 --> 00:03:31,430
So why don't we go with if statement the condition and check whether we are dispatching the action with

44
00:03:31,430 --> 00:03:33,340
the type of testing.

45
00:03:34,220 --> 00:03:41,490
Let's do it, let's say if and then we go with action, then that type, remember, that is the property

46
00:03:41,510 --> 00:03:45,590
name and if that is equal to a testing, then we would want to do something.

47
00:03:46,010 --> 00:03:53,060
So essentially what you do is set up your dispatch functions with your action object, where you set

48
00:03:53,060 --> 00:03:57,620
up type property with a value and then in register you catch them.

49
00:03:57,950 --> 00:04:02,010
You say, all right, if I dispatch this thing, this is what I would want to do.

50
00:04:02,360 --> 00:04:07,120
So notice how we are not directly affecting state.

51
00:04:07,370 --> 00:04:12,040
It's not like we call set name or set people or set model.

52
00:04:12,080 --> 00:04:13,160
We're not doing that.

53
00:04:13,430 --> 00:04:19,070
We only control the state when we dispatch the action and then in reducer.

54
00:04:19,250 --> 00:04:24,280
This is where we deal with our state and essentially it is more structured.

55
00:04:24,500 --> 00:04:32,420
So even though it's a little bit more boilerplate, it is less prone to errors or some kind of silly

56
00:04:32,420 --> 00:04:33,000
bugs.

57
00:04:33,380 --> 00:04:38,120
So let's deal with our if so, if the action type is testing.

58
00:04:38,360 --> 00:04:41,360
Well, what I would want to do well, I would want to return.

59
00:04:41,630 --> 00:04:42,100
Correct.

60
00:04:42,350 --> 00:04:44,300
I always need to return a state.

61
00:04:44,550 --> 00:04:46,430
So in this case, this is the fourth one now.

62
00:04:46,670 --> 00:04:53,030
But now if the type is correct, if it is testing, then I would want to return that new state.

63
00:04:53,510 --> 00:04:59,180
And since it is an object, again, we need to keep in mind that if I just had some kind of property

64
00:04:59,180 --> 00:05:03,590
here, then still my functionality will go bananas.

65
00:05:03,620 --> 00:05:04,560
Why not?

66
00:05:04,580 --> 00:05:10,180
Because I need to have people I need to have is model and I also need to have more content.

67
00:05:10,310 --> 00:05:12,830
What was the way of getting all those values?

68
00:05:12,860 --> 00:05:14,750
Well, we are returning the object.

69
00:05:14,750 --> 00:05:15,170
Correct.

70
00:05:15,170 --> 00:05:22,430
And then we go with the dot dot and then I would want to copy all the values from the state right before

71
00:05:22,430 --> 00:05:22,880
the update.

72
00:05:23,090 --> 00:05:23,490
Correct.

73
00:05:23,930 --> 00:05:29,030
And now we add a comma and then we just decide what values we would want to change.

74
00:05:29,300 --> 00:05:31,280
And for now, we'll just do it manually.

75
00:05:31,520 --> 00:05:32,720
Where I will say, you know what?

76
00:05:32,720 --> 00:05:35,960
People will be equal to my data or a.

77
00:05:37,100 --> 00:05:41,430
That is more open is going to be actually true.

78
00:05:41,450 --> 00:05:49,820
So say the model and also as far as the model content model content, well, we'll set it equal to ihram

79
00:05:50,270 --> 00:05:54,780
and then added, OK, so let's test it out again.

80
00:05:55,100 --> 00:05:59,900
This will only happen when we click on a button.

81
00:05:59,900 --> 00:06:00,360
Correct.

82
00:06:00,650 --> 00:06:02,090
So let me add something here.

83
00:06:02,240 --> 00:06:03,010
And there it is.

84
00:06:03,380 --> 00:06:09,370
Now I have my list, John, Peter, Susan, Anna, and also I have Ihram added.

85
00:06:09,560 --> 00:06:17,240
So the next time I will do something as far as this dispatch, I will already have this particular state

86
00:06:17,240 --> 00:06:17,690
value.

87
00:06:17,690 --> 00:06:19,870
And you can clearly see that if you want to log.

88
00:06:20,240 --> 00:06:25,790
So if we go here with a state the first time we'll click, it is going to be empty.

89
00:06:26,090 --> 00:06:32,090
But then if we just click one more time, then of course we already have the last state.

90
00:06:32,110 --> 00:06:36,930
Probably that's why it's so important to always return state.

91
00:06:37,190 --> 00:06:42,350
Now, as far as this default one, you can return a state if you want.

92
00:06:42,710 --> 00:06:45,920
But another way, how we can do that is through the error.

93
00:06:46,220 --> 00:06:53,780
If the action that you passed in does not match any of the types that you're checking for.

94
00:06:54,170 --> 00:07:07,280
For example, here I could go with throe and a new error and I'll say no matching action type.

95
00:07:07,880 --> 00:07:10,760
So where I would use that, for example.

96
00:07:11,640 --> 00:07:19,070
If I have here the House and then I dispatch and I don't know by mistake, I'm going to go type and

97
00:07:19,100 --> 00:07:21,950
then random random.

98
00:07:22,380 --> 00:07:31,410
So once I save, once I click on the button, if my value is not there, if it is empty, of course,

99
00:07:31,410 --> 00:07:35,950
I'm going to have a big fat error where it's going to say no matching error type.

100
00:07:36,300 --> 00:07:37,490
So what is happening here?

101
00:07:37,830 --> 00:07:40,410
I could technically return a state.

102
00:07:40,680 --> 00:07:41,910
Yeah, that is an option.

103
00:07:42,240 --> 00:07:50,940
But this just gives me a clue that I'm dispatching something that I'm not catching in the register because

104
00:07:50,940 --> 00:07:54,000
in the register at the moment, notice I have my action.

105
00:07:54,390 --> 00:07:58,090
Action, of course, has the type and I'm just checking for testing.

106
00:07:58,350 --> 00:08:04,620
Now, if I would be checking for a random one that I passed, then of course that is a different scenario.

107
00:08:05,100 --> 00:08:06,510
Then everything would work fine.

108
00:08:06,750 --> 00:08:14,040
But this is a good default scenario where I have a bunch of these ifs for all the action types that

109
00:08:14,040 --> 00:08:15,030
we are about to set up.

110
00:08:15,390 --> 00:08:19,120
And then if none of them match, then we throw the error.

111
00:08:19,260 --> 00:08:23,370
Again, the alternative would be just returning a state.

112
00:08:23,640 --> 00:08:30,180
And then if we return a state, you'll notice that nothing will happen because of course, we're not

113
00:08:30,360 --> 00:08:31,710
checking for it at random.

114
00:08:32,010 --> 00:08:37,050
But also the problem might be that you won't notice that, hey, there's something wrong.

115
00:08:37,050 --> 00:08:39,360
I'm not checking for this action.

116
00:08:39,420 --> 00:08:42,810
That's why the alternative would be throwing the error.

117
00:08:43,230 --> 00:08:44,310
So let me delete it.

118
00:08:44,520 --> 00:08:47,220
And now let's add up to something useful.

119
00:08:47,610 --> 00:08:48,750
Now, what is that useful?

120
00:08:48,930 --> 00:08:55,470
Well, instead of testing, I would want to say add item, because essentially this is exactly what

121
00:08:55,470 --> 00:08:56,100
I would want to do.

122
00:08:56,410 --> 00:08:58,230
So I'll say this patch and then type.

123
00:08:58,500 --> 00:09:03,390
And now I'm going to go with add an underscore item again.

124
00:09:03,390 --> 00:09:08,190
This is just a naming convention where everything is uppercase.

125
00:09:08,250 --> 00:09:14,610
And then in between the words, we just use the underscore that is not at all.

126
00:09:15,060 --> 00:09:20,150
And of course, in the register, I would also want to check that.

127
00:09:20,580 --> 00:09:25,200
So I'm going to go back to add and then underscore item.

128
00:09:25,890 --> 00:09:31,960
Now, everything is awesome, but of course we understand that we won't return just a data.

129
00:09:32,370 --> 00:09:39,780
So this is where I would want to get that value that is coming from the input and then add to my empty

130
00:09:39,780 --> 00:09:40,080
array.

131
00:09:40,710 --> 00:09:42,510
The people are poor knowledge.

132
00:09:42,510 --> 00:09:43,500
Just leave it blank.

133
00:09:43,830 --> 00:09:44,460
Over here is.

134
00:09:45,440 --> 00:09:53,510
And we need to decide what how we can pass that data and the way we passed that data is by adding more

135
00:09:53,510 --> 00:09:56,790
properties in here in the object.

136
00:09:57,080 --> 00:10:05,360
Now, of course, what would help is if I would actually create that item once I'm trying to submit

137
00:10:05,360 --> 00:10:05,890
the form.

138
00:10:06,230 --> 00:10:07,340
So let's do it this way.

139
00:10:07,520 --> 00:10:12,280
I'm going to go with const and then new item is equal again.

140
00:10:12,410 --> 00:10:13,730
We need to have that ID.

141
00:10:13,740 --> 00:10:20,860
So I'll come up with that property, new date and then let's go and get time.

142
00:10:21,410 --> 00:10:26,270
And lastly, we'll set it equal to a string and I'll grab that name.

143
00:10:26,660 --> 00:10:35,060
So whatever is in my state value and I once had dispatch, remember, I just said we can add more properties

144
00:10:35,390 --> 00:10:38,240
and a common convention is calling this a lot.

145
00:10:38,240 --> 00:10:39,980
But again, there's no rule.

146
00:10:40,160 --> 00:10:46,040
And the way you would do that, you would add comma, since it is a new property and payload is equal

147
00:10:46,040 --> 00:10:48,390
to my new item.

148
00:10:48,860 --> 00:10:54,980
So now in the register, not only I'm checking for the type, which of course I'm doing since I would

149
00:10:54,980 --> 00:11:01,480
want to set up some kind of return, but I also would want to grab that payload.

150
00:11:02,330 --> 00:11:09,710
So right above my return in the add item condition, I would want to set new items and that is going

151
00:11:09,710 --> 00:11:11,510
to be equal to that.

152
00:11:11,510 --> 00:11:18,530
So let's copy all the values that we have from default, state or state run before the update, which

153
00:11:18,560 --> 00:11:20,270
of course essentially is going to be empty array.

154
00:11:20,270 --> 00:11:23,900
But as we keep on adding items, there's going to be more and more items.

155
00:11:24,170 --> 00:11:25,670
We go with state items.

156
00:11:26,180 --> 00:11:34,760
So whatever array items we have and then I would want to add action and then payload to the new items.

157
00:11:35,060 --> 00:11:36,800
So not where we have the people.

158
00:11:37,160 --> 00:11:40,190
I'm going to go with new items now.

159
00:11:40,190 --> 00:11:44,150
Of course, I would want to open up the model, so I will leave this model through.

160
00:11:44,510 --> 00:11:47,850
And then of course, I'll also leave item added.

161
00:11:48,110 --> 00:11:55,460
So once we say we have a big fat error because I did not add space and between you and so now let's

162
00:11:55,460 --> 00:12:04,820
try it out, I will go with random and then once I click on ADD, then I have another issue that items

163
00:12:04,820 --> 00:12:06,800
is not iterable.

164
00:12:07,070 --> 00:12:10,550
And of course the reason for that is because it is not items.

165
00:12:10,910 --> 00:12:12,560
Sorry, it is people.

166
00:12:12,830 --> 00:12:14,180
My apologies.

167
00:12:14,390 --> 00:12:17,630
So now everything should work and you know, well, we're still on the subject.

168
00:12:18,280 --> 00:12:20,510
I just call this new people.

169
00:12:20,870 --> 00:12:26,540
The reason for that, because in my original setup, I went with items and now as I'm recording, I

170
00:12:26,540 --> 00:12:27,370
just changed my mind.

171
00:12:27,410 --> 00:12:28,970
That's why we got this bug.

172
00:12:29,340 --> 00:12:32,240
Let's just say random and then we'll add.

173
00:12:32,540 --> 00:12:35,060
And there is now we have, Ihram added.

174
00:12:35,510 --> 00:12:38,780
So we display our model beautiful.

175
00:12:39,210 --> 00:12:43,500
And also we showcase that here in our list.

176
00:12:43,870 --> 00:12:45,680
Now, what else we would want to do?

177
00:12:46,070 --> 00:12:51,260
I guess I would want to clean out my values once I submit.

178
00:12:51,680 --> 00:12:52,130
Correct.

179
00:12:52,460 --> 00:12:53,590
That only makes sense.

180
00:12:54,410 --> 00:12:57,140
So let's do it this way where we have the name.

181
00:12:57,530 --> 00:13:02,870
Right after that, I'm going to go with Satnam and I'll set it back to a..

182
00:13:02,870 --> 00:13:05,000
String and knowledge dispatch.

183
00:13:05,000 --> 00:13:09,770
Another action or this one will be no value action.

184
00:13:10,220 --> 00:13:20,810
So if I try to submit item without any values, then of course I would want to showcase that in my model

185
00:13:21,260 --> 00:13:25,220
and I'll just change the action around where it's not going to be.

186
00:13:25,430 --> 00:13:30,640
Type random will say no underscore and then value.

187
00:13:31,160 --> 00:13:35,030
Now when it comes to our no value action.

188
00:13:35,520 --> 00:13:40,010
And by the way, let's just go with action type is equal to.

189
00:13:41,160 --> 00:13:43,090
Now underscore value.

190
00:13:43,470 --> 00:13:50,970
So if that is the case, well, what I would want to do, I simply want to return different moral content.

191
00:13:51,270 --> 00:13:51,780
Correct.

192
00:13:51,990 --> 00:13:53,810
And I also would want to showcase the model.

193
00:13:54,180 --> 00:13:59,490
But remember, I still want to return my people.

194
00:13:59,760 --> 00:14:02,790
I still want to show my items.

195
00:14:02,790 --> 00:14:03,200
Correct.

196
00:14:03,480 --> 00:14:06,900
So that's why, again, we go with turn the other DOT state.

197
00:14:06,910 --> 00:14:11,540
So we copy everything coming from the previous state state before the update.

198
00:14:11,820 --> 00:14:15,410
And then we say model is true.

199
00:14:15,810 --> 00:14:19,460
And also, of course, I would have a different model comment.

200
00:14:19,830 --> 00:14:27,720
So I say model content and I will be equal to a place and her value not separate.

201
00:14:28,500 --> 00:14:31,680
And the problem here is that of course, smart enough.

202
00:14:31,680 --> 00:14:36,890
I added in my previous condition and you know, also the name is a little bit different.

203
00:14:36,900 --> 00:14:40,040
It is is modal, open like so.

204
00:14:40,260 --> 00:14:44,160
And now it's the strength where I'll try to submit and disvalue.

205
00:14:44,430 --> 00:14:52,020
And now, of course, we dispatch the no value and then in action we just check again the whole point

206
00:14:52,020 --> 00:14:59,310
where we copy this virus because essentially we just want to change two properties on that state is

207
00:14:59,310 --> 00:15:01,730
more open and model content.

208
00:15:02,130 --> 00:15:07,350
And I want to leave the people, the list of people intact.

209
00:15:07,500 --> 00:15:14,010
Maybe there's going to be cases, for example, with closing model that will only affect one property.

210
00:15:14,310 --> 00:15:20,610
That's why it is very important once we return that always to copy the values, the previous vows from

211
00:15:20,610 --> 00:15:26,060
the state and then just decide which property value we would want to change.

212
00:15:26,070 --> 00:15:29,250
And in our previous example, of course, we change all three of them.

213
00:15:29,670 --> 00:15:36,570
If you want to dispatch a action and then change only one thing, just make sure that you copy all the

214
00:15:36,570 --> 00:15:36,960
values.

215
00:15:37,290 --> 00:15:42,840
If you would want to do things again, the same thing, make sure that you copy drivers if you want

216
00:15:42,840 --> 00:15:43,800
to change all of them.

217
00:15:43,800 --> 00:15:51,960
Again, it is a good practice to always make sure that you're keeping track of your old state values.

218
00:15:52,260 --> 00:15:53,790
And I think we're in good shape.

219
00:15:54,060 --> 00:15:59,490
So now we can add more actions to our arsenal.