1 00:00:00,210 --> 00:00:00,600 All right. 2 00:00:01,020 --> 00:00:07,200 And once we're clear on our desks, let's start working on them and first where we want to do, and 3 00:00:07,200 --> 00:00:11,460 the source is to create that context folder. 4 00:00:12,060 --> 00:00:13,170 So let's start over here. 5 00:00:13,230 --> 00:00:17,580 It's a new folder before the context and they're all set up. 6 00:00:17,580 --> 00:00:20,190 Those three files will go with actions. 7 00:00:20,590 --> 00:00:21,020 Yes. 8 00:00:21,840 --> 00:00:24,180 Then we'll also set up the reducer. 9 00:00:26,660 --> 00:00:30,730 I also want to set up my context and context. 10 00:00:31,470 --> 00:00:37,670 And I believe in the previous video, I didn't share the important, but in your reading me, you'll 11 00:00:37,670 --> 00:00:44,780 definitely have it where in the app context, we first want to start by your state user reducer, as 12 00:00:44,780 --> 00:00:49,070 well as your context in order to access the context. 13 00:00:49,460 --> 00:00:55,120 So let's start within the context where we want to set up our imports or use that system is going to 14 00:00:55,120 --> 00:01:00,080 be temporary user additions, which we'll use all throughout the application. 15 00:01:00,380 --> 00:01:07,250 And then lastly, we also want to set up the years context since we want to set up our own. 16 00:01:07,490 --> 00:01:11,300 So let's say three years context now, all of that is coming from reactor. 17 00:01:12,320 --> 00:01:16,280 And then once I have that in place, then we can set up the import. 18 00:01:16,670 --> 00:01:25,580 Now if you don't want to go with export right here, I also noticed by the end of the video that essentially 19 00:01:25,580 --> 00:01:26,690 I'm exporting here. 20 00:01:27,140 --> 00:01:29,060 The provider in the object anyway. 21 00:01:29,420 --> 00:01:36,170 So if you want one by one, you can add use context as well as the initial state. 22 00:01:36,590 --> 00:01:38,210 Just don't forget the exporter. 23 00:01:38,690 --> 00:01:44,390 Perhaps the most important part here in the context, I think I'm going to skip Ben, and I'm just going 24 00:01:44,390 --> 00:01:46,050 to add it at the very, very end. 25 00:01:46,070 --> 00:01:51,380 So Konst initial state now and here are the values we're looking for, is loading. 26 00:01:52,820 --> 00:01:54,890 Van also equal to false. 27 00:01:55,460 --> 00:02:04,610 Also, I want to show the alert show alert to false alert text equal to an empty string, so-called 28 00:02:05,000 --> 00:02:08,389 text, equal to an empty strength and an alert type. 29 00:02:08,389 --> 00:02:13,340 Also the same thing alert type matters an empty string as well. 30 00:02:13,940 --> 00:02:15,800 Then let's create that context. 31 00:02:16,220 --> 00:02:23,150 So in my case, I'm going to call this app context and also hit equal to react and dart and then create 32 00:02:23,150 --> 00:02:23,540 context. 33 00:02:23,570 --> 00:02:24,890 So it created the context. 34 00:02:24,890 --> 00:02:28,520 We have two components the provider as well as the consumer. 35 00:02:28,550 --> 00:02:34,730 We're not going to use the consumer, but we do want to set up a new component app provider. 36 00:02:36,200 --> 00:02:40,850 First of all, be looking for children like I mentioned because we will render our entire application. 37 00:02:41,150 --> 00:02:42,110 That's why it's important. 38 00:02:42,560 --> 00:02:47,150 And as far as the logic, let's just start here with each state then set. 39 00:02:48,020 --> 00:02:55,310 State and that is equal to a huge state unless passing the initial state, so that's hard to demonstrate 40 00:02:55,790 --> 00:03:02,690 because once we start using user reducer, remember we have dispatch, we have the reducer and all that 41 00:03:02,870 --> 00:03:03,170 stuff. 42 00:03:03,590 --> 00:03:05,690 But what we want to focus on is the return. 43 00:03:06,140 --> 00:03:08,750 And here we'll go with app context. 44 00:03:09,470 --> 00:03:11,180 And not that provider. 45 00:03:11,480 --> 00:03:12,620 So that's the component. 46 00:03:12,620 --> 00:03:19,100 And in there, there's a value prop where we can set up whatever values we want and those ones will 47 00:03:19,100 --> 00:03:21,460 be passed down to our components. 48 00:03:21,760 --> 00:03:28,940 OK, I'll set it equal to an object and I'll spread out my state values, which essentially this object 49 00:03:28,940 --> 00:03:29,210 over me. 50 00:03:29,870 --> 00:03:30,410 So let's go. 51 00:03:30,410 --> 00:03:32,920 Here's another that says that. 52 00:03:33,320 --> 00:03:40,340 And then once we set up some functions here, which we will of course value, add them to this value 53 00:03:40,340 --> 00:03:40,730 object. 54 00:03:41,060 --> 00:03:41,960 So close it out. 55 00:03:42,120 --> 00:03:46,760 And and here I want to render my children again and ask them this 20000 times. 56 00:03:46,760 --> 00:03:48,130 But that is our application. 57 00:03:48,150 --> 00:03:52,640 The reason why I'm repeating that because regardless of how many times I repeat that, I still get those 58 00:03:52,640 --> 00:03:53,120 questions. 59 00:03:53,250 --> 00:03:54,710 So why were the children? 60 00:03:54,710 --> 00:03:57,890 Well, because that is our application, and that's what we're rendering. 61 00:03:58,770 --> 00:04:05,100 And then, like I said, we're going to go here with export and first I want to export our provider. 62 00:04:05,460 --> 00:04:10,440 Then I also want to export initial state and then we want to set up the hook. 63 00:04:10,770 --> 00:04:11,890 Now why do I want to hook? 64 00:04:11,910 --> 00:04:17,279 Well, because if you're not going to have it hooked, then in every component you will have to do two 65 00:04:17,279 --> 00:04:17,640 things. 66 00:04:17,910 --> 00:04:24,270 You have to import used context from the reactor, and you're also going to get out of context which 67 00:04:24,510 --> 00:04:26,670 of this sucker over here, the context. 68 00:04:26,970 --> 00:04:33,180 And only then you'll have access to whatever you have in Nevada from now. 69 00:04:33,180 --> 00:04:34,560 In our case, we want to bring this up. 70 00:04:34,950 --> 00:04:37,080 We want to create a custom help. 71 00:04:37,680 --> 00:04:39,660 And that's the reason for this use. 72 00:04:40,050 --> 00:04:44,850 You won't be able to use contact inside of it unless it starts with it. 73 00:04:45,540 --> 00:04:47,270 So we're going to use app context. 74 00:04:47,280 --> 00:04:47,880 That's the hook. 75 00:04:48,210 --> 00:04:49,890 And then we right away return. 76 00:04:49,920 --> 00:04:52,350 Use context and pass in the app context. 77 00:04:53,070 --> 00:05:00,870 So the result is going to be following where I'll get my hook inside of the register or any other component, 78 00:05:01,290 --> 00:05:08,130 and then I'll have access to whatever is in the value that if you took my react course. 79 00:05:09,100 --> 00:05:10,270 You already know the drill. 80 00:05:10,660 --> 00:05:14,230 But if you're new to this, I'm just explaining kind of the details. 81 00:05:14,650 --> 00:05:15,760 So let's set up that hook. 82 00:05:16,150 --> 00:05:20,910 And what we're looking for is Konst then used context. 83 00:05:20,920 --> 00:05:22,600 So that's the name that I'm going to go with. 84 00:05:23,080 --> 00:05:29,350 That is going to be a function and it's simply going to return the use contexto, which is coming from 85 00:05:29,350 --> 00:05:32,530 the reactor and we'll pass in our app context. 86 00:05:32,740 --> 00:05:36,040 And as a result will be able to access our state. 87 00:05:36,160 --> 00:05:37,930 So let's say your app context. 88 00:05:38,860 --> 00:05:43,300 And then let's go down a little bit and then let's explore this sucker as well. 89 00:05:43,420 --> 00:05:47,010 So huge and complex. 90 00:05:47,440 --> 00:05:52,900 And once we have all of this in place now, what do we want to do is go to our main index. 91 00:05:53,260 --> 00:05:56,170 So it's not in the components, not in the pages. 92 00:05:56,380 --> 00:05:58,270 We're talking about the main index over here. 93 00:05:58,690 --> 00:06:02,890 And then let's import our provider first. 94 00:06:03,310 --> 00:06:04,150 So we're going here. 95 00:06:04,300 --> 00:06:04,840 Import. 96 00:06:04,960 --> 00:06:11,260 Now remember, we need to go with app provider in this case because we have few things that we're exporting 97 00:06:11,710 --> 00:06:14,020 online and here we're looking at in the context. 98 00:06:14,350 --> 00:06:18,550 And then more specifically, context of mind, we want to wrap our application. 99 00:06:18,880 --> 00:06:21,310 So go with our provider. 100 00:06:21,730 --> 00:06:22,840 I'm going to close this one. 101 00:06:22,840 --> 00:06:26,710 I'll open up another one and then let's play the app. 102 00:06:27,550 --> 00:06:30,910 And the error says that there is no react in the app context. 103 00:06:30,910 --> 00:06:32,900 So we take a look here. 104 00:06:33,130 --> 00:06:36,840 I'm going to go back over here and then I'll add the react one. 105 00:06:36,880 --> 00:06:38,470 So we're importing react. 106 00:06:38,680 --> 00:06:41,290 Then we have the host and then we set up the account. 107 00:06:41,770 --> 00:06:44,500 So now let me set this one up in the read me. 108 00:06:44,860 --> 00:06:48,190 So that way, when you're looking at the read, everything's correct. 109 00:06:48,200 --> 00:06:55,040 So I got this one and where I have the imports, I'll also add the react and wants to read me fixed. 110 00:06:55,070 --> 00:07:01,930 Now I want to go to our page, the register one, and now we want to get the hook. 111 00:07:02,260 --> 00:07:05,280 We want to get the USU app Contexto. 112 00:07:05,710 --> 00:07:09,000 This is the case where we can use the nice auto import. 113 00:07:09,540 --> 00:07:11,770 Essentially, I'm going to say use app context. 114 00:07:12,070 --> 00:07:14,200 It's going to right away important for me. 115 00:07:14,380 --> 00:07:20,260 I will invoke it and then I want to set it equal to a state just to showcase that we'll have access 116 00:07:20,260 --> 00:07:20,530 to it. 117 00:07:20,920 --> 00:07:23,400 So let's say you're state separate. 118 00:07:23,770 --> 00:07:29,710 So once we navigate to the bigger screen and I refresh and take a look at the console, I should see 119 00:07:29,710 --> 00:07:30,190 the object. 120 00:07:30,340 --> 00:07:31,180 And what is that object? 121 00:07:31,480 --> 00:07:33,160 Well, the app is my state. 122 00:07:33,700 --> 00:07:33,990 Correct. 123 00:07:34,420 --> 00:07:37,750 So what we can do right now is we can pull out the specific values. 124 00:07:38,230 --> 00:07:40,480 And in this case, we are looking for two things. 125 00:07:40,850 --> 00:07:47,920 I can double check quickly with a read me where essentially I'm looking for is loading and then show 126 00:07:47,920 --> 00:07:48,310 alert. 127 00:07:48,790 --> 00:07:52,730 So let's go to our register where it is. 128 00:07:52,870 --> 00:07:59,710 So we're here and then let's pull out those values is loading and then show alert. 129 00:08:00,100 --> 00:08:06,280 And then, like I said, we want to remove this one of the local one and actually switch it to a global 130 00:08:06,280 --> 00:08:06,460 one. 131 00:08:07,000 --> 00:08:10,410 So now I simply want to remove it from an initial state run. 132 00:08:10,420 --> 00:08:16,030 Let's keep on scrolling and then where I have the alert instead of values since that property is not 133 00:08:16,030 --> 00:08:18,400 there anymore, I'm just using the global one. 134 00:08:18,820 --> 00:08:25,540 So once I remove this one and again and navigate to the big screen and all that, if I go to components 135 00:08:25,810 --> 00:08:31,120 and if I'm just going to mess with this value, but we show that one shall notice. 136 00:08:31,540 --> 00:08:34,659 Here's our alert, which is exactly what we're looking for. 137 00:08:34,960 --> 00:08:40,900 The difference, however, now, of course, is the fact that we're controlling that from our global 138 00:08:40,900 --> 00:08:41,380 context.