All language subtitles for 068 useReducer - Remove Item.en_US

Nice work and let's add two more actions, one for removing the item and then also the clothes model

one.

So I remove that control lock, I don't think we need it anymore and we just keep on scrolling.

So we add one for no value.

And I guess let's start by passing in the clothes model function and the way we'll set this up.

Notice we have a submit.

And let's also create a function that will be responsible for closing the model, so CONSED closure

model, it's not going to look for any arguments, however, within the function, but we will dispatch

an action that we haven't set up in our user yet and the type will be close, underscore model.

And the only thing that I would want to do as far as this functionality is again to return all the set

values and then change is model to.

We're going to go if action and that type is equal or close and then underscore, then return again.

Copy all the previous state values, state and line.

Let's go with is model open and let's set it equal to airfoils.

Now the gotcher here is that I would want to call it in the model and I would want to call it after

three seconds.

So what I would want is to pass this close model as a prop down to a model.

So let's go with close model is equal to a close model like show.

And then once we do that in the model, of course we can access it somewhere, say, here, close,

close model.

And in the model, I would want to set up a use effect where like I just said, I want to close it after

three seconds.

So let's go here with usufruct and line in our callback function.

Let's just set up a timeout and let's say we have a callback function.

And I would want to go with close model here and I would want to call it after three seconds.

And that, of course, is three thousand milliseconds.

So once we type something, first of all, that item should be added.

We added the item.

But then after three seconds, notice how we dispatch we dispatch this action up close model.

And of course, model is seven.

And similarly, we could add here a button to our items.

And then remove that item if we click on that button, and for that, of course, again, we'll have

to dispatch an action and of course, we'll have to handle that action in the register right below the

heading for.

Let's go with button on set up on Click right away.

And online in here, let's pass in our Kobuk mansion.

And I would want to dispatch an action now type will be remove item so type and then we go with remove

underscore item and then I would want to add the payload again.

Why?

Well, because I need to be specific which item I would want to remove.

I noticed in this case we're not passing that I.D. Otherwise how do I know which item I would need to

remove.

So I'm going to go with payload and payload in this case is going to be equal to that person and then

dart it.

So once we save, of course, we should be able to see I'm an artist.

And by the way, I should have added the item class.

First of all, it's going to look a little bit better.

And then also I would want to add some kind of text here.

So let's say and of course, let me try to say item and then once we have there is an item now that

is our motto, OK, it is then after three seconds and now would want to handle that remove item.

So if I click right now, what do you think is going to happen?

Well, we're not handling it right.

So we should have this error.

And this is awesome because at least it tells us, hey, listen, you are dispatching an action that

you're not handling in the register.

So I go, what if action and that type is equal to remove item and move and move item?

So within my condition, I'm going to come up with new variable new people that is equal to state people.

And I would want to use filter.

I'm going to access each and every item as far as the premiere of person, and then I'll say person

I.D., there's not much to a action and then payload.

So that is the case, then.

I wouldn't want to turn this particular item.

And now, of course, I just need to paternalist state.

So I'll say here, return and find new object.

So we'll go with the DOT and the state online where we have the people that is going to be equal to

a new people.

All right.

We say it.

And what should happen once we click the button?

The model shows up for three seconds and it says, hey, please enter the value.

Now, if we successfully add that item example, say a random item, then once we added it displays

random item and of course, we can remove it as well.

So that's how we can set up our state using user juicer where notice how it adds way more structure.

And the last thing that I would want to showcase is that normally, since reducers are going to have

a lot of functionality, you do move them to a separate file.

So in a setup, I would want you to create a producer, J.S. then take everything as far as the function.

So register it out like show and line in the register, copy and paste.

Now, of course, we would want to export.

Now, if you want to export this as default, you can definitely do it.

Marcus, I will export this as a named export and here we go with import than produce.

And then of course, we are importing this from, um, the reducer.

And now our functionality should still work.

But I just need to make sure it is a producer like so.

And now of course I can keep on working with my form and everything will work.

And now notice how much cleaner and more structured is our application where we have the producer that

just deals with our data and each and every time we want to do something, which is dispatch the section

again, like I have said this before, of course it has way bigger use case as your application gets

bigger or you get more people on a team.

And if you'll go right now to the projects and start working on the Use Register project, you will

see user juicer and a more complex setup.

And of course, like I keep on saying, it is going to be a better use case for use reducer.