All right, and once we have refactor to basic use reducer set up, now let's see how the dispatch works,
how the register works, and what is a function in order to affect anything in our state, we would
need to dispatch.
And I'm going to do that if the name is there, meaning if it is true, if it's not an empty string.
So I'll have to add at least one letter and then I'll click on add on.
And here we call dispatch.
So that is our function.
And we always, always need to pass in the object with a property by the name of type.
So that is going to be our action.
So action is going to be our object and not in that object.
You must have the property by the name of type and one you need to set it equal to something.
A common practice is using uppercase, but you don't have to.
So in my case, I'll just call this testing.
And then once you dispatch once you dispatch your action, that's what it's called.
Then in register, you need to handle it.
And like I said, reducers taking Aspromonte or two things state right before that update and then what
action you'll want to do.
So now that is, of course, testing.
Now, one thing you need to keep in mind, that ProMED user, you always, always, always want to return
some kind of state because again, this is going to be that use case where if you don't return, well,
none of the functionality that you have later is going to make sense.
So let me just simply start back on so long and you'll see how there's going to be a big fat error if
we don't return the state.
So we get the state right before the update.
And then I also want to cancel the action.
But if I don't return the state from this function, then this functionality won't make sense because
now, of course, it is going to be undefined.
So once I save and once I have the letter over here, check it out now I have cannot read property is
model open of undefined.
Why what?
Because I had the initial state, the default one that is right here.
But since I dispatched the action, then the action went to register and in register I did not return.
And you state my whole functionality went bananas because there's no more is more open.
That's why you always, always need to return some kind of state if you want your functionality to work.
So once I say even then, once we have, for example, letter F, once we click, check it out, what
do we see in the console?
So now of course I see my old state correct.
And I also see this object with the type of testing.
So that is a state right before they update where we have people already and then his more open and
then model content.
So now let's see how we can work with these values.
So we have the state and we also have the action.
So why don't we go with if statement the condition and check whether we are dispatching the action with
the type of testing.
Let's do it, let's say if and then we go with action, then that type, remember, that is the property
name and if that is equal to a testing, then we would want to do something.
So essentially what you do is set up your dispatch functions with your action object, where you set
up type property with a value and then in register you catch them.
You say, all right, if I dispatch this thing, this is what I would want to do.
So notice how we are not directly affecting state.
It's not like we call set name or set people or set model.
We're not doing that.
We only control the state when we dispatch the action and then in reducer.
This is where we deal with our state and essentially it is more structured.
So even though it's a little bit more boilerplate, it is less prone to errors or some kind of silly
bugs.
So let's deal with our if so, if the action type is testing.
Well, what I would want to do well, I would want to return.
Correct.
I always need to return a state.
So in this case, this is the fourth one now.
But now if the type is correct, if it is testing, then I would want to return that new state.
And since it is an object, again, we need to keep in mind that if I just had some kind of property
here, then still my functionality will go bananas.
Why not?
Because I need to have people I need to have is model and I also need to have more content.
What was the way of getting all those values?
Well, we are returning the object.
Correct.
And then we go with the dot dot and then I would want to copy all the values from the state right before
the update.
Correct.
And now we add a comma and then we just decide what values we would want to change.
And for now, we'll just do it manually.
Where I will say, you know what?
People will be equal to my data or a.
That is more open is going to be actually true.
So say the model and also as far as the model content model content, well, we'll set it equal to ihram
and then added, OK, so let's test it out again.
This will only happen when we click on a button.
Correct.
So let me add something here.
And there it is.
Now I have my list, John, Peter, Susan, Anna, and also I have Ihram added.
So the next time I will do something as far as this dispatch, I will already have this particular state
value.
And you can clearly see that if you want to log.
So if we go here with a state the first time we'll click, it is going to be empty.
But then if we just click one more time, then of course we already have the last state.
Probably that's why it's so important to always return state.
Now, as far as this default one, you can return a state if you want.
But another way, how we can do that is through the error.
If the action that you passed in does not match any of the types that you're checking for.
For example, here I could go with throe and a new error and I'll say no matching action type.
So where I would use that, for example.
If I have here the House and then I dispatch and I don't know by mistake, I'm going to go type and
then random random.
So once I save, once I click on the button, if my value is not there, if it is empty, of course,
I'm going to have a big fat error where it's going to say no matching error type.
So what is happening here?
I could technically return a state.
Yeah, that is an option.
But this just gives me a clue that I'm dispatching something that I'm not catching in the register because
in the register at the moment, notice I have my action.
Action, of course, has the type and I'm just checking for testing.
Now, if I would be checking for a random one that I passed, then of course that is a different scenario.
Then everything would work fine.
But this is a good default scenario where I have a bunch of these ifs for all the action types that
we are about to set up.
And then if none of them match, then we throw the error.
Again, the alternative would be just returning a state.
And then if we return a state, you'll notice that nothing will happen because of course, we're not
checking for it at random.
But also the problem might be that you won't notice that, hey, there's something wrong.
I'm not checking for this action.
That's why the alternative would be throwing the error.
So let me delete it.
And now let's add up to something useful.
Now, what is that useful?
Well, instead of testing, I would want to say add item, because essentially this is exactly what
I would want to do.
So I'll say this patch and then type.
And now I'm going to go with add an underscore item again.
This is just a naming convention where everything is uppercase.
And then in between the words, we just use the underscore that is not at all.
And of course, in the register, I would also want to check that.
So I'm going to go back to add and then underscore item.
Now, everything is awesome, but of course we understand that we won't return just a data.
So this is where I would want to get that value that is coming from the input and then add to my empty
array.
The people are poor knowledge.
Just leave it blank.
Over here is.
And we need to decide what how we can pass that data and the way we passed that data is by adding more
properties in here in the object.
Now, of course, what would help is if I would actually create that item once I'm trying to submit
the form.
So let's do it this way.
I'm going to go with const and then new item is equal again.
We need to have that ID.
So I'll come up with that property, new date and then let's go and get time.
And lastly, we'll set it equal to a string and I'll grab that name.
So whatever is in my state value and I once had dispatch, remember, I just said we can add more properties
and a common convention is calling this a lot.
But again, there's no rule.
And the way you would do that, you would add comma, since it is a new property and payload is equal
to my new item.
So now in the register, not only I'm checking for the type, which of course I'm doing since I would
want to set up some kind of return, but I also would want to grab that payload.
So right above my return in the add item condition, I would want to set new items and that is going
to be equal to that.
So let's copy all the values that we have from default, state or state run before the update, which
of course essentially is going to be empty array.
But as we keep on adding items, there's going to be more and more items.
We go with state items.
So whatever array items we have and then I would want to add action and then payload to the new items.
So not where we have the people.
I'm going to go with new items now.
Of course, I would want to open up the model, so I will leave this model through.
And then of course, I'll also leave item added.
So once we say we have a big fat error because I did not add space and between you and so now let's
try it out, I will go with random and then once I click on ADD, then I have another issue that items
is not iterable.
And of course the reason for that is because it is not items.
Sorry, it is people.
My apologies.
So now everything should work and you know, well, we're still on the subject.
I just call this new people.
The reason for that, because in my original setup, I went with items and now as I'm recording, I
just changed my mind.
That's why we got this bug.
Let's just say random and then we'll add.
And there is now we have, Ihram added.
So we display our model beautiful.
And also we showcase that here in our list.
Now, what else we would want to do?
I guess I would want to clean out my values once I submit.
Correct.
That only makes sense.
So let's do it this way where we have the name.
Right after that, I'm going to go with Satnam and I'll set it back to a..
String and knowledge dispatch.
Another action or this one will be no value action.
So if I try to submit item without any values, then of course I would want to showcase that in my model
and I'll just change the action around where it's not going to be.
Type random will say no underscore and then value.
Now when it comes to our no value action.
And by the way, let's just go with action type is equal to.
Now underscore value.
So if that is the case, well, what I would want to do, I simply want to return different moral content.
Correct.
And I also would want to showcase the model.
But remember, I still want to return my people.
I still want to show my items.
Correct.
So that's why, again, we go with turn the other DOT state.
So we copy everything coming from the previous state state before the update.
And then we say model is true.
And also, of course, I would have a different model comment.
So I say model content and I will be equal to a place and her value not separate.
And the problem here is that of course, smart enough.
I added in my previous condition and you know, also the name is a little bit different.
It is is modal, open like so.
And now it's the strength where I'll try to submit and disvalue.
And now, of course, we dispatch the no value and then in action we just check again the whole point
where we copy this virus because essentially we just want to change two properties on that state is
more open and model content.
And I want to leave the people, the list of people intact.
Maybe there's going to be cases, for example, with closing model that will only affect one property.
That's why it is very important once we return that always to copy the values, the previous vows from
the state and then just decide which property value we would want to change.
And in our previous example, of course, we change all three of them.
If you want to dispatch a action and then change only one thing, just make sure that you copy all the
values.
If you would want to do things again, the same thing, make sure that you copy drivers if you want
to change all of them.
Again, it is a good practice to always make sure that you're keeping track of your old state values.
And I think we're in good shape.
So now we can add more actions to our arsenal.