Okay, so now that we have our Redux store set up and the root API slice, now I want to create our
products API slice and start adding some endpoints, including the one to fetch these products.
All right.
So I mean, as you can see, this, this course has been very incremental.
We've done things bit by bit trying to to build you up into understanding what the I guess what the
end result is.
And I and I hope that people can appreciate that we start off with just having a products JS in the
front end that we fetch from, then we move it to the back end and we fetch it from the back end using
Http.
And then we build our database, then we're getting it from the database, but just through a Useeffect
hook, and now we're getting to Redux where we're going to fetch it through, through our slices created
through Redux.
So it's very incremental.
And the reason I do that is so that I'm not just throwing like this code in here and that's that having
you copy it we've built up.
So you kind of know what's going on.
Now, this API slice, like I said, this is this is basically the parent and what I'm going to do is
create another slice in the slices folder and we're going to call this products API slice dot JS and
we could put endpoints directly in here if we want, but we can also inject them from a separate file,
which is what we're going to do because we have different types of endpoints.
We have products orders, users.
So there's actually a method called inject endpoint endpoints.
So first thing we'll do here is import our products URL constant.
So we're going to bring that in and then we want to bring in our API slice.
So API slice.
And then we're going to say const, or we want to actually export const products API slice.
Okay, so we're setting this to API slice and then there's a method called inject endpoints.
So we're basically going to put endpoints in here and we can use this builder.
In fact, I'm just going to copy this right here and inside of this.
Inject end points.
I'm going to paste that in and then any end points that we want to hit that have to do with products
will go in here and we can use this builder object which has methods like query, so we can make a query.
And once you see how this is set up, you'll see how easy it is to make queries and you'll be able to
query whatever you want from the back end.
So I want to just get all the products.
So I'm going to call this get products.
And we're going to set that to use the builder dot query.
And what this is going to take in this builder query is an object with query, and we're going to set
that to an arrow function.
And I want this to return an object.
So we're actually going to put parentheses here and then our curly braces and we want to pass in the
URL, which is going to be the products URL from the constants file, which is AIP, slash API slash
products.
That's the endpoint we want to hit.
So as you can see, we're not having to do a fetch request or an Axios request to to do this.
We do it all through Redux toolkit, which is really cool in my opinion.
So after let's see, after this query, we're just going to put in one more thing.
So let's put a comma and we're going to say keep unused data for which is, I believe the seconds that
it's cached.
Let's see, does it show us here?
Um, let's see.
Overrides the API definition.
This is how long our query and by the way, that's, that's what, that's what Redux toolkit uses behind
the scenes to make our queries.
It's a, it's TK query and it'll keep your data cache for after the last component unsubscribes.
For example, if you query an endpoint then unmount the component, then mount another component that
makes the same request within the given time frame.
The most recent value will be served from the cache.
So yeah, the value is in seconds, so I'm just going to set that to five seconds.
And then what we want to do is export our query and there's a certain convention that we that we need
to use for this.
So let's say export and we're going to say const and the convention is going to be whatever we call
this, the actual name of the query get products, but it's going to be prefixed with use.
And then we're also going to add query onto the end because it's a query.
When it's a mutation, you'll add mutation.
But since this is called get products, we're going to export use, get products query, and that's
what we bring into our component whenever we want to use this and fetch our data.
So let's save this.
And now what I want to do is go into, let's see, where are we going to go into the home screen.
So screens home screen because right now what we're doing is simply bringing in use effect and then
we're making a fetch request to our back end.
We no longer want to do this so we can actually delete.
The Axios import, we can delete the use state and use effect import because no longer do we need to
have products in our component state.
We can delete the entire use effect so we can really clean this up.
And then what we want to bring in instead is going to be our use this right here use get products query.
So let's go here and say import.
And it's going to be used.
Get products query from our products API slice.
And then let's see, we're going to go down here into the home screen.
And this gives us a few things that we can get from this Use products query.
So we get the data, which here we're renaming to products because that's what we're using down here.
But we can also get the is loading state as well as is error.
If there's an error, which I think is awesome because it can be kind of a pain in the -- if you have
to handle this yourself like we did in the first version of this application when we didn't use toolkit.
Well, I don't even think toolkit was was around then.
So this is very, very helpful.
So we already have the products being mapped through down here, but I also want to check for loading
and I want to check for error.
So what I'll do is let's go right below this fragment here and we're going to say is loading then.
So is loading then, and I'm going to just open up some parentheses and then we'll do else if error,
then we'll open up some parentheses else and then we'll open up some parentheses.
So I'm just giving printing out the full structure here of what we're going to do.
And this is going to go in the last one here.
So let's grab H one and row and cut that.
And of course that has to go into a single element, single wrapper element.
So I'll just put some fragments in here or a fragment and then paste that in.
Now if it's loading, then for now I'm just going to have an H two.
We can create a spinner after, but for now we'll just do an H two.
If there's an error that would be this set of parentheses, then let's do a div.
Oops, we want to do a div.
Don't know why.
I don't know why that's not working.
All right, let's just type it out.
So div and then in here, we'll open up some curly braces.
We'll say error, dot data, dot message or.
Error, Dot error, whichever one.
Is whichever one is available.
And let's make this optional here.
So even if this is undefined, it'll check this value here.
And I think that should do it.
So let's go ahead and save that.
So we get error is not defined.
And that's because.
Uh, that's because up here I have is error.
Let's change.
Let's change that to error, actually.
Cannot read properties of undefined message.
See message.
Okay.
So let's make this we're going to put a question mark here as well.
All right.
So we get failed to fetch.
So let's open up the console here and it looks like we're getting a cors error.
So what's going on here is we're we're using localhost 3000, right?
That's our React dev server and we're trying to fetch data from our API that's at localhost 5000.
Now we could go into our back end to our server and we could enable cors and make it so that localhost
3000 can fetch the data.
However, since we have a proxy, we shouldn't have to do that.
Remember in the front end in our package.json we added this proxy here.
So I think that where I went wrong is with the constants and the base URL.
So basically what I'm saying here is if we're in development mode, which we are, then prefix our,
our endpoints with localhost 5000, which is different from what we're using here.
So that's why we're getting a cors error.
So I should actually be able to not even have not, I shouldn't have to prefix it with this because
we're using a proxy.
So I'm not exactly sure why I did that, but let's, let's comment that out.
And actually I want to comment the entire base URL out.
If you weren't using a proxy, then that's what you would do.
But since we are.
Let's go ahead and just set the base URL to nothing, because we don't need it because it's going to
be the same domain.
Right.
So let's try that.
We'll save.
And there we go.
So now it works.
And you can see the loading there.
What I do want to do is, is have a loader, a spinner, But we'll do that in a little bit.
But at least now we're fetching our products.
Now, if I click on a single one, it is fetching, but it's not going through through Redux.
It's still you know, if we look at our product screen, it's still.
Doing it this way with Axios, but we'll get to that.
In fact, we're going to do that in the next video.
But yeah, I think that we're good now.
So just to kind of reiterate, we have our Redux store, right?
That wraps our application, the provider wraps the application, and then we have our API slice, which
you can think of as like the parent for the rest of our API slices, the product order user.
And then we have endpoints.
Now we're not putting any specific endpoints in this parent, but we have our API, our products API
slice, which is injecting endpoints into the main API slice.
That's why we don't have to actually have a reducer here that we bring into our store.
We don't have to add in products API reducer because we're using the API slice.
So I hope that makes sense.
Then we have one endpoint which we called get products and that's going to hit the products URL.
It's a query, so it's going to make a get request.
We're then exporting that query and then in the home screen we're able to use that query to get the
actual data, to get the loading state and to get the error.
And then we're checking that stuff here.
So I hope that that makes sense.
In the next video, we're going to kind of do the same thing, but for the single product page.