So now that we have created a scorecard container and the guide item and we have done with the context,
the global context, let's move our application from use trade to the use reducer.
Hope to basically use reducer is just the upgraded version of the used trade hook.
But it is.
It provides us more functionalities.
You can handle multiple states and you can perform multiple actions to the particular variable, which
is that in the state.
And it is used for it is used for some more complex operations.
So let me first explain the basic syntax and the basic working of the user.
You said, OK, before that, I will take you to a very beautiful article here on this and.
This has explained the to do so in a very real way, so as you can see, it's threatened clearly that
the use reducer is the better alternative to use that hook and is generally more preferred over the
use to talk.
When you have complex building logic or in the next well depends upon the previous value.
So this is the basic pillar of using a new set hook.
So if you know use it, it's very easy for you to understand you introduce it.
But if you don't know that, then you need to go and look up for use to talk and understand that first
and then to come to use reduce it.
OK, so the syntax is quite similar to the use state.
We have the sconce keyword here.
We have this arrowhead inside that that is, of course variable and with the value will be stored.
And of course, that is a function.
So here we cannot give our custom function right here.
This is a dart dispatch function and this is responsible for everything like whatever the switch cases
and whatever we are, whatever operations which we are going to perform on this variable.
So that is handled by this dispatch method.
So that is very, very important.
And next we go to this is the key word again.
So this is the use reducer keyword here because this is the user left hook.
So previously it was used state.
So you need to just change this from use to the reducer.
And one more important thing inside to see this reducer.
So here will be, of course, some initial values in the initial like scenario for the variable, but
in use state what it used to be that there was only one particular initial value and that third, we
provided one particular like maybe integer the string object array, anything, but that was only one.
But here there are multiple arguments here.
So here is first of all this.
That is an argument that the reducer.
No wonder, he said, is that user defined function that pairs the current state with a dispatch method
to handle the state.
And next, we have the initial arcs.
That means the initial arguments.
Now this initial order is what like the initial values of the particular variable.
So this will store the initial values of that particular variable.
Then we have in it, and it is the function to initialize the state lazily.
Now what does this mean?
Let us take a look at this code and get a little deeper into it.
So inside this abroad year, we have, first of all, we want to empower the user to do so from React,
as this is a normal thing we used to do in the U.S. state or for any number who can react.
But the first thing which we do is we import it from the OK, so that is what we have done now.
Next, we have defined initial state and the reducer.
You see here the reducer and the initial are so that we have to define first, like what is the initial
state and what is the reducer?
So now I like explaining what is the reducer, but let's take a look at the initial state now.
Initial state is single now.
What does this mean?
That whatever the variable we have part inside, but inside is the initial value is assigned over here.
Next, we have the reducer function.
Now this is also very interesting because.
This expects the function and inside that also this expense to particular arguments.
And you cannot change them.
And the first one is the state.
Now what is this state?
And next is the action.
Now where does this action?
OK, so let me explain it to the state is the variable which we have defined over here, and this will
be the new return variable, like when we perform the action, when we perform some operation on the
variable.
But what is going to be written is this state OK because we have already defined initial state.
Now that initial state, we cannot continue with the initial state forever, right?
We need to change our view that this is why we are here to use the user this Red Hook.
So for that, the state comes into the picture and this is responsible for storing the like the final
output or the result of the function.
OK, so next we have the action.
This action is responsible for changing the name, changing the operation, which you want to operate
on that particular variable because as I said, in the use it or do so that you can perform multiple
operations on a single variable and use state, what we used to do that.
OK, we defined that as a function and we defined the variable.
And then we defined a function that is the set variable.
And the third variable was responsible for the changes made to the particular variable.
But at the time, we can make only one change and that function will be executed.
After that, the changes will be made.
But here we can switch among the actions.
That is why this is the action like we can switch.
So next we have the Switch statement inside this function, and this will take an argument of this action.
This X, this action would be paused as an argument to the Switch statement.
OK, now inside the Switch statement.
There are different, different cases.
So according to that, those cases, the variable will be changed.
So for example, here we have taken the case as add now and this will be a string, a string.
But remember this thing which you gave here?
This is the same value which you have to use on dispatching the action.
Now we can bet we'll get to it in in a moment.
But now you see this case and this is the action like this is the string.
And next what we want to return from the state like what should be the output.
So in the written statement, we did state plus one.
All you can write anything state multiplied by one, divided by one or any other thing.
OK.
So what does this imply is that whenever we are calling this reducer and whenever we are giving and
this add, this is string as a dispatch method.
So this this will identify it as a dispatch matter and come here inside this switch statement and it
will search for the add add value here.
Now add case here, basically.
So whenever it will match this add case, it will execute this particular action and the state will
be returned as the final output.
OK.
Next same goes with another case is also now for this subtract that is minus one for each side.
That would be a zero.
We can even give multiply, divide or any other thing.
Now that is our default case.
There will be like if any of the action does not match.
So this will be the default output which we are going to receive.
OK.
I hope this is clear.
Next, we want to define that producer.
Now, remember initializing reduce it like any hope should be initialized at the top level of the function.
Understand.
Now, whenever, like, for example, now we are abd just fine.
So inside the AB function and need any hope if you want to use that particular road needs to be initialized
at the top level.
And if you don't, you will get the error saying that the hook should be initialized at the top level.
So eventually you will get to know, but I'm telling you they're trying to avoid that particular error,
OK?
So that's what we have done here.
We have initialized to use it or do so to hook, and you can see that is the first is the variable which
will be responsible for the output.
Next, we have the dispatch function.
This will be responsible for the cases and the actions related to them.
Next, we have this key word to use reducer and this inside this that radius argument and the initial
state argument.
As simple as that?
No.
Whenever we want to change and we want to give the instruction to that particular to do so.
But what we want to give, we want to give the cases which we have to find in the sweet and the sweet
statement.
For example, it has given here inside a button, he has added on click function and inside this there.
The fact that the function and this badge in the dispatch function is passing an argument of add the
what it will do it will do, it will go to that statement and it will spread cheer for that and it will
execute that particular action.
Now.
This and and when we want to bring that particular variable, we will we will bring this count inside
the parameters because this is the JavaScript and this is a dynamic value.
This is not a hardcoded static value.
So that is why we have provided this curly braces here.
So this was and you can see this as an example also, but this was all about the user to do so.
The hook, I hope this is clear to you.
And now I explain this in the beginning because now we are going to use this and I don't want any doubt
in that because our understanding is really important before executing the main part.
Now we can go back to our project and we can just implement that in our project.
Now remember, this was a really, really important concept because you state, you state and use REDUCE-IT
are like, like used very commonly in react.
You cannot think of react bigger without use state.
I'll use the reducer.
So that is what we have understood.
Next, we are going to implement that in our project.
Now we will compete, will upgrade this use state to use it or do such.