Okay.
So back in the front end, we're going to be creating our Redux store.
Now, if you want to look at the documentation, you have Redux documentation at Redux, Js.org and
then Redux Toolkit at Redux Toolkit, dot js.org.
And I think that for those of you that took the first version of the course where we just use Redux
without the toolkit, I think you're going to see just how much easier this makes everything.
And it might be overwhelming at first when you're first getting used to setting up slices and so on.
But once you see how to do it, once it's easy to implement for for orders and users and products.
And I think you'll you'll see that the boilerplate, once you get that down, it's easy to add functionality
and of course use the documentation as a supplement if you need to.
So let's go ahead and install our front end dependencies.
So I'm going to just go over to my other terminal, which is in the front end, make sure you're in
the front end and then let's do an NPM install and we want to install at Redux.
JS slash toolkit.
Okay.
So that will include Redux and some other things.
And then we also want, we want React Redux.
So it's React Dash Redux and that's the basically the bridge that connects them together because like
I said in the last video, you can use Redux without React.
You could use it with Angular or Vue or Svelte or with just regular JavaScript if you wanted to.
Okay, so now in our front end Package.json, we should see.
Uh, let's see.
Right here.
Redux toolkit.
And we should see React Redux.
Good.
Now we're going to create a store.
So that's going to go in the front end folder.
We're going to have a file called Store Dot JS.
So that's kind of like the entry point of Redux and then we're going to import from here.
We're going to import configure store from Redux toolkit.
You know what, guys?
I'm just going to disable my spell check just so we don't have those blue lines.
So disable that and just reload.
Okay.
And then let's see.
Is the server still running?
Yep.
Server is still running.
So next thing we want to do we have this configure store.
So let's create our store by saying const store.
Set that to configure store.
Configure store and then that's going to take in an object.
And then this is where we add any reducers that we have.
So this is going to be an object called reducer.
I'm not going to add anything to it right now.
We're just getting the store set up.
We're not going to have any state or anything at the moment.
Now we just need to export this.
So let's say export as default store.
Okay.
And then we can close that up and let's go into our index.
So we want to go into our source slash index.js.
That's the entry point for React.
So that's where we embed our main app component, which is right here, getting put into the root path.
And then we have our router provider down here.
So this is essentially our main app.
So we want to surround this with the React Redux provider.
So let's import that.
I'm going to go.
Right here and let's say import.
And we want to bring in the provider from React Redux.
And also we want to bring in the store file.
So we'll do that right underneath, let's say, import store from dot slash store.
And then what we'll do is wrap this router provider down here with the provider.
Okay.
And then we're passing in the store from store.
JS As, as a prop.
So let's save that and let's see what we got here.
Can't resolve dot slash store.
And let's see why is that?
Is that not.
Yeah, I didn't put it in the source folder so it has to go in the source folder.
Okay.
There we go.
And make sure you have the Redux Dev Tools extension, whether you're using a Chrome Chrome extension
or the Firefox add on.
So if I open up my dev tools here and I go to Redux.
This should work.
Okay.
If you didn't set it up correctly, then it's going to say that it's not set up.
We don't have anything here really.
So we don't have any state.
We don't have any reducers.
But this is working, which is a good sign.
So the next thing we're going to do is just create some constants as far as the the, the URLs.
So I'm going to create in the source folder, we're going to have a file called Constants dot JS, not
constants.
So constants dot JS and I'm just going to each constant we create is going to be exported.
So let's say export const and this is going to be base underscore URL.
All right, Now we're going to set this to a ternary because we want this to be different depending
on if we're in development or not.
So let's say it's equal to process dot env, dot node underscore env, which is our node environment
and we'll say if that is equal to development.
Then we're going to want the base URL to be.
Local host.
3000.
Sorry.
5000.
So 5000.
Else.
Then it's going to be nothing.
Because if it's in production, it's going to be the same domain.
So it'll just be slash whatever API slash products.
We're not going to need to prefix it with this.
So we're going to set that.
And then each resource like API products, API orders, those are also going to have their own constant,
their own variables.
So let's do export const and then let's say products.
Actually we want this to be uppercase.
So products underscore URL and that's going to be set to slash API slash products.
All right.
We might as well add.
Let's see.
Should we just add the rest?
Yeah, let's just add the rest.
Since we're.
Since we're already here.
So we're going to copy this down a couple more times.
We're going to have our products URL.
We're going to have our users URL.
That'll be API slash users.
We're going to have the let's see orders.
Orders URL, which will be API slash orders, and then we're also going to have a PayPal URL.
And when we when we get to that, so let's say PayPal URL and that's going to be API slash config.
Slash PayPal and I'll explain more about that later.
And that should do it.
So let's just save that.
And now we have our constants for our URLs.
So now we're going to get into slices.
There's a concept in Redux toolkit called slices, and it's a way to organize your state.
So it's a collection of reducers and actions that are related to each other.
And we can create multiple slices in our application and each slice can have its own state.
Now, since we're working with a back end API, basically we're going to have a route API slice and
then we'll extend that with the products API, slice the orders, API, slice the users API slice.
So right now I just want to get that base API slice down so we can close up the store for now.
We will need to to bring in our slice and in a few minutes.
But let's create in the source folder.
So front end slash source, we're going to create a new folder called slices.
Okay?
And then in slices we're going to create a file called API Slice dot JS.
So like I said, this is going to be basically the parent to our other API slices.
So in here we're going to bring in a couple things.
So I want to import, we're going to bring in create.
So there is a create slice which you would use for regular slices that aren't dealing with asynchronous
requests such as the cart.
For instance, we'll have a cart slice, but since we're dealing with a back end API, we're going to
bring in create API, which works a little bit differently.
And then we're also going to bring in fetch base query.
Okay.
And this is going to come in from is this right?
Yes.
Toolkit slash query slash React app.
And let's see, fetch fetch base query is the function that will allow us to make requests to our back
end API.
And we're also going to bring in our base URL constant that we created.
So let's say import and we want base underscore URL from dot dot slash constants.
Okay.
And then we're going to create our API slice.
So let's say export const API slice and we're going to set that to create API.
And then this is going to take in an object with our base query.
So let's say base query, and we're going to set that.
You know what?
Let's create a variable here just to make this a little bit more readable.
We'll say base query equals fetch, base query, and then that's going to take in.
An object with our base URL.
So base URL and that's going to be sent set to our base URL constant.
All right, then here we can just do this.
So base query and since these are the same, we don't even need the second one.
So we'll just do that and then the next thing it's going to take in our tag types.
And tag types are used to define the types of data that will be fetching from our API.
So it's going to be an array and I'm going to keep it singular.
So we're going to have product as a tag.
We're going to have.
Uh, let's see.
We're going to have order and user.
So those are the three tags we'll will have for now.
Now the next thing is going to be the end point.
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
try catch with the fetch API inside of it and handle our, you know, error handling and all that.
We can do it all through this builder.
So the, the syntax of it might be a little confusing at first, but once you see how it's done, you'll
see that it's very easy to, to make other requests.
So right now I'm going to just leave this empty because I don't want to make any requests at the moment.
I just want to get set up.
So now what we're going to do is add this API slice to the store.
So let's save this file and let's go back into our storages and let's see, we're going to go right
under that import and let's import our API slice.
Okay.
And then we're going to add right here in this reducer object, we're going to go ahead and just add.
With brackets API slice dot reducer path because we're bringing in the reducer and we can get that with
this reducer path.
And then for the value, it'll just be the actual reducer.
And then we also have to add middleware.
So let's say middleware.
And once this, this boilerplate is done, you don't have to touch it again.
But this here middleware get default middleware.
We're going to just go ahead and set that.
We're going to return this get default middleware and then concat the API API slice middleware onto
that.
And then I also want to use be able to use the oops, be able to use the dev tools.
So we're going to have another option here of dev tools and we're going to set that to, well we could
do it if it's not in production.
Let's you know what, let's just set this to true.
You could set it to true if you're only in development, but we'll set that to true and then we should
be good.
So if we save and we don't see any errors.
So if we open up the console, we don't see any errors, then everything should be good if we go to
our redux.
And let's see.
So now you can see we have in our state, we have this API and it has queries, mutations.
So any time we add a query, it'll get added here.
Mutations are just queries are our requests that that add or update or delete something from the database.
But this is the parent to the rest of our slices that we're going to create, like the products API,
slice, the users, API slice and so on.
All right.
So I know that this is a little confusing, but this is just the boilerplate.
Once this is done, it's done.
So in the next video we're going to create our products API slice and start to fetch our data through
Redux rather than just through the fetch API inside of a Useeffect.