Now it's time for us to connect the front end to the back end.
And to achieve that, we need to find a way to handle state in our React application, because using
the client side to connect to the back end is all about managing state and in react.
We have couple of ways to manage state.
One is we can use you state to manage state and react application and apart from you state, we also
have what is called the context API hook for that one too we can use to manage State and React application.
And lastly, we can use third party state management like Redux and to be more specific, Redux toolkit.
But when building complex application, you need to choose whether to use the context API or to use
Redux.
For our purpose.
We are going to use context API.
Context API works the same way as Redux, but instead for context API, there is no need for you to
install.
Any third party is being built in into React.
So let's see how we are going to make use of context API to manage State in a React application.
And if you are not familiar with the context API, there is a section for context API.
So at this point I assume that you are familiar with Context API and then you want to put them into
practice?
Verrastro I will explain every bit of code I write, so no problem with that.
So let's get started.
Well, before we continue, make sure that your bug and API or server is running and this is my back
end server or API and this is the client side and that is the react and you can see the color difference.
And to be able to differentiate between the back end and then the front end, I installed an extension
called Peacock.
And if you don't have it, go ahead and install and after installation go to view and come on palette
and then set for peacock as this if it's search for that you can see change to favourite colour and
here you can change any colour of your choice.
For me, I like to use Node.js, so I like to use node green, so that is it.
So now make sure that the server is running and for me mine is running on port 8080.
So let's get started with the context API.
So back to the application inside the I see I have added a new folder called a set and I added my logo
inside and I'll provide this file for you in case you want to use it.
And you can see that the logo has been changed.
So let's go ahead and then implement the main logic because we are going to use context.
We need to create a folder for that.
So inside the components, we are going to create a new folder and we call it as context.
And for this context, we are going to create folders based on the data type we managed.
Looking at our back end, you can see that inside the model.
These are the data that we have.
We have the account transactions and then the user meaning that we are going to manage these types of
states in our application.
Inside the context, we are going to create three or four days.
But for now let's work with the users and I'm going to name this one as of context.
Great.
And then inside we are going to create one file by name of context.
There it is.
And then after that, I'm going to create one more file call of action types.
We're going to be as of action types.
And I'll explain to you why we need this file.
Now that we have added the of context file, let's implement the context API.
First step is that let's require what is called create context from React.
So first step is that we are going to create what is called Earth context and we are going to make use
of the create context and call it as a function.
And what comes back, we are going to assign to a variable called of context, and it's equal to that.
We may need this of context in our component to be able to use the context that we are going to create.
Because of that, we need to export for this file as export.
The next step is that we need to create a provider.
The provider is going to serve as a high order component, meaning that it is going to take a component
that need to access a data from this context.
So here we go.
Our code is one as comms and then of context provider.
And is equal to every function as that.
The next step is that we need to receive the component that's going to use this or provider.
Because of that, we need to do structure as children.
The children pro represent the component that is going to use the pass in into this higher order component.
So here we go.
We are going to return from this component.
And what we are going to retain is the of context.
And on that we have what is called provider as the name implies, it's going to provide a data to other
components.
Then lastly, we bring the children inside.
The next step is that we need to create initial stage for the user context.
So here we go.
You're going to be as concerned and then initiate state by convention.
We use uppercase for initial state and it's equal to an object.
This one is up to you how we are going to manage or keep track about your states for our purpose.
We want to keep track about the authentication status, about the user.
So our assign a variable called user off and then by default is null because the user hasn't logged
in yet.
And I also want to keep track about the error in case something goes wrong upon logging in or upon registration.
So here by default is also now.
And I also want to keep track about loading so that I can give user some good user experience.
So by default is false.
Great.
And then lastly, I also want to keep track about the profile by the user.
So I would declare a variable and say profile equal to now that is by default.
So we are going to create a function to update this stage.
So now let's have a period for comment and call this one as initial states.
So the next step is that we need to find a way to update this state.
And to achieve that we are going to use a hook called use reducer.
So here you go.
We bring in the use reducer and the next step is that we need to call the use reducer inside the component.
Again, don't call the use reducer outside the provider.
It must be inside a component.
So here we go.
We call use reducer as a function, and for this it takes in two elements.
The first one is what we call the reducer.
So for now I can pass in a callback function using error function as dots.
And next is the initial state.
And lucky for us, we have the initial state here.
So let's pass in as initial states.
Great.
And what comes back from the user reducer?
We have two important things.
So let's go ahead and then structure that and here we go, let's have some space around that.
Great.
So the first element is what we call state.
So this stage represents our entire state in application, that is the initial state.
And then the next remains is going to be a function where we are going to use to update this state and
by default we call it as dispatch great.
So this stage represents the entire state, so you can name it, let's say user state or anything.
The choice is yours.
Likewise.
This one to you can name it whatever you want.
The choice is yours, but by convention you use what is called dispatch and which is a function.
So the next question is that how can we update our state by taking the data coming from our back end
into our application?
That is why the reducer comes into play, because we are going to implement our business logic inside
this function.
Let's create a function on its own and then we require ACA.
So up here we are going to create what is called user reducer or of reducer.
And here we go.
Cost reducer is equal to zero function perfect.
And this reducer we have access to two important things.
The first one is what we call the states.
The next segment is what we call the action grade.
So this state represents our state in our application in this case, which is our initial state, because
we are going to update this state.
We also have this state inside the use reducer also.
So now let's look at the flow here.
We have what is called dispatcher and then the reducer.
So to be able to update our initial state, this is the flow.
First of all, we are going to dispatch an action given to us by use reducer and then inside the reducer
is going to check the action type that is coming in here.
So if the action type is equal to what is inside the reducer, then the reducer is going to make changes
to the initial state.
Then the AB data state will reflect and then have access inside the use reducer.
So let's see how we are going to implement the reducer inside this function.
For the meantime, let's just return an empty object.
We will come back to it as we move on.
Great.
So now let's remove this one and let's call our reducer here.
So right now we have a complete context API be set up.
The next step is that we are going to feed a component that is going to have access to this provider.
In that way, we are going to pass in a probe called value and this value is going to hold any data
or functions that needs to be accessed inside our component.
So for our case, let's just send some dummy data and call this one as a log in.
And by default, let's say it's false.
So now we have a complete set up of context API.
The next step is that we want any component to have access to our states and then our function that
we are going to create.
In that way, we need to wrap this provider at the root of our application.
The next step is let's go to index and here we go.
We are going to wrap the provider inside the app because the app that renders the rest of the component
that is the home page look in register our transaction.
Of context provider where I forgot to export it here.
So inside here we need to export this components as export default and then going to be as context provider.
So inside the index and here we go.
So let's remove the react street mode and then let's replace with this one.
Now any component have access to our methods and then state insert component here.
So this how we set up context API.
So in the next video, I will show you how we are going to consume context meaning state for our context
API.