And once her release her is ready to go, what's in this batch, our first action is going to be display
alert and we'll see that in our register if we try to submit the form.
And one of the values is empty and we'll start with actions where we'll set up the variable and set
it equal to show alert.
And if you're familiar with user, do you sure you know that the reason why we use these variables is
because that way we have less chance of making some kind of small typo.
So this will be text, but this will be variable and all throughout the application, we'll use the
variable.
Now, once we have set up our first action in the actions when we want to set up the import, introduce
or not context and these ones I want to display because they're very straightforward on premature will
be repeating all the time, run in the app context.
We want to set up our first function display alert and here we'll dispatch it this patch type display
or a man in the reducer that's handled that.
Let's say if the action type is equal to display alert, then here's where we want to do.
I want to return to current state.
So remember, we always want to return the existing values, but we want to change the value for Charlotte.
We'll actually set it equal to true.
The Alert tab will be danger.
And then as far as the alert text will go with, please provide all values.
And then before we do anything in the register, what I want to do is go to a alert component and remember,
I said that in the beginning, we will be hard coding that will alert and that alert success or danger
or whatever.
Now, in this case, since we have those values already in the state, in our global context, here's
what we can do.
We can import our hook, so use app context.
We can look for both things.
The alert type and alert text.
And that we can make this dynamic where it's going to be alert, alert type, whatever it is, whether
that's danger or success.
So it's going to be controlled over here and whatever text we pass in, which again is going to be controlled.
Once we set up that action first, let me go to actions and I want to set up that variable.
So I'm going to go here with Explorer right away.
Export comms.
I'm going to call this display on the score and alert.
And as far as the value, it's going to be show alert and I'm going to the convention is using all uppercase,
but technically you don't have.
So once I have voice in place, then I want to set up my import in the app context as well as the eReader,
sir, and I'll first start in reducer and then all your app contact.
So let's go here with import.
Now we're looking for display alert, and that is coming from the actions, correct?
And let's right away.
Set it up in the app context as well.
So in this case, I'm going to do it below the reducer.
Again, it doesn't really matter.
And as far as the reducer, well, just handle that action right away, correct?
Let's say that if.
The action type.
He is going to be display alert.
So if the type is equal to display alert, what do we want to do?
Well, we want to first return to state as it is, we return the current values, but then modify the
show alert one and then let's set down one equal to true.
Then let's also change the alert online type.
Now that one will be equal to our danger in this case, because we'll be displaying that not all the
values have been provided.
And then we want to go with alert text.
I might just say, please provide.
All right.
And that's an exclamation point.
So let's save this one.
That's going to be our dear sir.
And now in the app context, we want to set up the function.
Correct.
So let's scroll down where we have the state and above our return.
We want to go with Konst and let's just set it up as a function display alert and that inside of the
function body, we want to go with dispatch and in here we'll dispatch an object with a type of display
alert.
So when we're working with use reducer, we're passing in the object.
And one thing we must pass in is the type property.
And then optionally, we can provide other properties in our case will stick with payload.
So if we'll be providing some kind of value to the reducer, the one that we can use it later in the
actual function, then we'll go with balance, but not for now.
For now, we just passed in the object in this patch and type must be present, which of course, in
this case it is.
And then as far as our action, well, we're going with display alert.
Now I also wanted to write a way, add display alert here in the value, and I don't think I'm going
to be adding this to you, going to read me.
For me, that is kind of self-explanatory that each and every time we set up the function, we want
to pass it down.
So I'm just going to go with the spoiler alert.
Now, if there are some functions that I don't want to pass, then then I'll explicitly set up.
So let's pass here the display alert.
Now we're not going to use this video.
Most likely, it's going to be the next one.
But the last thing that I want to do in this video is navigate to my components.
I'm looking for the alert, and now we can make this one dynamic.
How do we do that?
Well, first we need to get our use of context.
So we're importing that.
And what do values are we looking from the state?
Well, alert type and alert text correct?
So let's set it equal to, let's say, alert type, event alert text.
So these are those dynamic values that will change depending on our actions.
Once we're dispatching and now we need to write it a little bit differently, where now we want to set
it up.
First of all, this one as a curly braces and then inside of it, we're going to go here.
We have a template string because we'll go with alert.
So that's the main class.
But the one that controls the colors is this one.
And then instead of alert hyphen and heart, go to danger or success.
We'll go here with alert and then type.
So you can already put two and two together where if in a state, this is going to be danger van, the
same is going to go for the color.
So if it's success and of course, that's going to be opposite and instead of hard coding mistakes,
what we're going to do is just access the alert text and pretty much we are good to go.
So now every time we'll use the alert component somewhere else in our application, the values will
be provided from the global context.