1 00:00:00,360 --> 00:00:05,610 And once her release her is ready to go, what's in this batch, our first action is going to be display 2 00:00:05,610 --> 00:00:10,890 alert and we'll see that in our register if we try to submit the form. 3 00:00:11,130 --> 00:00:19,080 And one of the values is empty and we'll start with actions where we'll set up the variable and set 4 00:00:19,080 --> 00:00:21,330 it equal to show alert. 5 00:00:21,720 --> 00:00:26,280 And if you're familiar with user, do you sure you know that the reason why we use these variables is 6 00:00:26,280 --> 00:00:31,530 because that way we have less chance of making some kind of small typo. 7 00:00:31,740 --> 00:00:37,050 So this will be text, but this will be variable and all throughout the application, we'll use the 8 00:00:37,050 --> 00:00:37,470 variable. 9 00:00:37,830 --> 00:00:44,770 Now, once we have set up our first action in the actions when we want to set up the import, introduce 10 00:00:44,820 --> 00:00:50,430 or not context and these ones I want to display because they're very straightforward on premature will 11 00:00:50,430 --> 00:00:53,370 be repeating all the time, run in the app context. 12 00:00:53,520 --> 00:01:00,970 We want to set up our first function display alert and here we'll dispatch it this patch type display 13 00:01:00,970 --> 00:01:04,500 or a man in the reducer that's handled that. 14 00:01:04,830 --> 00:01:10,590 Let's say if the action type is equal to display alert, then here's where we want to do. 15 00:01:11,190 --> 00:01:12,810 I want to return to current state. 16 00:01:13,140 --> 00:01:19,750 So remember, we always want to return the existing values, but we want to change the value for Charlotte. 17 00:01:20,220 --> 00:01:21,960 We'll actually set it equal to true. 18 00:01:22,320 --> 00:01:24,120 The Alert tab will be danger. 19 00:01:24,390 --> 00:01:29,310 And then as far as the alert text will go with, please provide all values. 20 00:01:29,880 --> 00:01:37,890 And then before we do anything in the register, what I want to do is go to a alert component and remember, 21 00:01:38,100 --> 00:01:44,340 I said that in the beginning, we will be hard coding that will alert and that alert success or danger 22 00:01:44,340 --> 00:01:44,910 or whatever. 23 00:01:45,300 --> 00:01:51,030 Now, in this case, since we have those values already in the state, in our global context, here's 24 00:01:51,030 --> 00:01:51,600 what we can do. 25 00:01:51,930 --> 00:01:55,320 We can import our hook, so use app context. 26 00:01:55,710 --> 00:01:57,000 We can look for both things. 27 00:01:57,300 --> 00:01:59,490 The alert type and alert text. 28 00:01:59,910 --> 00:02:06,030 And that we can make this dynamic where it's going to be alert, alert type, whatever it is, whether 29 00:02:06,030 --> 00:02:07,530 that's danger or success. 30 00:02:07,830 --> 00:02:14,260 So it's going to be controlled over here and whatever text we pass in, which again is going to be controlled. 31 00:02:14,280 --> 00:02:21,960 Once we set up that action first, let me go to actions and I want to set up that variable. 32 00:02:22,290 --> 00:02:24,510 So I'm going to go here with Explorer right away. 33 00:02:25,020 --> 00:02:25,950 Export comms. 34 00:02:26,880 --> 00:02:30,010 I'm going to call this display on the score and alert. 35 00:02:30,520 --> 00:02:36,960 And as far as the value, it's going to be show alert and I'm going to the convention is using all uppercase, 36 00:02:37,200 --> 00:02:38,470 but technically you don't have. 37 00:02:39,090 --> 00:02:46,770 So once I have voice in place, then I want to set up my import in the app context as well as the eReader, 38 00:02:46,770 --> 00:02:51,930 sir, and I'll first start in reducer and then all your app contact. 39 00:02:52,410 --> 00:02:53,940 So let's go here with import. 40 00:02:54,270 --> 00:02:58,440 Now we're looking for display alert, and that is coming from the actions, correct? 41 00:02:58,740 --> 00:03:00,010 And let's right away. 42 00:03:00,060 --> 00:03:01,920 Set it up in the app context as well. 43 00:03:02,430 --> 00:03:06,570 So in this case, I'm going to do it below the reducer. 44 00:03:06,700 --> 00:03:08,040 Again, it doesn't really matter. 45 00:03:08,480 --> 00:03:13,500 And as far as the reducer, well, just handle that action right away, correct? 46 00:03:13,860 --> 00:03:15,120 Let's say that if. 47 00:03:15,950 --> 00:03:17,000 The action type. 48 00:03:17,850 --> 00:03:20,050 He is going to be display alert. 49 00:03:20,230 --> 00:03:24,670 So if the type is equal to display alert, what do we want to do? 50 00:03:25,030 --> 00:03:32,920 Well, we want to first return to state as it is, we return the current values, but then modify the 51 00:03:32,920 --> 00:03:36,820 show alert one and then let's set down one equal to true. 52 00:03:37,210 --> 00:03:41,650 Then let's also change the alert online type. 53 00:03:42,400 --> 00:03:48,010 Now that one will be equal to our danger in this case, because we'll be displaying that not all the 54 00:03:48,010 --> 00:03:50,080 values have been provided. 55 00:03:50,470 --> 00:03:52,240 And then we want to go with alert text. 56 00:03:52,420 --> 00:03:54,910 I might just say, please provide. 57 00:03:55,330 --> 00:03:56,490 All right. 58 00:03:56,970 --> 00:03:58,570 And that's an exclamation point. 59 00:03:58,990 --> 00:04:00,370 So let's save this one. 60 00:04:00,710 --> 00:04:01,960 That's going to be our dear sir. 61 00:04:02,290 --> 00:04:05,830 And now in the app context, we want to set up the function. 62 00:04:06,220 --> 00:04:06,580 Correct. 63 00:04:07,000 --> 00:04:11,230 So let's scroll down where we have the state and above our return. 64 00:04:11,800 --> 00:04:17,950 We want to go with Konst and let's just set it up as a function display alert and that inside of the 65 00:04:17,950 --> 00:04:26,950 function body, we want to go with dispatch and in here we'll dispatch an object with a type of display 66 00:04:26,950 --> 00:04:27,310 alert. 67 00:04:27,760 --> 00:04:32,140 So when we're working with use reducer, we're passing in the object. 68 00:04:32,680 --> 00:04:36,850 And one thing we must pass in is the type property. 69 00:04:37,090 --> 00:04:42,430 And then optionally, we can provide other properties in our case will stick with payload. 70 00:04:42,790 --> 00:04:49,000 So if we'll be providing some kind of value to the reducer, the one that we can use it later in the 71 00:04:49,000 --> 00:04:52,420 actual function, then we'll go with balance, but not for now. 72 00:04:52,720 --> 00:04:59,980 For now, we just passed in the object in this patch and type must be present, which of course, in 73 00:04:59,980 --> 00:05:00,640 this case it is. 74 00:05:00,970 --> 00:05:05,770 And then as far as our action, well, we're going with display alert. 75 00:05:06,100 --> 00:05:11,170 Now I also wanted to write a way, add display alert here in the value, and I don't think I'm going 76 00:05:11,170 --> 00:05:12,970 to be adding this to you, going to read me. 77 00:05:13,750 --> 00:05:18,130 For me, that is kind of self-explanatory that each and every time we set up the function, we want 78 00:05:18,130 --> 00:05:18,850 to pass it down. 79 00:05:18,860 --> 00:05:20,930 So I'm just going to go with the spoiler alert. 80 00:05:20,980 --> 00:05:26,170 Now, if there are some functions that I don't want to pass, then then I'll explicitly set up. 81 00:05:26,320 --> 00:05:28,210 So let's pass here the display alert. 82 00:05:28,540 --> 00:05:30,190 Now we're not going to use this video. 83 00:05:30,550 --> 00:05:32,070 Most likely, it's going to be the next one. 84 00:05:32,080 --> 00:05:37,480 But the last thing that I want to do in this video is navigate to my components. 85 00:05:37,750 --> 00:05:41,350 I'm looking for the alert, and now we can make this one dynamic. 86 00:05:41,830 --> 00:05:42,550 How do we do that? 87 00:05:42,580 --> 00:05:46,030 Well, first we need to get our use of context. 88 00:05:46,180 --> 00:05:47,260 So we're importing that. 89 00:05:47,650 --> 00:05:50,770 And what do values are we looking from the state? 90 00:05:51,220 --> 00:05:55,120 Well, alert type and alert text correct? 91 00:05:55,270 --> 00:06:00,550 So let's set it equal to, let's say, alert type, event alert text. 92 00:06:00,670 --> 00:06:06,190 So these are those dynamic values that will change depending on our actions. 93 00:06:06,530 --> 00:06:12,670 Once we're dispatching and now we need to write it a little bit differently, where now we want to set 94 00:06:12,670 --> 00:06:12,970 it up. 95 00:06:12,970 --> 00:06:19,800 First of all, this one as a curly braces and then inside of it, we're going to go here. 96 00:06:20,140 --> 00:06:24,100 We have a template string because we'll go with alert. 97 00:06:24,310 --> 00:06:25,510 So that's the main class. 98 00:06:25,870 --> 00:06:28,900 But the one that controls the colors is this one. 99 00:06:29,050 --> 00:06:32,740 And then instead of alert hyphen and heart, go to danger or success. 100 00:06:33,280 --> 00:06:36,250 We'll go here with alert and then type. 101 00:06:36,820 --> 00:06:43,630 So you can already put two and two together where if in a state, this is going to be danger van, the 102 00:06:43,630 --> 00:06:44,950 same is going to go for the color. 103 00:06:45,580 --> 00:06:50,770 So if it's success and of course, that's going to be opposite and instead of hard coding mistakes, 104 00:06:51,190 --> 00:06:57,010 what we're going to do is just access the alert text and pretty much we are good to go. 105 00:06:57,340 --> 00:07:03,910 So now every time we'll use the alert component somewhere else in our application, the values will 106 00:07:03,910 --> 00:07:07,120 be provided from the global context.