1
00:00:00,300 --> 00:00:00,850
Wonderful.

2
00:00:00,870 --> 00:00:04,890
And once we're done setting up our IS member toggle functionality.

3
00:00:05,280 --> 00:00:10,020
Now let's work on a global state where we'll store things like loading.

4
00:00:10,380 --> 00:00:16,440
Our user is going to be there are jobs and all of that cool stuff and the steps are going to be following

5
00:00:16,440 --> 00:00:16,920
first.

6
00:00:17,400 --> 00:00:21,390
You want to create a contact directory in the source.

7
00:00:22,390 --> 00:00:28,330
And there will set up actions Jess reduced her dress as well as apt context.

8
00:00:28,720 --> 00:00:37,420
Now you can probably warning us that we all years used producer basically to set up all our functionality.

9
00:00:37,570 --> 00:00:39,960
That's why we have actions and reducer.

10
00:00:40,420 --> 00:00:45,970
Now I'll talk about why I picked that in the next video for time being just great.

11
00:00:45,970 --> 00:00:52,810
Those files and then in the app context, that's where we'll set up our state now.

12
00:00:53,470 --> 00:00:57,490
Initially, she was going to be this initial step with this four of ours.

13
00:00:57,790 --> 00:01:03,880
But make sure that you export that and you'll see why we want to do that later in the reducer ventrell.

14
00:01:03,880 --> 00:01:07,780
Create our context using react that create context.

15
00:01:08,320 --> 00:01:10,570
I mean, I'm going to name my one app context.

16
00:01:10,750 --> 00:01:14,440
Then you want to create a provider, so that's going to be my component.

17
00:01:14,770 --> 00:01:19,900
And then first, I'm going to be looking for the children because I want to render my application.

18
00:01:20,260 --> 00:01:22,540
So this is what we're going to do in the next dress.

19
00:01:23,860 --> 00:01:28,270
Effectively, we'll wrap all our application with this provider for time being.

20
00:01:28,300 --> 00:01:34,030
I'm just going to use the use state here, but like I just mentioned, eventually we will use years

21
00:01:34,030 --> 00:01:38,680
reducer van as far as the return from the provider.

22
00:01:38,980 --> 00:01:45,700
I want to go with app context and remember it turns to things and returns the provider and the consumer

23
00:01:45,700 --> 00:01:47,500
components, and we're looking for the provider.

24
00:01:47,770 --> 00:01:52,180
And then in here, the prop that you're looking for is the value.

25
00:01:52,510 --> 00:01:53,770
So that's where we pass it in.

26
00:01:54,070 --> 00:01:56,560
And I'm just going to spread out the state values.

27
00:01:56,940 --> 00:01:58,480
So whatever I have or here.

28
00:01:58,480 --> 00:02:05,650
And then as we add here, more functions, we'll add them one by one to this value prop.

29
00:02:05,690 --> 00:02:08,110
And notice here, I'm setting up as an object.

30
00:02:08,530 --> 00:02:12,550
So all of these state properties will be stored at one by one.

31
00:02:12,790 --> 00:02:17,440
And then we'll also do the same thing with a function that react.

32
00:02:17,560 --> 00:02:24,550
And after that, we also want to render the children and I'll also right away set up the hook that I

33
00:02:24,550 --> 00:02:26,580
can access in each and every component.

34
00:02:26,590 --> 00:02:32,650
And by doing so, I don't have to use that used context in every component and then pass in the app

35
00:02:32,650 --> 00:02:33,130
context.

36
00:02:33,460 --> 00:02:35,110
Again, this is just about the access.

37
00:02:35,110 --> 00:02:38,710
And then eventually I want to explore the app provider.

38
00:02:39,070 --> 00:02:44,740
And then, like I said in the next address, we'll get the app provider from the app context as the

39
00:02:44,740 --> 00:02:45,850
name import.

40
00:02:46,180 --> 00:02:50,500
We'll wrap our application in and then back in the register.

41
00:02:50,710 --> 00:02:51,850
I want to get the hook.

42
00:02:52,330 --> 00:02:55,450
So now I'm not talking about the provider.

43
00:02:55,600 --> 00:03:02,280
I'm talking about this hook, which will give me the access to my contacts and learn from it.

44
00:03:02,290 --> 00:03:09,970
I want to get is loading and show alert, and then I want to switch from the local show alert to a global

45
00:03:09,970 --> 00:03:10,210
one.

46
00:03:10,270 --> 00:03:13,180
Remember, currently in the initial state, we have Charlotte.

47
00:03:13,480 --> 00:03:16,480
So now I want to switch to the global one.