OK, now let's go ahead and implement the youth radio sort of hook to our function, to our project
or our application.
So right now, we were using the youth they took, but now we upgraded to use it to do Hook.
So first of all, we need to imported from York, so we imported by use.
It was.
Producers common.
And next.
We'll rename this.
Tom used to use the producer.
Producer.
And inside this, there will be REDUCE-IT and an initial state.
Not the card items, actually, but that will be reduced reduce an initial state.
And here we'll have, of course, the state and the dispatch.
The.
Responsible for handling the state and dispatch.
For deciding what action needs to be taken on that state wearable.
OK, so we have initialized data used to use their dataset hook at the top level of the component.
Sounds fair enough.
Next, let us define this initial step that we do outside of this, the outside of this function, OK,
we'll do it here and that will be concert and initial state.
Initial state and this will be an object, and most of all, we are giving to.
We are going to give the functionality of foot like the loading loading.
We are going to set the loading, for example, when we are getting the data from the API.
So the time which till the data comes to us, there should be some loaders.
There should be a loading state that should be set to true at that time.
And as soon as we receive the data, that loading state should be set to false and we can see their
data on a screen.
Before that, we need to set a state of loading.
So initially, this will be false.
And next, we will have the court.
And this would contain the card items, not the spelling mistake.
Next, we'll have the total now, the total is the number that will be shown near the bag icon in the
nav bar.
I am making so mistakes that will be zero for the beginning and then will have the amount which will
be shown in the total in the sum total.
So that will also be zero in the beginning.
So I've given semicolon here that will just be a comma.
OK.
We have said the initials tick.
It can also the through for the very first time, but it totally depends on us.
OK, now in the app provider function.
What we'll do is we we are returning the app context and providing a right, and we have given the value
of carpet.
But now what we'll do is we'll provide the state here.
Instead of this card, we'll provide the card, we'll provide the state here.
We'll do it by using the spread.
Operator supports third operator will give three dots and we'll write state and inside this, that will
be a children.
So which we're is going to display all of the data.
So let me just save it for now and let me just start of the server.
So I'll go to my project folder and my bag and then I'll let npm start.
So this will start the server and this will take a few seconds.
OK, so now the server is up and running, and we have received some errors.
So I think I've made a typo on the line and let it.
Yes, there's a typo.
And when I savoured.
OK.
That reduces not defined, but what we are going to do is we are going to create the reducer in a separate
file that will be reduced retards and then we'll be importing it and then it ever will go.
So, OK, now we are done with the basic structure of the use reducer.
So now let's go ahead and create the reducer file.
And for that, we need to go to the source folder and we have to create the new standards to do certain
audits.
So in the beginning, we'll just create a basic rule is the function, so that will be caused.
You son, is equal to a fair total function, and inside this, there would be two arguments that would
be state.
And action.
And.
This would be a function which will be returning state as of now.
We're not providing any functionality now.
We're just testing it and we'll explore this function export default.
But it is a.
As simple as that.
Now we'll go to the context, and we'll import the producer from producer import producer from North
Form.
The new.
Now it will vanish.
Yeah.
Now let us go to the browser and have a look.
Which Iran is waiting for us?
Oh, no, Iran is working for us.
OK, so things look a little bit cleaner now.
And of course, there is no functionality as of now.
And you can see still this errors are coming to us.
So let us try to fix them.
Now inside the card container, we've already imported the context on.
So what we'll do is we try to we try to.
Jane, this this is a hardcoded value and static.
Let us try to make it dynamic.
So first of all, what we'll do is we'll import something from here that would be amount, I guess.
And will ride the amount here.
Well, I hope that works.
And let does go to the browser and see, yeah.
The amount is the euro right now.
And I hope that is.
That is it.
Now, why do you want to do is we want to change the value of this bag?
We want to make good dynamic right now and this is static and hardcoded.
Let us go ahead and just change that particular value.
Before that, we need to import that inside this props.
And that could be done from the context, of course, that of the total.
Let me just grab the total.
And where was it actually showing?
Oh, that was in the nav bar.
OK, OK.
So for that, we need to go to the never.
And we need to import our context, and it's a long process.