All language subtitles for 066 useReducer - Refactor.en_US

Our basic setup worked some want.

OK, now let's refactor this sucker to use a register and I'll start by removing these people and show

no so we won't need these guys because we'll set up a new one.

And we're going to go here again with our array instruction and we'll set up a state again that is just

a name.

So you can call this burrito if you want.

But I'm going to go with State and then we have a second thing, a function, a specific function by

the name of dispatch.

Again, you can call this whatever you want, but a common practice is using this dispatch.

Why?

Well, because when we invoke use reducer, again, we're getting a few things back.

We're getting the state value.

And then we're getting the dispatch function similar, like how we have with you state now, the difference

right now is that in the U.S.

Reduce there.

The first thing we pass in is the reducers function and the difference between the U.S. state and U.S.

registered at each and every time you want to do something with that whole state, you always, always,

always must use this punch.

And it's going to go through the user.

And you can think of reduce function as something that takes the old state and takes in something called

action, which you are going to cover a little bit later and then spits back that new state.

So you always need to have that reduced function.

And the kicker here is that eventually we'll move this into a separate file just so we have less code.

And our main component, so reduce our function, it is just a simple function, so we set up a producer

and then eventually it's going to look for two things.

So state that is going to be the state right before the update and then the action.

And you can think of actions of what are we trying to do now?

For now, we'll just leave it blank and we'll get there in no time.

So user juicer is looking for a juicer for the function of that will manipulate the state.

And it will happen once we call dispatch or once we dispatch the action.

I guess that is more proper way of saying that.

And then the second one is that initial state.

Now we can set us up as far as the separate variable if you want, or you can type it directly in here.

I think I'm going to go here.

I'm going to say CONSED and then default state and that is going to be my object.

Now, any object what I would want?

Well, we had a people, correct.

So that was my people all.

And for the time being is just going to be blanko than we had shall model.

Right.

So if you want you can go.

Is model open.

Let's maybe try it out that way.

Is Motal open and by default is going to be false.

So it's not going to be open.

And then last one is going to be Motal content, whatever text we would want to place over here.

So I'll have a model content and on here I'll just start with Hello World.

Eventually of course it is going to be an empty string.

And now where we have this used reducer, we pass it that default state again.

You could have easily set this up as an object right here as well.

Now once we have that, of course our app will break for multiple reasons.

For example, there is no show model anymore.

So first, what I would want you to do is just save and then slowly but surely we'll start dealing with

these errors.

And first, I would want to remove all these three functions if name is there as well as this one,

because we won't need them anymore.

And where we have show model, well, now we have a state, correct.

That is the object.

So now what I would want to do.

Of course, is to change it around and say state and then is model open because that is the property

that is responsible for showing the model.

And then where we have the people, again, we need to go with state and then people.

Now, of course, it is going to be an empty array.

So don't be upset if there's nothing on the screen and of course, there's nothing there.

So we are in good shape.

And before we go any further, let me just pass in two things into the model or you know what?

Let's start with one, and then eventually there's going to be another one once we set up the function.

So in the model, I would want to set up a model content and I'll pass in state and then model again

property that is coming from my state value.

And then before we go any further, I also want to show the model.

Meaning I would want to add some changes to the model where it's going to be the structure and two things

model content and eventually close model function, which we don't have at the moment.

And as far as the return, let's add a class name and then add model and then inside this paragraph.

Let's just go with a model content.

So model.

Moral content not save, and now, of course, if you want to test out this manually, the only thing

you need to do is just change these values.

So we have the data right now.

I'm not going to set up adding data because I want we will do through the register properly.

Or if you want to see whether you can access these values in a state, simply set people equal to the

data.

Now, of course, you have the data just to show that it is still just an object.

We're still accessing that in a state and it is an object and it has properties.

So if I would want to show the moral.

And of course, I'll say that it is true because I have state motto is open, so if it is true, then

show the model and model Conan will be Hello World America is now.

Of course, I have the hello world.

Yes, of course we will do this dynamically starting from next video.

But for now, just understand that we have a state which is an object and in that object we have these

multiple properties.

And the whole idea is why we're using that user juicer, because I only want to update these things

once I call dispatch and once I pass in the proper action and I'll handle all of them in one place.

It's only going to happen in one place in that producer and essentially it will just be affecting the

state.

So now let me go back to property values, where we have empty string, where it is hidden by default

and the people will be an empty array and now we can start dealing with our producer.