And I will import the global context, and then I have to show the quantity of the products which we
added to the cart or we import them.
And global context.
I think he was global context.
Why it's not showing me more transport options.
OK.
So the thing is, there are multiple exports in that particular component, so to import one particular.
Function from that unit to provide clearances, because because there are multiple exports, so for
that, you need to provide core liberties because if you want to import of one before export earnings
and the exporter, there is only one default export.
So then you do need to provide collaborators.
But if there are multiple exports, then you specify which one inside the Clarissa's.
So here we'll import a global context from the context.
From context, now we'll use the value, so first of all, let me create a constant contest.
Maybe we can just name it inside the object we'll name it among.
And that would be cool to use global context.
And.
Now.
Will change this value from static to dynamic for that will provide JavaScript to that means in the
parenthesis funny and the calibrations and here will right amount.
But you've declared, you know, the well is no longer static nodes turn to dynamic and we do need to
right now, we know each one between the and so we don't need to come here in the cold and ride it or
we can change it and the function on the UI itself.
So let me save it.
Let me see the servers is up and running.
No, it's not personal to the project folder and it was my bag and feels right and being start and so
will be stored in a few moments.
OK, so relics loading up or down to do is I need to settle loading Stuart so that whenever the data
is like being fetched from the API, so we need to see something on the UI, you know, which indicates
that the data is being lauded for that will.
Right.
We've already said the loading state and all inside the context, you can see this loading state.
So initially it is false.
So but we have not rendered it on the UI right before that.
We need to import had the global context and.
Inside after this, so her over to Louise.
I don't really import the global context import.
Again, the calibrates use global context.
From context.
Indexed.
Now we have not created any for another for the components and we have not created.
Is that whenever we import?
So I want to like make things as clean as possible because if we create for a living all so while importing,
like while importing and providing the location, so there's a little like confusion happens in the
beginning so that I won't be just avoid that for you.
And now important, the global context.
And now what we'll do is we'll create our loading.
Constant and that will be Konst loading.
From the EU's global context, you see, this has already been declared in the context.
We are just calling it here and now we'll write a final statement.
So.
Basically, if loading.
If loading.
We'll return.
Some Deus Ex.
And parenthesis and here will provide a div and will provide a class name for it, and the costume will
be loading inside the loading.
We can just to give an H1 tag and will write Loading.
You can also give some animations here, like the lower order.
Just like there are so many loads for react.
You can go to material way and you can find a very good amount of lower dose.
You can also use bootstrap, or you can also make a custom Lauder's using KSAZ.
Totally depend on you.
There's no competition.
So if the is set to true, this court will execute and the written statement will return.
Loading.
But if the looting is false?
So what else?
Health.
But it done everything.
Whatever it is here or you can or you can even avoid this, you cannot you won't want to ride themselves.
It is understood that if Lording is true, then only the squad will execute.
Otherwise, or I made a mistake.
Yeah, otherwise this this is going to render anyhow.
So.
That is there.
Next, a semicolon here.
And save it.
And.
Let me show you how this looks in the browser.
We refresh.
OK, now you see the value of the cart is zero.
Now it is no longer five, it was five and that was the starting value.
But now we add a little dynamic thing to it, and I would say it'll OK.
And.
Let us now go and write our producer right now, producer is almost empty and it has no code and it's
no functionality, nothing at all.
But now we'll add code to it.
And this is the most important file you can say to do third audits, because the motive behind this
produce project is to teach you the reducer hook and how to use it to do so.
How do you dispatch how to use state action and all that?
That is the motive behind this project.
So you need to look very closely when I have this call and this is the most important part of this tutorial
by the product, you can see.
So now we already defined the reducer.
You can see in Slide, the producer cost producer is equal to state action.
These are the two barometers, or you can see arguments which are expected by default.
So now inside this.
There is a bunch of things we need to do.
We need to return a lot of things, according to our needs.
Okay, so.
One thing here is that you can use the street statements, which I demonstrated when I was explaining
that REDUCE-IT OK.
So I was explaining with the help of food statements.
But if you want, you can also use the infernal statements like bulldust saying if you have any confusion,
the sweet statements and you default and everything, you can just go ahead with.
If in a segment that is more straightforward and in the beginning, it would be good to just stick to
the if in statements because they are the basic like the basic things which everyone knows, I guess.
OK, so now we'll write a final statement to clear the clock whenever the user will press the button
to clear the card.
So then what should happen?
That code will be in service if statements if.
Hmm.
Action dog type.
Is equally equal to the spring, and that spring will be clear underscored.
But now this is like a customizable thing.
You can write anything like you can just write clear or you can write delete whatever whatsoever that
is not at all a compulsion.
What more do you have to focus on the concept now inside a brief statement that should be a written
like what it is should return if that condition is fulfilled, then start to return will use a spread
operator who will return the state.
And if God forbid you.
Because the user has cleared the card, so the card at eight should be zero now.
OK.
So this was our clear card functionality.
The next will do increase and decrease functionality and also the amount should be calculated on every
increasing decrease.
That thing will be the next.
So we'll do that in the next review.