1
00:00:00,330 --> 00:00:08,370
And once we're familiar with our API now, I'd want to set up the general structure for smart use reducer

2
00:00:08,940 --> 00:00:16,380
and in the process we'll talk about all of these suckers as well, essentially why we're importing some

3
00:00:16,380 --> 00:00:18,960
variables from the actions.

4
00:00:19,500 --> 00:00:24,260
And I'm going to start by setting up, of course, my use reducer.

5
00:00:24,690 --> 00:00:31,740
So I already imported from react the errors and then somewhere in the app provider and my component

6
00:00:31,740 --> 00:00:36,150
body, I'm going to go with CONSED and then remember, we're getting two values.

7
00:00:36,480 --> 00:00:43,650
We're getting a state and we also have a dispatch function and that is equal to user producer.

8
00:00:43,890 --> 00:00:45,900
And then we need to pass in two things.

9
00:00:46,200 --> 00:00:52,950
We need to pass in a reduced function, which essentially is going to be responsible for setting up

10
00:00:52,950 --> 00:01:00,540
our state because of course, all the changes that will apply to our state are going to be done in reducer.

11
00:01:01,080 --> 00:01:06,150
And then also I would want to pass in initial state, which of course, by default is just going to

12
00:01:06,150 --> 00:01:07,760
be empty object.

13
00:01:08,250 --> 00:01:14,730
So when I have the user user, we pass in reducer function, something that will set up a little bit

14
00:01:14,730 --> 00:01:18,960
later, meaning we have the file and everything, but there's really no logic in there.

15
00:01:19,170 --> 00:01:22,120
And then we're going to go with initial state.

16
00:01:22,590 --> 00:01:24,830
So these are two things that we would want to set up.

17
00:01:25,320 --> 00:01:27,840
And then of course, we'll set up the Futch function.

18
00:01:28,260 --> 00:01:35,430
But for the time being, I just want to worry about setting up a loading like other API project.

19
00:01:35,730 --> 00:01:42,420
There's going to be a loading and unloading is going to be displayed, of course, in the storage.

20
00:01:42,780 --> 00:01:47,570
So in the stories component, if we're loading, then we'll show the spinner.

21
00:01:48,090 --> 00:01:52,980
By the way, if you want to see it, check it out, click, click, click and notice you're going to

22
00:01:52,980 --> 00:01:53,970
be getting that spinner.

23
00:01:54,300 --> 00:01:58,860
And then once we've got our data, then, of course, I display the storage.

24
00:01:58,980 --> 00:02:04,110
But again, the moment we just worry about the loading, because in the process, I wouldn't want to

25
00:02:04,110 --> 00:02:07,560
talk about why we are setting up these actions as variables.

26
00:02:07,770 --> 00:02:13,950
So let's start over here or we're going to go with constant fetch and storage.

27
00:02:14,190 --> 00:02:17,340
So and that is equal to my async.

28
00:02:17,580 --> 00:02:19,560
Eventually I'll pass in the URL.

29
00:02:19,920 --> 00:02:26,770
But since I only care about loading right now, I'll just leave it empty when I invoke it in my usufruct.

30
00:02:27,060 --> 00:02:27,930
So that is good.

31
00:02:28,200 --> 00:02:30,690
And I would want to dispatch an action.

32
00:02:31,140 --> 00:02:38,160
Remember, if we wanted to change anything in the state, we always needed to do that using this patch.

33
00:02:38,550 --> 00:02:45,600
So we have this over here and then in this patch we pass in the object and what was a must and the object

34
00:02:45,870 --> 00:02:47,940
was a type property.

35
00:02:48,390 --> 00:02:56,280
And here for the time being, I'm just going to go set and then loading, like so said, loading, and

36
00:02:56,280 --> 00:03:00,900
eventually I'm going to do something in reducer when it comes to set loading.

37
00:03:01,110 --> 00:03:01,980
So that's a start.

38
00:03:02,160 --> 00:03:04,550
And then I would want to go with my usufruct.

39
00:03:05,600 --> 00:03:12,710
So when my uploads, I have a callback function and what I would want to do is simply invoke fetch and

40
00:03:13,010 --> 00:03:15,380
stories, so I'm going to invoke it.

41
00:03:15,950 --> 00:03:19,220
And of course, that is going to happen when my app loads.

42
00:03:19,510 --> 00:03:25,190
So now the next step is heading over to producer and handle that loading.

43
00:03:25,850 --> 00:03:31,100
Now, before I do that, though, in initial state, of course, I would want to set up that property.

44
00:03:31,580 --> 00:03:38,390
I would want to go with is loading and I would set it equal to Luxo.

45
00:03:38,790 --> 00:03:40,010
So part of the same.

46
00:03:40,500 --> 00:03:45,040
And then, of course, where I have the value now, I would want to pass in my state.

47
00:03:45,440 --> 00:03:47,800
So I'm going to go here back to just Strickland.

48
00:03:47,810 --> 00:03:50,980
So Double Curley's and then I go with State.

49
00:03:51,350 --> 00:03:59,780
So pass in all the properties that are coming back from, use a producer from the state and the user

50
00:03:59,810 --> 00:04:00,170
user.

51
00:04:00,500 --> 00:04:04,120
And then as far as initial state, this is my object.

52
00:04:04,610 --> 00:04:06,460
So hopefully that is clear.

53
00:04:06,900 --> 00:04:13,670
And of course before I do anything in the reducer, don't worry functionalities coming up in the storage

54
00:04:14,180 --> 00:04:18,470
I would want to import is loading from my global context.

55
00:04:18,890 --> 00:04:21,980
And then if I'm loading, I don't want to display loading.

56
00:04:22,220 --> 00:04:26,250
If not, then I would want to display this storage component.

57
00:04:26,600 --> 00:04:32,840
Now, the problem right now is that of course, in the app, Jass are on display, all of them search

58
00:04:32,840 --> 00:04:34,160
form stories and buttons.

59
00:04:34,370 --> 00:04:35,180
So my apologies.

60
00:04:35,180 --> 00:04:37,310
I said we're going to be going to reducer.

61
00:04:37,670 --> 00:04:41,060
But in fact, there's a few other things that we would need to do.

62
00:04:41,060 --> 00:04:44,260
First, don't worry, functionality is coming up.

63
00:04:44,660 --> 00:04:45,830
So in the app, just.

64
00:04:47,040 --> 00:04:54,210
I'm going to go back to the fragment, so and then we'll type three components, we're going to look

65
00:04:54,210 --> 00:04:59,820
for search form, we're going to look for the buttons, which at the moment has nothing in there.

66
00:05:00,060 --> 00:05:02,420
And we're going to go with our stories.

67
00:05:02,700 --> 00:05:05,420
So these are the three components we would want to render.

68
00:05:05,730 --> 00:05:10,920
And of course, at the moment, our work is going to be in the storage component.

69
00:05:11,310 --> 00:05:12,390
So we navigate their.

70
00:05:13,290 --> 00:05:22,370
And we already have used global context, so I'm importing the hook that provides my context and then

71
00:05:22,410 --> 00:05:28,040
I would want to get it loaded on because I pass it and I have not that and then state.

72
00:05:28,380 --> 00:05:30,740
So if I'm loading, I would want to display the spinner.

73
00:05:31,350 --> 00:05:37,980
And then once I'm done loading, I will display all my stories, which at the moment are not there.

74
00:05:38,490 --> 00:05:40,890
I just worry about the loading.

75
00:05:41,260 --> 00:05:42,850
That's the initial setup.

76
00:05:43,200 --> 00:05:46,200
So in the stories, we're going to go here with const.

77
00:05:47,100 --> 00:05:51,780
And then since I know that I'm passing the state, I'm just going to go with is loading, and that is

78
00:05:51,780 --> 00:05:53,960
equal to use global context.

79
00:05:54,330 --> 00:05:56,960
I invoke it and now it's set up multiple times.

80
00:05:57,600 --> 00:06:02,610
So if I'm loading, then I would want to play with the class loading.

81
00:06:02,850 --> 00:06:07,890
And if I'm not loading for the time being, I'm just going to display this heading to the front loading

82
00:06:08,140 --> 00:06:13,200
turn and I'm there and the class name is loading.

83
00:06:13,510 --> 00:06:20,760
So and if I'm not loading, then of course I'm going to display my story's component.

84
00:06:21,360 --> 00:06:22,200
Let me refresh.

85
00:06:22,500 --> 00:06:24,600
And at the moment I don't see anything.

86
00:06:25,150 --> 00:06:26,550
Let me go here.

87
00:06:26,940 --> 00:06:27,930
Here's the bigger screen.

88
00:06:28,260 --> 00:06:30,510
And let's see, maybe I messed it up some more.

89
00:06:30,900 --> 00:06:35,250
So I have my console here and not just see here.

90
00:06:35,670 --> 00:06:45,090
What is the value for is loading is loading so online as far as the value, it is true in the beginning

91
00:06:45,240 --> 00:06:47,210
and then it is on the phone.

92
00:06:47,280 --> 00:06:47,670
Why?

93
00:06:48,010 --> 00:06:50,490
Well, because I already dispatched the action.

94
00:06:50,910 --> 00:06:51,690
So this is good.

95
00:06:52,230 --> 00:06:56,460
I'm loading by default and since I'm dispatching here set loading.

96
00:06:57,540 --> 00:07:02,840
Of course, it goes back to the on the fine because I'm not doing anything in the register.

97
00:07:03,200 --> 00:07:11,370
So now finally, let's navigate to reducer and then let's jog your memory of where in the reducer we

98
00:07:11,370 --> 00:07:16,390
passed in two things we passed in state as well as the action.

99
00:07:17,160 --> 00:07:22,410
So what is the current state right before the update and then what action?

100
00:07:22,430 --> 00:07:23,130
Our passing.

101
00:07:23,700 --> 00:07:29,980
So what I would want to do with my state and our case, we have set loading.

102
00:07:30,180 --> 00:07:30,630
Correct.

103
00:07:31,050 --> 00:07:36,990
And if you remember previous projects, we did something like this where we went, what if an action

104
00:07:36,990 --> 00:07:40,370
type and then some kind of result.

105
00:07:40,680 --> 00:07:41,060
Correct.

106
00:07:41,190 --> 00:07:47,760
So some kind of action, whether that was at an increasing item, decreasing item deleting or whatever.

107
00:07:48,150 --> 00:07:49,830
And we can definitely do it this way.

108
00:07:50,250 --> 00:07:56,250
But there's also another popular way of how to set us up using switch again.

109
00:07:56,250 --> 00:08:00,720
Please keep in mind the functionality won't change is just different.

110
00:08:00,720 --> 00:08:05,270
People have different preferences and some people prefer using switch.

111
00:08:05,700 --> 00:08:11,940
And since I would want to show you how to work with switch instead of a bunch of statements, that's

112
00:08:11,940 --> 00:08:14,340
why in this project will you switch again?

113
00:08:14,580 --> 00:08:20,900
Functionality won't change just the setup that we're going to use and instead of using the safe.

114
00:08:21,870 --> 00:08:29,460
I'm going to go here with a switch and then I'm looking for action and then type, so what type of action

115
00:08:29,460 --> 00:08:30,140
I would want to do.

116
00:08:30,390 --> 00:08:37,920
And then as far as the switch, the syntax is following where we go with case and then whatever is the

117
00:08:37,920 --> 00:08:38,230
case.

118
00:08:38,250 --> 00:08:40,110
So in our case, what is the case?

119
00:08:40,500 --> 00:08:41,640
Well, it is set.

120
00:08:41,970 --> 00:08:45,240
And again, these need to match.

121
00:08:45,750 --> 00:08:51,580
If I have a case for self-loading, of course, when I dispatch, I also need to call this set loading.

122
00:08:51,810 --> 00:08:55,400
By the way, this is where our variables are going to come into play.

123
00:08:55,890 --> 00:09:01,890
And as far as functionality in this case, if I'm loading, then I would want to set up the column.

124
00:09:02,910 --> 00:09:09,050
And then I'm going to go with a return and then that state, because, of course, I would want to return

125
00:09:09,070 --> 00:09:12,390
previous values and we're going to go what is loading?

126
00:09:13,050 --> 00:09:19,740
And of course, since I'm setting up the loading our turn this astro, at the moment, there are no

127
00:09:19,740 --> 00:09:24,390
different values in the initial state, but eventually, of course, they're are going to be there.

128
00:09:24,660 --> 00:09:26,450
And that's why I'll say that about state.

129
00:09:26,820 --> 00:09:32,250
So use the spirit operator, get all the values and then change only is loading.

130
00:09:32,670 --> 00:09:35,930
And what I also would want to do is set up some kind of default.

131
00:09:36,270 --> 00:09:41,980
And in this case, I would just want to throw the error if there is no matching action type.

132
00:09:42,000 --> 00:09:47,340
Remember, we also have an option of just returning a state that was one of the options.

133
00:09:47,340 --> 00:09:49,740
But in this case, I'm going to go with default.

134
00:09:50,100 --> 00:09:51,510
So that's my default case.

135
00:09:51,870 --> 00:09:57,360
If none of the actions that I passed in March are going to say default here, and then I would want

136
00:09:57,360 --> 00:10:02,800
to throw error somewhere safe, say all new error, and I would want to pass incomplete.

137
00:10:02,860 --> 00:10:03,140
Right.

138
00:10:03,750 --> 00:10:08,610
We were going to go with no matching matching over here action type.

139
00:10:09,090 --> 00:10:16,560
So let's add your quotation marks and we're going to go with action type one more quotation mark and

140
00:10:16,860 --> 00:10:18,330
action type.

141
00:10:18,690 --> 00:10:19,350
We're Servet.

142
00:10:20,660 --> 00:10:27,600
And check it out now, of course, we are loading why one, because our set loading is returning to

143
00:10:27,620 --> 00:10:30,470
state and then we said is loading tomorrow.

144
00:10:30,710 --> 00:10:37,400
Now, again, if you're wondering why we have actually true and we also set it up here when we're fetching

145
00:10:37,460 --> 00:10:41,930
stories because we'll fetch for new stories as we're typing.

146
00:10:42,260 --> 00:10:49,010
So always every time I change something here in input, I would want to start with loading.

147
00:10:49,430 --> 00:10:51,740
So that's going to be my initial start.

148
00:10:52,220 --> 00:10:55,170
And we're almost done with our initial setup.

149
00:10:55,460 --> 00:10:56,710
Everything works beautifully.

150
00:10:56,870 --> 00:10:57,920
We have set loading.

151
00:10:58,400 --> 00:11:04,280
But now let's think about it a little bit where notice here I have the strength I have set loading.

152
00:11:05,170 --> 00:11:12,820
And then I also have in the reducer set loading, and it is very easy for me to make a mistake where

153
00:11:12,820 --> 00:11:22,190
if I go to context and if I'm typing this string modify by mistake, add the S at the end of my loading.

154
00:11:22,570 --> 00:11:28,830
Well, now I have a big fat error where it says no matching settlor, which is exactly what I wanted

155
00:11:28,830 --> 00:11:34,870
to correct because that is my default, where I'm checking if the action type doesn't match anything

156
00:11:35,170 --> 00:11:39,070
that I have right now in my producer, then I throw the error.

157
00:11:39,430 --> 00:11:43,030
I say no matching and then the action type that was passed in.

158
00:11:43,370 --> 00:11:50,820
And notice here, of course, I'm checking for set loadings line and here I'm checking for set loading.

159
00:11:51,160 --> 00:11:52,380
So what is a better option?

160
00:11:52,750 --> 00:11:53,980
Well, a better option.

161
00:11:55,070 --> 00:12:03,490
Is the set up all your actions as variables, so what does that mean, that you create a file and notice

162
00:12:03,500 --> 00:12:05,060
how I'm right away exporting?

163
00:12:05,630 --> 00:12:10,940
So I come up with some kind of name that is my variable name, and then here I have the value for the

164
00:12:10,940 --> 00:12:11,300
string.

165
00:12:11,840 --> 00:12:19,640
And instead of hopping around my project and then passing the string like so where I can of course make

166
00:12:19,760 --> 00:12:28,390
silly typos, instead I import where I'm setting up my use reducer as well as where I have the actual

167
00:12:28,390 --> 00:12:28,910
producer.

168
00:12:29,420 --> 00:12:34,280
So since I'm exporting these variables now, I can import in both places.

169
00:12:34,760 --> 00:12:39,740
And then instead of using a string each and every time I use the variable.

170
00:12:40,220 --> 00:12:46,580
So I'm not going to go with set loading, I'm going to go with my variable, which has the name of the

171
00:12:46,580 --> 00:12:46,910
loading.

172
00:12:47,210 --> 00:12:51,790
And I'm also going to do the same thing over here where I have the producer.

173
00:12:52,250 --> 00:12:58,340
So instead of setting up as a string, I'm going to go with my variable.

174
00:12:58,670 --> 00:13:06,050
And what's really cool that this just prevents you from doing something wrong, because now, of course,

175
00:13:06,260 --> 00:13:07,780
this value is in one place.

176
00:13:08,270 --> 00:13:11,930
It is sitting in the actions and we just export it.

177
00:13:12,320 --> 00:13:17,590
And everywhere where we want to use that string value, we just import that loading.

178
00:13:18,380 --> 00:13:25,580
And in that case, if I make some kind of typo here, if I go set loading out right away, I have the

179
00:13:25,580 --> 00:13:32,060
error where react complains, hey, set loading is not define what variable are you trying to get?

180
00:13:32,380 --> 00:13:35,450
And of course in my case that is set loading.

181
00:13:35,600 --> 00:13:37,540
That is the proper variable.

182
00:13:37,880 --> 00:13:40,190
Now this is more of a common pattern.

183
00:13:40,610 --> 00:13:42,200
Doesn't mean that you need to follow it.

184
00:13:42,440 --> 00:13:46,970
If you like to pass everything as a string, you can definitely do so.

185
00:13:47,150 --> 00:13:52,880
But you will see this pattern used a lot where again, we set up some kind of separate file.

186
00:13:53,240 --> 00:13:58,520
We come up with names, so variable names and then we have the values again.

187
00:13:58,520 --> 00:14:01,990
Common practice is used in uppercase, but you don't have to.

188
00:14:02,630 --> 00:14:06,320
And then of course, I come up with my action types.

189
00:14:06,620 --> 00:14:12,740
I notice here how I already created all of them for you because again, I thought that it would be somewhat

190
00:14:12,740 --> 00:14:19,030
redundant if we would just retype the action variables with the values.

191
00:14:19,280 --> 00:14:26,090
And then in both places where I have the producer, I import all the actions that hold those string

192
00:14:26,090 --> 00:14:28,460
values and the same goes in the context.

193
00:14:29,210 --> 00:14:37,880
So when I would want to dispatch some kind of action, I just pass in the variable and then in the reducer.

194
00:14:38,270 --> 00:14:41,720
When I want to handle some kind of action type.

195
00:14:41,930 --> 00:14:48,820
Again, I use the same variable, which of course holds the same string and just like that.

196
00:14:49,760 --> 00:14:56,640
We have loading displayed on screen, we have structure for both for producer for the context.

197
00:14:56,690 --> 00:14:57,030
Yes.

198
00:14:57,350 --> 00:15:01,760
And we're in good shape to continue with our application.