Excellent, once we have set up our super nifty form and function, like I previously mentioned.
Now I would want to work on a single product at the moment, if we click on a link, notice we navigate
two products online, whatever is the idea.
And of course, as I'm clicking on different product, I'm still navigating to the same page.
But of course, the URL is a bit different because each product has the unique idea.
And I would want to start by setting up the fetch function in the products because a lot of things are
going to be exactly the same.
Difference, of course, is going to be what we are dispatching because at the moment we're working
with the product, with the whole array.
Now, of course, we'll deal with a single product.
And also, as far as this function, when we're pitching for a single product, we won't invoke it over
here.
So we'll have to pass this down and then we'll have to invoke it when we set up the single page.
So when the user navigates through the single page, then in the user will fetch that single product
and then of course we will display it.
But in this video, I would want to set up my single product because again, it's going to be extremely
similar to the FETCH product and also set up everything in the producer.
And then once we've got that out of the way, then of course we can navigate to the single product.
So I'm going to come up with a name.
It's going to be such a single product, single and then product.
It's also going to be a function will also pass in the URL.
In this case, they will dispatch.
And the actions, of course, are going to be different since it is a single product.
So I get single product Biggin, which is going to set up the loading, then we have success and then
the error.
Now I guess before we set up the function, why don't we also set up the state values?
Then we will go with single underscore product, underscore loading that will be equal to force by default.
Then we're going to go with, you know what, I'm just going to copy and paste because I need to change
these values around.
So I'm going to say product and error.
Now, I will also be false.
And then as far as the single product is just going to be an empty array, meaning sorry, it's going
to be empty object by default.
So those are my three state values.
Then, of course, out of dispatch and in this case, I'm going to go with type and as far as the types,
if we take a look at the actions and that's not over here, I'm actually looking for the actions we'll
see through the actions we have, get single product again, that single product success and get single
product error.
So, of course, we are importing them in the product context as well as the product reducer.
So, of course, now I would want to dispatch when I set up my fetch the loading one.
So we're going to go with get a single product B and so we're going to go with get what?
I'm just typing all over the place here.
I need to go with get and then single product again.
That is what we're dispatching when we start loading.
Then again we're going to go and try catch.
And as far as the error rates right away, this patch, the error one.
So pass in the object here and of course the type will be get single product error.
And in here I'm still going to get my data, so I'm going to sign it to a single product.
So let's go with CONSED and then response is equal to await.
And of course we'll use axios and get will pass in the URL.
So the one that's coming in as an argument online will create a new variable cost and then single product
is equal to to the data supports that data.
And in this case, I'm not going to cancel anything because again, it's extremely similar to what we
did before.
And I find it that there's going to be too much repetition.
And in this case, I'm going to go with this patch despatching an action.
And of course, this is going to be get single product success.
And as far as the payload I want to pass and my single product, the variable that I just set up.
So once we have this one now, of course, I would want to navigate to my product reducer and take care
of all of these reactions.
So let me find my producer products producer.
I'm done with an so that was the last one.
And we're going to go with get single product, begin and end here.
And I say if and then action.
Action and type is equal to get single product, not success.
All right, we're going to go with B again.
If that is the case, I would want to do two things.
I would want to return to state, first, not state, and then in the state.
I would want to change to I would want to set loading the true and accurate force, because we need
to keep in mind that it's a bit different for single product, because there might be a case where you
for one product and you get there, but you're not going to get the same error for different product.
So that's why you need to take care of the fact that if there is already error, I would want to start
false by default.
And then, of course, if there is actual error, then yes, I'll handle that.
So what I'm trying to say, unlike the previous one where we had just holding true.
I also want to set by default that error to be false.
So we're going to go with a single product and then loading to be true since we start watching.
But just in case there's some old error that's still sticking around, I'm going to go with product,
single product and then underscore error is equal to false.
So that going to be my loading one.
Then, of course, I also have action, action.
And then that type equal to get single product success.
So we have this type of action.
And in this case, again, we're returning a state that we return on state properties.
Then single product loading is going to be false course.
And also I would want to set my single product equal to action single and then on this core product
is equal to my action and mine payroll because remember.
In the context we passed it and correct, we've got this one, we get single product success and as
a pilot we passed in this single product and I'm going to navigate back over here.
And the last one I would want to handle, of course, is the area where I would want to flip it, where
the loading will be false and then the error is going to be true.
Now, in order to speed this up, I think I can just copy this one and change the value.
So this is going to be error here.
So error so and then as far as the state, like I said, I'll flip the values.
Loading will be false if there is an error and the error will be true.
OK, so so of course I can say it.
And next video, we'll start working in this single product page.