1
00:00:00,170 --> 00:00:00,500
Okay.

2
00:00:00,500 --> 00:00:05,390
So back in the front end, we're going to be creating our Redux store.

3
00:00:05,420 --> 00:00:12,860
Now, if you want to look at the documentation, you have Redux documentation at Redux, Js.org and

4
00:00:12,860 --> 00:00:18,080
then Redux Toolkit at Redux Toolkit, dot js.org.

5
00:00:18,080 --> 00:00:24,230
And I think that for those of you that took the first version of the course where we just use Redux

6
00:00:24,230 --> 00:00:28,880
without the toolkit, I think you're going to see just how much easier this makes everything.

7
00:00:28,880 --> 00:00:34,760
And it might be overwhelming at first when you're first getting used to setting up slices and so on.

8
00:00:34,760 --> 00:00:42,440
But once you see how to do it, once it's easy to implement for for orders and users and products.

9
00:00:42,440 --> 00:00:48,980
And I think you'll you'll see that the boilerplate, once you get that down, it's easy to add functionality

10
00:00:48,980 --> 00:00:53,210
and of course use the documentation as a supplement if you need to.

11
00:00:53,780 --> 00:00:57,440
So let's go ahead and install our front end dependencies.

12
00:00:57,440 --> 00:01:02,430
So I'm going to just go over to my other terminal, which is in the front end, make sure you're in

13
00:01:02,430 --> 00:01:10,890
the front end and then let's do an NPM install and we want to install at Redux.

14
00:01:10,890 --> 00:01:15,120
JS slash toolkit.

15
00:01:15,420 --> 00:01:15,710
Okay.

16
00:01:15,720 --> 00:01:18,360
So that will include Redux and some other things.

17
00:01:18,360 --> 00:01:22,410
And then we also want, we want React Redux.

18
00:01:22,410 --> 00:01:30,150
So it's React Dash Redux and that's the basically the bridge that connects them together because like

19
00:01:30,150 --> 00:01:34,290
I said in the last video, you can use Redux without React.

20
00:01:34,290 --> 00:01:40,200
You could use it with Angular or Vue or Svelte or with just regular JavaScript if you wanted to.

21
00:01:40,750 --> 00:01:45,640
Okay, so now in our front end Package.json, we should see.

22
00:01:46,490 --> 00:01:47,090
Uh, let's see.

23
00:01:47,090 --> 00:01:47,510
Right here.

24
00:01:47,510 --> 00:01:48,650
Redux toolkit.

25
00:01:48,650 --> 00:01:51,250
And we should see React Redux.

26
00:01:51,260 --> 00:01:51,920
Good.

27
00:01:52,070 --> 00:01:53,870
Now we're going to create a store.

28
00:01:53,870 --> 00:01:55,910
So that's going to go in the front end folder.

29
00:01:55,910 --> 00:02:00,170
We're going to have a file called Store Dot JS.

30
00:02:00,170 --> 00:02:06,800
So that's kind of like the entry point of Redux and then we're going to import from here.

31
00:02:07,480 --> 00:02:12,130
We're going to import configure store from Redux toolkit.

32
00:02:12,270 --> 00:02:12,940
You know what, guys?

33
00:02:12,940 --> 00:02:18,820
I'm just going to disable my spell check just so we don't have those blue lines.

34
00:02:20,370 --> 00:02:23,190
So disable that and just reload.

35
00:02:25,440 --> 00:02:26,040
Okay.

36
00:02:26,040 --> 00:02:26,880
And then let's see.

37
00:02:26,880 --> 00:02:28,470
Is the server still running?

38
00:02:28,470 --> 00:02:28,860
Yep.

39
00:02:28,890 --> 00:02:30,180
Server is still running.

40
00:02:30,270 --> 00:02:33,450
So next thing we want to do we have this configure store.

41
00:02:33,450 --> 00:02:37,230
So let's create our store by saying const store.

42
00:02:37,230 --> 00:02:39,660
Set that to configure store.

43
00:02:41,880 --> 00:02:46,890
Configure store and then that's going to take in an object.

44
00:02:47,010 --> 00:02:50,670
And then this is where we add any reducers that we have.

45
00:02:50,700 --> 00:02:54,610
So this is going to be an object called reducer.

46
00:02:54,630 --> 00:02:56,790
I'm not going to add anything to it right now.

47
00:02:56,790 --> 00:02:58,170
We're just getting the store set up.

48
00:02:58,170 --> 00:03:01,410
We're not going to have any state or anything at the moment.

49
00:03:01,560 --> 00:03:03,870
Now we just need to export this.

50
00:03:03,870 --> 00:03:08,280
So let's say export as default store.

51
00:03:09,010 --> 00:03:09,340
Okay.

52
00:03:09,340 --> 00:03:13,320
And then we can close that up and let's go into our index.

53
00:03:13,390 --> 00:03:16,940
So we want to go into our source slash index.js.

54
00:03:16,960 --> 00:03:19,260
That's the entry point for React.

55
00:03:19,270 --> 00:03:25,300
So that's where we embed our main app component, which is right here, getting put into the root path.

56
00:03:25,300 --> 00:03:28,270
And then we have our router provider down here.

57
00:03:28,270 --> 00:03:30,190
So this is essentially our main app.

58
00:03:30,190 --> 00:03:34,480
So we want to surround this with the React Redux provider.

59
00:03:34,480 --> 00:03:35,830
So let's import that.

60
00:03:35,830 --> 00:03:37,120
I'm going to go.

61
00:03:37,840 --> 00:03:40,690
Right here and let's say import.

62
00:03:40,690 --> 00:03:46,450
And we want to bring in the provider from React Redux.

63
00:03:47,190 --> 00:03:49,800
And also we want to bring in the store file.

64
00:03:49,800 --> 00:03:55,290
So we'll do that right underneath, let's say, import store from dot slash store.

65
00:03:55,530 --> 00:04:01,440
And then what we'll do is wrap this router provider down here with the provider.

66
00:04:02,380 --> 00:04:02,650
Okay.

67
00:04:02,650 --> 00:04:05,920
And then we're passing in the store from store.

68
00:04:05,920 --> 00:04:08,260
JS As, as a prop.

69
00:04:09,000 --> 00:04:12,000
So let's save that and let's see what we got here.

70
00:04:12,030 --> 00:04:15,630
Can't resolve dot slash store.

71
00:04:16,779 --> 00:04:19,060
And let's see why is that?

72
00:04:19,060 --> 00:04:19,839
Is that not.

73
00:04:19,839 --> 00:04:24,640
Yeah, I didn't put it in the source folder so it has to go in the source folder.

74
00:04:27,320 --> 00:04:27,680
Okay.

75
00:04:27,680 --> 00:04:28,490
There we go.

76
00:04:28,610 --> 00:04:34,520
And make sure you have the Redux Dev Tools extension, whether you're using a Chrome Chrome extension

77
00:04:34,520 --> 00:04:36,340
or the Firefox add on.

78
00:04:36,350 --> 00:04:41,180
So if I open up my dev tools here and I go to Redux.

79
00:04:41,830 --> 00:04:43,030
This should work.

80
00:04:43,060 --> 00:04:43,300
Okay.

81
00:04:43,330 --> 00:04:47,920
If you didn't set it up correctly, then it's going to say that it's not set up.

82
00:04:48,250 --> 00:04:50,230
We don't have anything here really.

83
00:04:50,230 --> 00:04:51,490
So we don't have any state.

84
00:04:51,490 --> 00:04:52,840
We don't have any reducers.

85
00:04:52,840 --> 00:04:56,050
But this is working, which is a good sign.

86
00:04:56,920 --> 00:05:04,800
So the next thing we're going to do is just create some constants as far as the the, the URLs.

87
00:05:04,810 --> 00:05:14,440
So I'm going to create in the source folder, we're going to have a file called Constants dot JS, not

88
00:05:14,560 --> 00:05:15,610
constants.

89
00:05:16,400 --> 00:05:22,700
So constants dot JS and I'm just going to each constant we create is going to be exported.

90
00:05:22,700 --> 00:05:28,490
So let's say export const and this is going to be base underscore URL.

91
00:05:28,700 --> 00:05:34,280
All right, Now we're going to set this to a ternary because we want this to be different depending

92
00:05:34,280 --> 00:05:36,140
on if we're in development or not.

93
00:05:36,140 --> 00:05:44,390
So let's say it's equal to process dot env, dot node underscore env, which is our node environment

94
00:05:44,390 --> 00:05:48,470
and we'll say if that is equal to development.

95
00:05:49,060 --> 00:05:53,380
Then we're going to want the base URL to be.

96
00:05:54,060 --> 00:05:55,440
Local host.

97
00:05:55,710 --> 00:05:56,670
3000.

98
00:05:57,300 --> 00:05:57,720
Sorry.

99
00:05:57,750 --> 00:05:59,040
5000.

100
00:05:59,070 --> 00:06:00,570
So 5000.

101
00:06:00,600 --> 00:06:01,110
Else.

102
00:06:01,110 --> 00:06:03,150
Then it's going to be nothing.

103
00:06:03,150 --> 00:06:07,530
Because if it's in production, it's going to be the same domain.

104
00:06:07,530 --> 00:06:12,120
So it'll just be slash whatever API slash products.

105
00:06:12,360 --> 00:06:14,820
We're not going to need to prefix it with this.

106
00:06:14,820 --> 00:06:16,260
So we're going to set that.

107
00:06:16,260 --> 00:06:24,180
And then each resource like API products, API orders, those are also going to have their own constant,

108
00:06:24,180 --> 00:06:25,200
their own variables.

109
00:06:25,200 --> 00:06:29,910
So let's do export const and then let's say products.

110
00:06:29,910 --> 00:06:31,890
Actually we want this to be uppercase.

111
00:06:31,890 --> 00:06:40,890
So products underscore URL and that's going to be set to slash API slash products.

112
00:06:42,340 --> 00:06:42,970
All right.

113
00:06:43,060 --> 00:06:44,440
We might as well add.

114
00:06:44,980 --> 00:06:45,340
Let's see.

115
00:06:45,370 --> 00:06:46,900
Should we just add the rest?

116
00:06:47,140 --> 00:06:48,310
Yeah, let's just add the rest.

117
00:06:48,310 --> 00:06:48,880
Since we're.

118
00:06:48,910 --> 00:06:49,930
Since we're already here.

119
00:06:49,930 --> 00:06:52,900
So we're going to copy this down a couple more times.

120
00:06:53,140 --> 00:06:54,820
We're going to have our products URL.

121
00:06:54,850 --> 00:06:58,960
We're going to have our users URL.

122
00:07:01,670 --> 00:07:04,200
That'll be API slash users.

123
00:07:04,220 --> 00:07:08,090
We're going to have the let's see orders.

124
00:07:08,980 --> 00:07:16,030
Orders URL, which will be API slash orders, and then we're also going to have a PayPal URL.

125
00:07:16,030 --> 00:07:25,150
And when we when we get to that, so let's say PayPal URL and that's going to be API slash config.

126
00:07:25,800 --> 00:07:29,250
Slash PayPal and I'll explain more about that later.

127
00:07:29,250 --> 00:07:30,390
And that should do it.

128
00:07:30,390 --> 00:07:31,680
So let's just save that.

129
00:07:31,680 --> 00:07:35,490
And now we have our constants for our URLs.

130
00:07:35,490 --> 00:07:37,530
So now we're going to get into slices.

131
00:07:37,530 --> 00:07:43,470
There's a concept in Redux toolkit called slices, and it's a way to organize your state.

132
00:07:43,470 --> 00:07:48,960
So it's a collection of reducers and actions that are related to each other.

133
00:07:48,960 --> 00:07:55,440
And we can create multiple slices in our application and each slice can have its own state.

134
00:07:55,470 --> 00:08:05,640
Now, since we're working with a back end API, basically we're going to have a route API slice and

135
00:08:05,640 --> 00:08:13,140
then we'll extend that with the products API, slice the orders, API, slice the users API slice.

136
00:08:13,140 --> 00:08:20,490
So right now I just want to get that base API slice down so we can close up the store for now.

137
00:08:20,490 --> 00:08:23,580
We will need to to bring in our slice and in a few minutes.

138
00:08:23,580 --> 00:08:26,500
But let's create in the source folder.

139
00:08:26,500 --> 00:08:31,420
So front end slash source, we're going to create a new folder called slices.

140
00:08:31,930 --> 00:08:32,320
Okay?

141
00:08:32,320 --> 00:08:40,390
And then in slices we're going to create a file called API Slice dot JS.

142
00:08:40,390 --> 00:08:46,510
So like I said, this is going to be basically the parent to our other API slices.

143
00:08:46,510 --> 00:08:49,120
So in here we're going to bring in a couple things.

144
00:08:49,120 --> 00:08:53,590
So I want to import, we're going to bring in create.

145
00:08:53,590 --> 00:09:00,190
So there is a create slice which you would use for regular slices that aren't dealing with asynchronous

146
00:09:00,190 --> 00:09:02,170
requests such as the cart.

147
00:09:02,170 --> 00:09:08,410
For instance, we'll have a cart slice, but since we're dealing with a back end API, we're going to

148
00:09:08,410 --> 00:09:12,040
bring in create API, which works a little bit differently.

149
00:09:12,040 --> 00:09:16,570
And then we're also going to bring in fetch base query.

150
00:09:16,810 --> 00:09:17,260
Okay.

151
00:09:17,260 --> 00:09:21,190
And this is going to come in from is this right?

152
00:09:21,190 --> 00:09:21,640
Yes.

153
00:09:21,640 --> 00:09:26,590
Toolkit slash query slash React app.

154
00:09:26,590 --> 00:09:33,490
And let's see, fetch fetch base query is the function that will allow us to make requests to our back

155
00:09:33,490 --> 00:09:34,570
end API.

156
00:09:34,570 --> 00:09:38,320
And we're also going to bring in our base URL constant that we created.

157
00:09:38,320 --> 00:09:46,300
So let's say import and we want base underscore URL from dot dot slash constants.

158
00:09:46,630 --> 00:09:47,050
Okay.

159
00:09:47,050 --> 00:09:49,240
And then we're going to create our API slice.

160
00:09:49,240 --> 00:09:57,130
So let's say export const API slice and we're going to set that to create API.

161
00:09:58,100 --> 00:10:03,150
And then this is going to take in an object with our base query.

162
00:10:03,170 --> 00:10:09,830
So let's say base query, and we're going to set that.

163
00:10:09,830 --> 00:10:10,390
You know what?

164
00:10:10,400 --> 00:10:14,620
Let's create a variable here just to make this a little bit more readable.

165
00:10:14,630 --> 00:10:20,600
We'll say base query equals fetch, base query, and then that's going to take in.

166
00:10:21,190 --> 00:10:25,190
An object with our base URL.

167
00:10:25,210 --> 00:10:30,310
So base URL and that's going to be sent set to our base URL constant.

168
00:10:30,550 --> 00:10:33,820
All right, then here we can just do this.

169
00:10:33,820 --> 00:10:38,110
So base query and since these are the same, we don't even need the second one.

170
00:10:38,110 --> 00:10:44,710
So we'll just do that and then the next thing it's going to take in our tag types.

171
00:10:45,350 --> 00:10:51,440
And tag types are used to define the types of data that will be fetching from our API.

172
00:10:51,470 --> 00:10:55,370
So it's going to be an array and I'm going to keep it singular.

173
00:10:55,370 --> 00:10:57,660
So we're going to have product as a tag.

174
00:10:57,680 --> 00:10:59,150
We're going to have.

175
00:11:00,500 --> 00:11:02,020
Uh, let's see.

176
00:11:02,030 --> 00:11:05,440
We're going to have order and user.

177
00:11:05,450 --> 00:11:08,600
So those are the three tags we'll will have for now.

178
00:11:08,600 --> 00:11:10,910
Now the next thing is going to be the end point.

179
00:11:10,910 --> 00:11:16,880
So this is what's really cool is we don't have to manually fetch our data like we don't have to do our

180
00:11:16,880 --> 00:11:23,960
try catch with the fetch API inside of it and handle our, you know, error handling and all that.

181
00:11:23,990 --> 00:11:26,960
We can do it all through this builder.

182
00:11:26,960 --> 00:11:34,520
So the, the syntax of it might be a little confusing at first, but once you see how it's done, you'll

183
00:11:34,520 --> 00:11:38,300
see that it's very easy to, to make other requests.

184
00:11:38,300 --> 00:11:43,850
So right now I'm going to just leave this empty because I don't want to make any requests at the moment.

185
00:11:43,850 --> 00:11:45,800
I just want to get set up.

186
00:11:45,800 --> 00:11:50,150
So now what we're going to do is add this API slice to the store.

187
00:11:50,150 --> 00:11:57,380
So let's save this file and let's go back into our storages and let's see, we're going to go right

188
00:11:57,380 --> 00:12:02,970
under that import and let's import our API slice.

189
00:12:03,760 --> 00:12:04,180
Okay.

190
00:12:04,180 --> 00:12:11,770
And then we're going to add right here in this reducer object, we're going to go ahead and just add.

191
00:12:12,440 --> 00:12:20,240
With brackets API slice dot reducer path because we're bringing in the reducer and we can get that with

192
00:12:20,240 --> 00:12:21,860
this reducer path.

193
00:12:21,860 --> 00:12:25,790
And then for the value, it'll just be the actual reducer.

194
00:12:26,060 --> 00:12:28,910
And then we also have to add middleware.

195
00:12:28,910 --> 00:12:30,710
So let's say middleware.

196
00:12:30,950 --> 00:12:35,420
And once this, this boilerplate is done, you don't have to touch it again.

197
00:12:35,600 --> 00:12:39,920
But this here middleware get default middleware.

198
00:12:40,630 --> 00:12:42,940
We're going to just go ahead and set that.

199
00:12:42,940 --> 00:12:49,360
We're going to return this get default middleware and then concat the API API slice middleware onto

200
00:12:49,360 --> 00:12:50,050
that.

201
00:12:50,350 --> 00:12:55,420
And then I also want to use be able to use the oops, be able to use the dev tools.

202
00:12:55,420 --> 00:13:03,070
So we're going to have another option here of dev tools and we're going to set that to, well we could

203
00:13:03,070 --> 00:13:05,650
do it if it's not in production.

204
00:13:06,340 --> 00:13:08,740
Let's you know what, let's just set this to true.

205
00:13:08,770 --> 00:13:15,790
You could set it to true if you're only in development, but we'll set that to true and then we should

206
00:13:15,790 --> 00:13:16,240
be good.

207
00:13:16,240 --> 00:13:19,120
So if we save and we don't see any errors.

208
00:13:20,800 --> 00:13:26,680
So if we open up the console, we don't see any errors, then everything should be good if we go to

209
00:13:26,680 --> 00:13:28,000
our redux.

210
00:13:29,470 --> 00:13:30,900
And let's see.

211
00:13:30,910 --> 00:13:38,530
So now you can see we have in our state, we have this API and it has queries, mutations.

212
00:13:38,530 --> 00:13:41,900
So any time we add a query, it'll get added here.

213
00:13:41,920 --> 00:13:49,450
Mutations are just queries are our requests that that add or update or delete something from the database.

214
00:13:49,450 --> 00:13:55,630
But this is the parent to the rest of our slices that we're going to create, like the products API,

215
00:13:55,660 --> 00:13:59,260
slice, the users, API slice and so on.

216
00:13:59,710 --> 00:14:00,070
All right.

217
00:14:00,070 --> 00:14:03,640
So I know that this is a little confusing, but this is just the boilerplate.

218
00:14:03,640 --> 00:14:05,470
Once this is done, it's done.

219
00:14:05,470 --> 00:14:11,530
So in the next video we're going to create our products API slice and start to fetch our data through

220
00:14:11,530 --> 00:14:16,780
Redux rather than just through the fetch API inside of a Useeffect.