OK, so now we'll create our context and global context, so.
Most of all will create a folder in the SHC for those who will create a sub folder, which will be named
as context or context.
And inside the context will create a file that will be blue, but.
Dead or.
Global strategy.
So inside this wheel's right in the context like the global provided, I don't know.
So here, first of all, I'll import react and some foreign things, so I'll import react.
And apart from react, I'll import what most of all are import create context.
Here next month, next, we'll import the use reducers, so we'll be using this also, or you will use
your holiday with this user from.
And William Faulkner Sangria.
All right.
So next, first of all, will create our initial state.
So.
In NI, she'll stay.
OK, next, we'll provide a constant and it will name as initial.
Sounds fair enough.
But this will be an.
I'm check so inside this will provide some data, so let me grab some dummy data here, so let me out
from your.
So this will be the dummy data.
But in future, we'll be using dynamic data that will be like.
That will be real.
And that will be changing.
So this is just our dynamic data, so we just make it an a.
That doesn't give me any.
Warnings and insurance did.
This is how it will look like.
OK, so next, we'll create a context, so.
We'll provide a comment here, so that will be created.
The capital.
What happened to my typing?
Context, but inside this will create.
A constant anvil exported as well in the same line, so we'll export and will create a constant constant
will be global.
For context.
All right.
But this will be the first.
Create context and inside this that would be a function, so we'll be passing this initial state, this
dummy data in the fields state cool.
So next, what we'll do is we'll create a provider component like which will provide the data.
So for that, we'll collect me just kinda like the heading provider.
Component.
So how do we export another concern that will be the global provider who will right support?
Concert.
Global.
Not context, but global provider.
So here what we'll do is we'll provide this will expect to function basically or inside, this will
provide the children.
And this is we're passing inside this function.
And there's a far better function still inside this, we provide another constant and this will be for
healing the state and all so.
That can be spared.
And this would be dispatch anyone if you are friendly with relaxed or you will be you might be understanding
what I'm doing right now.
And if you don't know, don't worry, I'll explain everything.
So here's the news.
It was reducer.
And inside this will pass on initial state for now as of now, will pass this pass by in the coming
time will pass like more things.
Okay, so now this is over, so now we'll return some of the things.
So what will return inside this is that.
It, Don.
And it will expect a parenthesis inside this will return to the global context and provide I don't know
everything else, so that can be global.
And next start.
Provider, as we can see, if it's giving the traditions will provide a value for this value will be.
It would benches and then we'll be having like right now, we don't have any like data or anything to
pass inside this, so we can just leave it blank for as of now.
So we'll get the value from getting some value, but the value for now in just close it and it will
give us a closing tag inside.
This will provide the shooter.
Sounds fair enough.
So this is what are.
By global context is looking like as of now, but we will make life more changes now.
This is not a complete, it's just a beginning.
So what we did is that first of all, we imported create context and the use it or do so from now.
What is the use of importing this that?
But this is the initial state.
So this is the idea that their tax tax excuse the label and the amount and.
Let me just.
In just two limit.
If you guys were wondering how I did that, you can just press control.
I am not control shipped out and then you can just press it wherever you want, so it can feel like
you can rename multiple items at once.
OK, so next we created a context for this is the context using the discrete context.
So we created a context with this and we passed this data.
All right.
So this data's parsing that will be globally accessible and we exported it.
Next, we created a provider through which will provide the data.
So this is the provider and this also will be exported.
So this will be a global provider.
This is the name.
And this is actually a function.
This expects a function to inside.
This will be used by the children as an argument and returning value is just straight and dispatch,
and it will expect to use it or do so will now create to do it.
Also in the next coming few seconds will be creating a new set also.
But this is what about the use of the global state.
So things might not be so clear right now, but as we start, as we go on building this application,
things will like you will.
The dots will be connecting eventually.
OK, so next we'll be creating a producer inside the use context and inside the context folder will
be creating producer Doc, Yes, producer or Dargis.
So here what we will do is, first of all, will.
Export like street and action, so we'll.
Export and air.
Speed and like default and default, default, export default, it's a default export.
So inside this will be, I think this and staged an action.
So basically, this is a function of the default function, and inside this, there will be a switch
statement or no, I tell you like in the few seconds, watch what this switch will do.
Inside this action type.
And.
Or that deep inside this will be.
Now, as of now, we are just returning our default or A..
And Libya says we are disregarding a need for.
And that would be a state.
We just see.
And.
Next, we'll go to our Abdon Jazz.
So now we'll go to our apologies and here will call our global provider and then we'll wrap up what
are the components inside the global provider so.
From.
Text.
And.
Global State.
Yes.
And now we'll wrap components inside the global provider for it will look something like this.
No, but go, why not?
Uh, yeah, it gave me a clothing bag, but it's lagging.
Maybe I'm recording, that's why.
So now I'm thinking this at the end, and now I see.
So now let me see if my throat is still running or not.
And let me go back to my browser and see if there is any change.
As of now, there is no change.
Things are going pretty well.
So, OK, so what is this not running me?
So and start.
And it will spin up the server.
Let me close this hard border and balance.
Income expert and producer, I don't need it anymore.
And the styling and all will do it like I'm already styling the component and I've already got the cso's
for it and that's what I'm using right now.
So don't worry about the CCIs will not be writing scissors from scratch here, and we'll review everything
in the CSS.
So as you can see, there is no change with anything as of now.
If I just scored the console and if I just go to the.
Developer tools for bomb here.
If I go to components.
You can see the court of law, but like global provider.
And you can see that is inside the global provider, that is that there are children's, the children's
are harder out of balance and expense and all that and reduce is also there, which is undefined right
now.
We all know that and that's all the harder.
This is the balance of income expense and this is the list.
So that is what I would also recommend you to install this extension in your browser, which is the
React DevTools or React developer tools.
Generally, it is available for Chrome and Firefox.
Right now I'm using Firefox, so if you're using Chrome Firefox, you can just install this extension,
which is Chrome three React DevTools, which is really, really awesome if you are a React developer
or if you are learning, react, so it explains you in a very good way.
OK, so we've got everything now.
So next, we'll be moving to our history transaction history component and we'll add some things to
it.
So.
They're search for this now.
Next, we'll be adding the history or the transaction history component, and we are like adding a little
functionality to it.