In this video.
Let's get started with the use reducer.
So inside the RC, we have a folder for context.
So like I said, if we have pieces of data that are related, we are going to create a separate context
file for that.
But for to do application, we need to keep track of our to do so here.
Going to be asked to do context, great duties.
So let's bring in the use reducer.
And here we go.
For use reducer, it takes in two agreements.
The first one is the reducer function, and then the next segment is going to be the initial states.
So let's get back to the slide and let me show you here.
So looking at this one, this is going to be our initial state for our application.
And this is a function that's going to make changes to the initial state here by using what is called
this patch.
And we come back to it as you move on.
So here we can provide an anonymous function here and start and this is a normal function and here because
we are going to keep track of a race of to I will provide mine as an empty array.
So here what comes back from this function is we have two important thing.
The first one is going to be our state, and this state contains all the states inside the initial states.
And we have a function called dispatch, like I said.
Now here is the dispatch function.
This is the function that is going to trigger our use reducer.
But since we are going to make more logic inside the reducer function here, let's go ahead and create
a function separately and then we reference it here.
So here, let's cut this one and let's come up here.
And first of all, let's create the reducer function.
So here you go.
Cons cost to do reducer.
Is equal to arrow function.
And let's also create our initial state here.
Initial states.
If you are building complex application that we aim to save a lot of data inside the initial state.
So here, let's reference the initial state here and we pass in our to do reducer.
Now this is how we create our use reducer.
That is the first step.
Now for the to do reducer, we have access to what is called states and then the action.
Great.
So what is a state?
We have access to the entire state or the initial state inside our to do reducer and stuff.
And then the action is going to contain the type of action that we want to take on our initial state.
So from this diagram, we can say the type of action is to add to do.
Because as soon as I hit add to do meaning that I want to take some data here and add to the original
to do so for this, the type of action is what we call ad dude.
So now inside here we are going to make logic whether to add record to our initial state or to remove.
So here we can check that if action.
And on that we have a property called type.
If the action type is equal to add to do, then we are going to make logic here.
Then we are going to add record to our initial state here.
And one thing about reducer is that we should not mutate the original data.
In that case, we are going to retain new data here.
And for this we are going to spread the original state and how can we add our own data into it?
So for this action, we have two properties.
One is a type of action, and then the payload are the action objects.
So looking at the diagram here, you can see that we are passing in a data code payload for the event.
And like here, so the this part contains the action type and then the payload.
So this reducer have access to the data that is coming on what is called action dot payload.
And for that one, we are going to specify that normally we use what is called payload.
So here we are going to add what is called action dot payload.
And I will show you in a moment how we can get the payload.
So now we are done with our reducer function for adding record into the initial state.
So for this, we need to return the original data in case there is no action.
So here we go.
Going to be as retain the original state.
So the next question is that how can a component have access to our state here and then a function that
we are about to create?
That is why we need what is called create context.
So with the create context is going to help any component to have access to this data and the functions
that we are about to create.
So here we are going to export the context from here, and I'll call this one as to do context is equal
to create context.
I'm going to create what is called to do provide function.
So let me export from this file as cons as to do context provider.
Is equal to our function.
So here I would structure the component that is the children.
So here let's retain the to do context dot provider and then you pass in the children as that save it.
Now we are good to go.
So next step is that let's go ahead and then send the data to the provider.
So let me put them in a fragment so that they will be on top of each other.
Great.
Something like this.
All right.
So for the provider, we are going to pass in what is called a value.
And for this, we want to pass in the entire states into that.
So here another basis and I'll pass in the states.
So any component that is going to wrap with this provider is going to have our states.
So next step is that let's go at the root of our project and wrap our provider because we want every
component to have access to it.
So here, let's bring in the to do context provider and we're going to wrap inside the app components.
So this is a basic way of creating.
We do some in the next video, I'll show you how we can create an action where we can add to do to our
initial state.