All language subtitles for 065 useReducer - useState Setup.en_US

All right, up next, we have used producer.

Now use their hook is used whenever we have a more complicated setup as far as the state.

So you can definitely use it with simple examples.

But tell me honestly, if you have like a to do list or something like that, I think you're using just

regular use that is good enough.

However, as your app gets more complicated, it definitely is a good practice to use the juicer because

essentially it will add more structure to your state.

So you won't be able to add just willy nilly how you'd want and change the state.

It will have to go through certain steps and that is very, very useful when you work in it.

Again, if you have a simple to do, I don't see a big use case for that.

How has your app gets complicated then?

Of course, I definitely would suggest using user just because it will just add more structure to the

initial setup that you have in the state.

Now, before we go any further, let me just mention that I purposely picked this example to be somewhat

simple and tutorial.

And then once you're done with tutorial, I would highly, highly, highly suggest going right away

to the project and then do the use a reduced project because that project will be a bit more complicated

and of course, a better use case for reducer.

And before we start working in our setup, I just showcase what we're going to build.

So I'd want you to import from tutorial one six the user juicer and one of the final one.

And notice how we don't need to go for specific file.

And I'll talk about it in a second.

But for now, you're just looking for that component that is coming from the final.

And once you're under, you'll notice that again, we have the form, we have some kind of input.

And I can go here with Ihram.

I can add it.

And not only I can add the item, but I also have this model and notice how the application gets a bit

more complex.

And that's a good use case for using user's user.

And if I try to add the item that doesn't exist, then I just have please enter value and we'll start

simply by building this using the traditional setup where we had two values in state and then we will

refactor it to use producer.

Now user Gersel relies heavily on Redox.

So if you're familiar with the redox option, if you're not, then once you understand, use their juicer,

it is going to be very easy to pick up Redox because a lot of the lingo and functionality is exactly

the same.

So first, let's deal with this specific path where we don't have any filename and we're going to do

that by going to a set up here and line instead of final.

We are looking for a setup, so I'm looking for the setup.

Of course, I'll change my component name as well.

And once I say I should see the user producer that we navigate to the six and we're looking for setup

and then notice something interesting where I have to files.

No, I have it next year and the model.

So here's what's happening in this particular setup.

What we can do is use Index Jass in the folder and then once we import, we don't need to go with specific

file anymore because indexed jayesh in every folder, unless you change the set up manually, will be

the main entry.

Meaning if I, for example, go with input from the folder and if I have their index G.S., it will

right away import that index jazz.

And you'll see that in a lot of people setup where we have a bunch of folders and that each and every

folder has this index and that index is that main entry in that folder.

So in here I can do whatever I want inside of that folder, but Index JS will be that main entry point.

So everything at the end of the day will be either imported here or the logic will be sitting here so

I can have as many components as I would want in the same folder, but all of them in some.

Way or shape or form, we'll meet in that index, just like I said, we'll just start with a very,

very basic set up.

Where we'll still have the form, we will still have the simple state value and all that and also will

have a simple toggle as far as the model, and then slowly but surely we will refactor it to use reducer.

Now, let me close some of the folders over here and notice we have the moral component and that is

the component that's sitting right next to our index J.

S OK, Werfel in the next year.

I would also want to import data.

Import data, and that is, of course, the name the import, so we go from.

And then again we go a few levels up.

We're looking for the data because first we'll just try to do that using the regular set up as far as

the state values are concerned.

I'll close the sidebar.

We're going to go here with Konstantine people and then set people that is equal to our your state and

then we pass in our data.

OK, awesome.

And also, I want to toggle that model.

Now, if you check out the model, there's nothing there.

There's just the there that I am model.

But eventually it is going to be there.

And as far as my state value, I think I'll say show model and then set.

Show model, show model, and by default, I'll say that I'll hide the model so it will be hidden by

default.

And now, of course, I would want to come up with my return.

So let's go again with our fragment here and line as far as the return.

We'll start by just checking the model.

What is the show model scenario?

So if it is true, then I would want to showcase.

We already know how we can do that.

Of course we have our model component.

Correct.

So I go with your model and then I go here with a model component.

So if the show model will be true, if not, then we're going to hide that.

Now we're going to go with form, we'll go with form.

And I think I'm going to go with on submit, on submit.

And as you can see, I'm kind of keeping up the pace here because we have already covered this before

and we'll have a handle and then submit.

And then, of course, we need to have a div and an input.

It's going to be a text.

Now, as far as the value.

Well, we'll have to come up with a new statement, correct, so let's just go with tax, I guess I

can call it that way.

I think it is going to be good enough or, you know, let's just go with names of name.

And then that name is equal to a year's state and that is just going to be an empty valley for now.

That old type name here and then on change, well, then will invoke again our in line function.

And then once we invoke it, we would want to go with name Saturnine and then we pass in whatever we're

getting back from our event target and then that value at the moment, it complains, well, we have

no access to event because it is not defined.

There is now it is defined and also the Handelsman.

So let's just go with Consed and then handle.

So, Matt, that is my function now, I would want to prevent a default, of course, so I'm going to

go here with E and then prevent default.

Let's invoke it, let's say, yep, we should have something there.

Then let's add a little bit of styling as well.

So let's say here that there's going to be a class name and form.

Let's also add our buttons right next to there.

We're going to go with button type is going to be sub mat.

And let's just right here add person or add or whatever you want.

And there it is.

Now of course we have our form and if I would want to have that item.

To the people, well, I would need to do that when I'm submitting the form, correct.

So first we prevent the default and now we want to check if the name is more than just a empty string.

If it is a empty string, then of course, I would want to display them all, know how I can display

the model.

Well, I can go here with else and I can say show model and I'll set it equal to true.

Right, because now I would want to display it and I'll say that, you know what, the value is empty

now.

I'm not going to pass in any kind of values will deal with that once we set up use reducer.

So for now, we'll just display that show model.

Now, if the name is of course there, if we have type something, then we can say show model.

And again, we'll set it equal to true.

So that is also going to be use case where we show the model.

And then I would want to add that item to my list to my people.

So let's right here that we go with some people that will pass in that new array where we.

Spread out the old values first, and then we pass in what when we pass in the new person, no new person

is going to be an object.

So let's say it property and we'll go with new date again, a little bit of cheating.

Get time.

Invoked and lastly, to strike invoked and now let's set up a name, let's say that the name will be

equal to our state value and now, of course, we show the model we added to the people.

And then lastly, let's use set set name is equal to an empty string.

And of course, let's iterate over.

So we show the list.

So right after the form, we're going to go with people, people then map.

And then of course I'm looking for each and every person alike like so and then once I said I would

want to return the div online, it needs to have a idea, of course.

So he and then person of that idea and we're going to go with heading for and let's just play person

that a name now eventually will add the button but not right now.

So let's type some gibberish.

And once we add of course show model is not a function because well it's not a model, it is set show

model.

So set show model as well as here set show model.

Again, straight out some gibberish and I can see the item over here and I also can see the model and

once I refresh it will also happen if I try to submit the empty room.

So that would be a scenario if we use these state values.

And like I said, if you have a small application, there's nothing wrong with that.

But as your app gets bigger, bigger, bigger, bigger, you'd want to have some kind of structure because

notice here how we have no problems changing state values however we would like.

That's not usually a best use case.

If you have a bigger app and if you work as a team, you would want to have some kind of guardrails

where you're only updating the state in a certain way.

So that way everyone is on the same page.

This is exactly what we're going to do starting from that next video.