All right.
And once we're clear on our desks, let's start working on them and first where we want to do, and
the source is to create that context folder.
So let's start over here.
It's a new folder before the context and they're all set up.
Those three files will go with actions.
Yes.
Then we'll also set up the reducer.
I also want to set up my context and context.
And I believe in the previous video, I didn't share the important, but in your reading me, you'll
definitely have it where in the app context, we first want to start by your state user reducer, as
well as your context in order to access the context.
So let's start within the context where we want to set up our imports or use that system is going to
be temporary user additions, which we'll use all throughout the application.
And then lastly, we also want to set up the years context since we want to set up our own.
So let's say three years context now, all of that is coming from reactor.
And then once I have that in place, then we can set up the import.
Now if you don't want to go with export right here, I also noticed by the end of the video that essentially
I'm exporting here.
The provider in the object anyway.
So if you want one by one, you can add use context as well as the initial state.
Just don't forget the exporter.
Perhaps the most important part here in the context, I think I'm going to skip Ben, and I'm just going
to add it at the very, very end.
So Konst initial state now and here are the values we're looking for, is loading.
Van also equal to false.
Also, I want to show the alert show alert to false alert text equal to an empty string, so-called
text, equal to an empty strength and an alert type.
Also the same thing alert type matters an empty string as well.
Then let's create that context.
So in my case, I'm going to call this app context and also hit equal to react and dart and then create
context.
So it created the context.
We have two components the provider as well as the consumer.
We're not going to use the consumer, but we do want to set up a new component app provider.
First of all, be looking for children like I mentioned because we will render our entire application.
That's why it's important.
And as far as the logic, let's just start here with each state then set.
State and that is equal to a huge state unless passing the initial state, so that's hard to demonstrate
because once we start using user reducer, remember we have dispatch, we have the reducer and all that
stuff.
But what we want to focus on is the return.
And here we'll go with app context.
And not that provider.
So that's the component.
And in there, there's a value prop where we can set up whatever values we want and those ones will
be passed down to our components.
OK, I'll set it equal to an object and I'll spread out my state values, which essentially this object
over me.
So let's go.
Here's another that says that.
And then once we set up some functions here, which we will of course value, add them to this value
object.
So close it out.
And and here I want to render my children again and ask them this 20000 times.
But that is our application.
The reason why I'm repeating that because regardless of how many times I repeat that, I still get those
questions.
So why were the children?
Well, because that is our application, and that's what we're rendering.
And then, like I said, we're going to go here with export and first I want to export our provider.
Then I also want to export initial state and then we want to set up the hook.
Now why do I want to hook?
Well, because if you're not going to have it hooked, then in every component you will have to do two
things.
You have to import used context from the reactor, and you're also going to get out of context which
of this sucker over here, the context.
And only then you'll have access to whatever you have in Nevada from now.
In our case, we want to bring this up.
We want to create a custom help.
And that's the reason for this use.
You won't be able to use contact inside of it unless it starts with it.
So we're going to use app context.
That's the hook.
And then we right away return.
Use context and pass in the app context.
So the result is going to be following where I'll get my hook inside of the register or any other component,
and then I'll have access to whatever is in the value that if you took my react course.
You already know the drill.
But if you're new to this, I'm just explaining kind of the details.
So let's set up that hook.
And what we're looking for is Konst then used context.
So that's the name that I'm going to go with.
That is going to be a function and it's simply going to return the use contexto, which is coming from
the reactor and we'll pass in our app context.
And as a result will be able to access our state.
So let's say your app context.
And then let's go down a little bit and then let's explore this sucker as well.
So huge and complex.
And once we have all of this in place now, what do we want to do is go to our main index.
So it's not in the components, not in the pages.
We're talking about the main index over here.
And then let's import our provider first.
So we're going here.
Import.
Now remember, we need to go with app provider in this case because we have few things that we're exporting
online and here we're looking at in the context.
And then more specifically, context of mind, we want to wrap our application.
So go with our provider.
I'm going to close this one.
I'll open up another one and then let's play the app.
And the error says that there is no react in the app context.
So we take a look here.
I'm going to go back over here and then I'll add the react one.
So we're importing react.
Then we have the host and then we set up the account.
So now let me set this one up in the read me.
So that way, when you're looking at the read, everything's correct.
So I got this one and where I have the imports, I'll also add the react and wants to read me fixed.
Now I want to go to our page, the register one, and now we want to get the hook.
We want to get the USU app Contexto.
This is the case where we can use the nice auto import.
Essentially, I'm going to say use app context.
It's going to right away important for me.
I will invoke it and then I want to set it equal to a state just to showcase that we'll have access
to it.
So let's say you're state separate.
So once we navigate to the bigger screen and I refresh and take a look at the console, I should see
the object.
And what is that object?
Well, the app is my state.
Correct.
So what we can do right now is we can pull out the specific values.
And in this case, we are looking for two things.
I can double check quickly with a read me where essentially I'm looking for is loading and then show
alert.
So let's go to our register where it is.
So we're here and then let's pull out those values is loading and then show alert.
And then, like I said, we want to remove this one of the local one and actually switch it to a global
one.
So now I simply want to remove it from an initial state run.
Let's keep on scrolling and then where I have the alert instead of values since that property is not
there anymore, I'm just using the global one.
So once I remove this one and again and navigate to the big screen and all that, if I go to components
and if I'm just going to mess with this value, but we show that one shall notice.
Here's our alert, which is exactly what we're looking for.
The difference, however, now, of course, is the fact that we're controlling that from our global
context.