All language subtitles for 067 useReducer - Add Item.en_US

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.