Wonderful.
And once we're done setting up our IS member toggle functionality.
Now let's work on a global state where we'll store things like loading.
Our user is going to be there are jobs and all of that cool stuff and the steps are going to be following
first.
You want to create a contact directory in the source.
And there will set up actions Jess reduced her dress as well as apt context.
Now you can probably warning us that we all years used producer basically to set up all our functionality.
That's why we have actions and reducer.
Now I'll talk about why I picked that in the next video for time being just great.
Those files and then in the app context, that's where we'll set up our state now.
Initially, she was going to be this initial step with this four of ours.
But make sure that you export that and you'll see why we want to do that later in the reducer ventrell.
Create our context using react that create context.
I mean, I'm going to name my one app context.
Then you want to create a provider, so that's going to be my component.
And then first, I'm going to be looking for the children because I want to render my application.
So this is what we're going to do in the next dress.
Effectively, we'll wrap all our application with this provider for time being.
I'm just going to use the use state here, but like I just mentioned, eventually we will use years
reducer van as far as the return from the provider.
I want to go with app context and remember it turns to things and returns the provider and the consumer
components, and we're looking for the provider.
And then in here, the prop that you're looking for is the value.
So that's where we pass it in.
And I'm just going to spread out the state values.
So whatever I have or here.
And then as we add here, more functions, we'll add them one by one to this value prop.
And notice here, I'm setting up as an object.
So all of these state properties will be stored at one by one.
And then we'll also do the same thing with a function that react.
And after that, we also want to render the children and I'll also right away set up the hook that I
can access in each and every component.
And by doing so, I don't have to use that used context in every component and then pass in the app
context.
Again, this is just about the access.
And then eventually I want to explore the app provider.
And then, like I said in the next address, we'll get the app provider from the app context as the
name import.
We'll wrap our application in and then back in the register.
I want to get the hook.
So now I'm not talking about the provider.
I'm talking about this hook, which will give me the access to my contacts and learn from it.
I want to get is loading and show alert, and then I want to switch from the local show alert to a global
one.
Remember, currently in the initial state, we have Charlotte.
So now I want to switch to the global one.