Not bad, not bad.
We can fetch all our products and we are in good shape, but we would need to add some code in such
products because I would want to handle loading, I would want to handle error.
And also I would want to set everything up with use producer.
Correct.
And we're going to start by adding more properties in our initial step to moment.
The only thing we have is the sidebar thing.
Now, I would want to add more properties.
Now, the first one will be loading, but since there's going to be two loadings, there's going to
be one for single product and one for all the product.
The naming is going to be a bit more annoying.
We're going to go with products and then loading.
So underscore loading and by default it is going to be false.
Then I would also want to handle the error and we're going to go with products underscore and then error.
Then by default it is going to be false.
Then I would want to set up my actual product.
So eventually I know that if everything is correct, I'm going to get my product.
And then I also have the feature product, correct and feature product I will pull out in the actual
reducer.
So I'll get all the product.
I will pass in as my payload and then eventually in the reducer I will pull them up.
So my default, they are going to be feature products and they're just going to be empty.
All right.
There's going to be three more properties for a single product, so there's going to be loading our
product and we can add them right now or we can skip it doesn't really matter.
I think I'm going to skip it for now and we'll add them later once we start dealing with single product.
So that should be our stock then.
Of course, for every action I would want to do, I would need to set up the actual action variable.
Correct.
And you can probably already guess that that is already taken care of where?
No, I have one for get products begin.
So this is going to be for loading get product success.
This is when we get our product and there is no error.
And also I would want to handle the error.
That's why we get product error.
And if we take a look at the product context, we can see that I imported all of these three actions.
Correct.
So I have these variables.
And then if we take a look at the reducers, we also see that in a product producer, I have all these
three action.
So now, of course, in the function, I would want to set up those actions using this patch.
So I'm going to navigate back.
We have much product and the first thing that I would want to do is dispatch the loading one and remember
the action.
The name for that action was get product begin.
So we're going to go with dispatch.
And then I'm going to pass in type, of course, and we'll get product and then begin.
So this is going to set uploading now.
Of course, there's going to be right away.
And why?
Because remember, in a product producer, are we taking care of that now?
But just to prove my point, I will still invoke it.
And there it is.
Now, of course, we have this big fat error where we have get product begin.
Now there's no matching type.
So we navigate bravely back to the product producer and set this up.
Correct me if I'm an action type is equal to get product and then begin then what I would want.
Well, I would want to return all the properties that I have in a state.
And what was the property for the loading one?
Well, we're going to go with products and I believe it was loading and I'll set it equal to true.
Right.
So once we start pitching the product, I'll set this one equal to true.
And you can probably already guess that somewhere in our project we will be looking for this property
for the value.
And then depending on that, there's going to be Spiner or there's not going to be a Spiner.
So I'll save this one.
So now we shouldn't have the error and we're definitely loading.
Now, I'm not going to set up right away some kind of Spiner in application.
What I would want you to show is the fact that we can always check everything with components.
So we have product provider, correct.
And notice, I have this producer and check it out.
So at the moment, sidebar is false, but the product floating is true.
But if I refresh, you'll notice, of course, that it is going to be false and then it will turn true.
Now it's going to be a little bit faster.
It's going to be hard to see.
But just keep in mind that in this case, I'm not going to build something to showcase that we're loading.
But you can always go back to the components to react afterwards and just check your state, ours.
This is exactly what we are going to do.
So we begin putting product.
So we start loading.
And of course, we would need to handle two questions, one for there.
And then the second one is if everything is successful.
And for that, I'm going to set up a try and catch just because.
So I'm going to go try catch.
I'll move my response in the try block.
And I also would want to right away pull out my data.
Some say CONSED and that product is equal to response data.
Remember, the array was in the data property and then I'm not going to log the response in this case.
What I'm gonna do is I eventually set up the error so I might as well just leave the console, log off
and be done with it.
So we have product.
It is equal to response data that is equal to.
Right.
So now of course, let's try setting up the action.
So we're going to go with a dispatch.
And the name of this action is going to be get product success, and as far as the payload, well,
I'll pass in my products.
So I say here, payload is equal to a product.
So we say it.
We should get our products.
But first, of course, there's going to be a big, fat mess because we're not handling that in our
producer.
So in order to fix our error, I would need to navigate to my producer and handle that.
So in this case, of course, we're talking about get product and success.
And there's two cases.
There's one for featured ones.
So you have to filter our existing.
All right.
And the second one is just dumping the product that we're getting into our state property.
Correct.
So let's navigate to product a reducer again.
What action type are we looking for?
Well, we would want to get product success.
So if action and that type is equal to get product and success.
So then, of course, I would want to update both of my arrays and let's start with the featured ones,
because remember, we have the array and each object has that feature property, meaning if the product
is featured, then it has the feature property.
If not, then there's no property by the name of featured.
So before I return my state, I can simply say get featured, product featured and then product.
And that is equal to action payload since the products are coming in the payload and.
All right.
Or set up my filter and I'll say if the product has the property feature true.
And of course I would want to return this product.
So this is my product.
And you know what I think I'm going to do implicit return where I'll just say product then featured
an equal the true.
So so those are going to be my feature product.
And then the second thing is all the products.
Correct.
And one thing you'll notice here that I still get error, even though technically we handle that y well
because we're not returning a state.
So that's important, meaning we're not returning anything from this condition.
So if our set a simple return, then of course I'm not going to get this error.
But keep in mind that you will get this error even as you're working on this action type if you're not
returning something.
So just in case that trips you up, why was that happening?
Well, because we don't have the return.
And the moment we have the return, there's going to be no error.
And as far as the return, well, I would want to return all the stake correct.
And I would want to set my loading to false.
Remember, initially, we set it to true.
So let's go here or say product and then underscore loading is equal to false, of course.
And then two things.
First, I would want to set my product so the product array to my full payload and then feed your product
will be equal to the new order.
So let's try it out.
We're going to go with product is equal to a action and then payload push and then feature product.
Well, since the name is exactly the same as I have for my variable, I can just do the S6 thing where
I don't need to set it equal to feature product.
And of course now we can save and I'm going to navigate to the bigger screen and again.
I'm going to show you what we've got, so in the beginning, we should have empty eyes, correct?
So let's refresher.
We should have empty arrays and as you can see, it happens somewhat quick.
So now, of course, I have the product.
Loading is false and feature product is the array of six items.
And then the last thing that I would want is to take care of the error.
So inside of the product context and inside of the [REMOVED], what I would want is this the error.
So if there's ever an error, I'll say this patch and line as far as the type, what we need to pass
and of course, object first and then we're going to go with get product.
And I believe it was error.
So get get underscore product error.
So that's my type.
And we're not going to pass anything else in, but we'll handle that in the future.
So now in the Reducers, set up one more action here and I'll say if action and then type is equal to
get product error.
So then of course I would want to return my state so that are not state.
So Compi, all the values.
But two things that I would want to change is I would still want to set loading to force.
Remember, we were always doing that.
So product loading should be false and then the error should be true.
So in here we're going to go with product and error and that should be set to true.
So Syrett.
And we should have a nice function that handles loading that handle success as well as the Earth, and
once we've got this in place, of course, now we can move on to the next step.