All right, so let's get this party started and we're going to go to context.
Yes.
And first, I would want to set up our used producer.
OK, so instead of state, we're going to do a little bit of refactoring and use a producer, not what
two things use producer was looking for.
It was looking for user function, which eventually will set up and the producer JS file and also we
need it.
Initial state.
Correct.
So for now, let's just pass and nothing over here.
So this is going to be an empty I want to change these values where I'm not going to call this cart
because there's going to be some more values there.
So I'm just going to go with State and then remember, instead of said state or whatever, we go with
this patch work.
So I'm not once we set up this function, then I would want to pass on those two values, the producer
function as well as initial state.
Let's start with initial state, and I'm just going to set it up as a local value.
So let me set up my variable first and then I'll set it equal to the object.
And then inside of the object, I would want to have a loading, which is going to be false for the
time being.
Of course, eventually we'll change that then and we'll set up our cart and eventually it will be empty
array.
But then since we haven't fetched the data yet, I would want to have some kind of values.
That's why, for the time being will set it equal to the hardcoded once the car item.
And then of course, we also have the total.
Which essentially will always show the total of the.
Again, we'll start with zero and then the amount.
So how many items we have in a car?
Again, we start with zero.
So in here, user Dirceu.
And then we pass in our initial state variable.
OK, beautiful.
Now we only need to set up the user.
So I'll navigate Tulga reducer, Jess, and we'll just start with a boilerplate.
And as far as the boilerplate, we'll set up a function.
Of course I'm going to go with const and then reducer and it's going to be looking for two things.
So as an argument, it is going to get state and the action.
So remember in tutorial we covered that state is the current state before the update and then action
is well, what we're trying to do now, initially we'll throw the error if no actions match.
But for the time being, let's just return the state.
And of course, I would also want to export the user and I just prefer going with defaults.
I'm going to say export default and I will export my producer.
So now, in a context, I can bravely grab my producer that is coming from producer Jess and then set
it up as a first argument.
So I have my hook used producer I and reduce their function and then initial step.
Now the moment we will save, of course there's going to be an hour.
Why?
Well because in the value we are exporting our previous state value.
In this case I have the state.
So of course what I would want is to spread out my state.
Correct.
That would make sense because I would want to pass all these properties since eventually, of course,
I will use them.
So what we can do is just go down the dot and then we're looking for the state value, which of course
at the moment will be our initial state.
Now we can see that there's something on a screen.
And why is that?
Well, because if we navigate to a court container, that is the only thing, or at least should be
the only thing that is grabbing something from you.
Of course, the cart property is already there because I said dot, dot, dot and then state.
So I spread out all my state right now, of course, eventually we will set up some functions as well.
So add them separately.
But for the time being, we're just spreading out all the state powers which are loading, which are
cart.
And of course those are cart items and total animal.
And to complete this video, why don't we go over the components that are looking for those voters,
even though at the moment they are just hard coded and they are zeros and then they are false.
And then eventually, of course, once our functionality starts working, we don't need to hop around
our components and waste our time on hooking everything up.
We might as well do that in this video.
Not first.
I guess I would want to start with a number like so.
And then, of course, I already have used global context.
And what is the number looking for?
Well, it is looking for the amount of items in the car.
Correct.
So we go here with CONSED, then we're destructs.
Right.
And now that it is coming from mieux, use global context and then of course I need to invoke it.
And then where I have the paragraph.
Well which is wrong.
Let's say that we'll be looking for it again.
It is going to be zero because that is the value that I hardcoded.
OK, that's an awesome start.
Let's double check.
We also have the app and then we're checking for the loading, which of course doesn't make sense right
now because we're not loading anything as far as data, but we might as well call on it.
And then when we do there, it is going to be already working.
So we go with CONSED and then again, we're looking for our variable or loading a variable, of course,
and that is equal to my year's global context.
I invoke it and then of course I can on comment.
There is now I have my loading as well.
And of course the reason why we don't see that is because loading is false.
If I go back and if I said this is true, you can probably already guess that course will be able to
see the loading ones go back to false and we should see the items then still back within the cart container
where essentially we have the cart.
I also would want to check for a total because I'm here or I'm displaying that.
So not only I would want to get the cart, I would also want to get a total and then we'll scroll down,
scroll down, scroll down on that where we have total.
I'll place my total value again.
Shouldn't change much because we have the zero there.
So we add the zero there is now we have our total and that should conclude our first video where we
just set up the initial functionality of use producer.