All right, guys.
So I don't normally do challenges in project based courses like this, but I think it's a good opportunity
for you to try this on your own.
So in the last video we used Redux Toolkit, we created a products API slice with an endpoint to get
all products.
We brought it into our home screen right here and we checked to see if it's loading, if there's any
error, and then we just map through the products, right?
So we're able to fetch them through Redux toolkit.
Now I want you to do the same thing with the product screen, because right now the product screen is
just using Axios inside of a Useeffect.
We don't need to do that.
You can get rid of that.
You can get rid of the use state, all that stuff, and basically just copy what we just did.
Except instead of using use get products query, you're going to create your own query, call it get
product details, right?
So you'll export, use, get product details, query.
And that's all I'm going to tell you.
I'm not going to give you any more information.
Pause the video.
Try it on your own.
If you don't get it, that's absolutely fine.
So let's continue on here.
I'm going to go under this Get Products query, which ends right here and I'm going to say get product.
Details.
And again, we're going to use the builder query.
And inside here we're going to have query.
And let's set that to an arrow.
And that's going to return an object.
So we're going to have some parentheses, just like we did above.
Now, this since we're getting a single product, this is going to pass get passed in a product ID,
Okay.
And then the URL is going to be the products URL slash and then the product ID, and then I'm also going
to add keep unused data for five seconds.
Okay.
So very, very simple.
Now to export this, remember the convention, it's going to start with use.
It's going to end with query.
So in this case, it would be use get product details, query.
And that's it for this file.
So let's save it.
Then we want to go into our product screen and we can get rid of the Axios import.
We can get rid of the use state use effect.
We can get rid of the component state.
We do want the ID which is being passed through the URL.
So keep that we don't need the use effect.
So get rid of that.
All right.
Now we want to import.
The use get product details query.
And we're going to use that down here.
So we're going to get the the data which we're renaming to product is loading an error.
And let's see, why did this.
Yeah, we need to do that and then we can pass in here the product ID, which is coming from the URL
because we're using the use params hook right here.
All right now.
Let's come down here and underneath the link, let's check for the loading and check for the error.
So again, I'm going to just kind of build this out by saying is loading.
So if it is, then parentheses else error.
If there is an error, then parentheses else then parentheses and the output is going to go in the last
parentheses.
So let's grab all of this.
This whole row, cut that.
We're going to cut that and we're going to put that in the last parentheses here.
Okay.
And then if it's loading for now.
We'll just put an H two and then if there's an error.
Then let's make that a div.
And just like we did in the last video, we're going to check for error.
Dot data dot message or error.
Dot error.
All right.
We shouldn't have any errors or any issues here.
So I'm going to save that.
And now we're fetching the data through Redux.
Okay.
Through our End Point, this right here.
So no Axios requests or anything like that.
You can see just how neat this is and how it flows.
And if you if you need to fetch anything else, you know how to do it.
We haven't done any mutations yet where we've changed or added things to the to the server, to the
API, but you can see how easy fetching is.
All right.
And if you got it, congratulations.
That's awesome.
If you didn't, that's, that's fine.
All right.
So now that we're fetching through through Redux and Redux Toolkit in the next video before we move
on, I just want to create a loader so that instead of just showing the loading text, we can show a
spinner.
All right, So we'll do that next.