All language subtitles for 014 Working with Multiple State Properties_en

So now we already learned quite a bit

about Redux but up to this point,

we always just worked with our single counter value.

Now I got this Toggle Counter button here

and when it's clicked,

I wanna make sure that the counter is hidden

and when it's clicked again, it should be shown again.

Now for this, of course, we could use useState.

So we could set up some local state in this component

which we manage with useState, not with Redux.

And that would be the proper way of doing it

because showing or hiding the counter

is something which only is interesting to this component,

not to any other part of the application

but the same could be set about our counter.

We are only using the counter in this component here.

So the counter technically also is local state

but this is just a simple demo to get started.

So let's assume that both the counter as well as the state

wherever the counter should be visible or not,

is a global state which is also the interesting

to other components even though that's not the case here.

As we progress once we know these basics,

we will, of course, also work on demos and projects

where this then really is the case.

But for the moment, let's assume it.

So when we click this button,

the toggleCounterHandler is fired.

And then here we wanna dispatch an action

which changes some state in Redux

which controls whether this counter div is shown or not.

For this, we need to add a new state

a new piece of data to our Redux store.

And how do we now do that?

Well, to add a new piece of data,

we need to go to our reducer in the end and just add it

to all these state snapshots which we are producing.

Let's start with the initial state snapshot.

When we start besides having a counter

which has a value of zero, I wanna have a showCounter field

which has a value of true or false, that's up to you.

And to keep this a bit more readable,

I'll extract that and store that in a constant

named initialState like this

and assign initialState here then

just to make this a bit easier to read.

Now when we increment, we are changing the counter,

we don't care about showCounter.

We still need to set the showCounter property here though

because we are returning the overall state object

and Redux won't merge your changes with the existing state.

It instead takes what you return

and replaces the existing state with it.

More on that in a second.

But for the moment that's just accept it

and set showCounter here to state.showCounter.

So to the value we currently have in our state

because for increment, we don't wanna change it,

so we will just take the existing showCounter value.

And then we can do the same here for increase

because there we also wanna keep

the existing showCounter value

and do the same for decrement here.

But now I will also handle a new action type

and by the way, since we have many if statements here,

we could also use a switch case statement,

but I will stick to multiple if statements here for now

and in this new action type,

I will check for, let's say toggle.

Now the identifier just like all these identifiers

is up to you.

I'll go with toggle and then return a new object.

Here, we now wanna change showCounter

and set it to the opposite of what it was before.

If it was true, we wanna set it to false,

if it was false, we wanna set it to true.

And we can do this by simply adding an exclamation mark

and then accessing state.showCounter.

This will invert the value.

Now for the counter itself, we wanna keep the existing state

because we don't wanna change this here for this action.

So we just set counter to state.counter.

Now we also support this new toggle action type

and hence back in counter.js in the toggleCounterHandler,

we should dispatch such an action.

We dispatch a new action object where the type is toggle.

Now we can take advantage of this toggle state,

so of the show counter.state,

and for that we need to get access to it.

So all to in the counter, we again call useSelector.

We can use this multiple times to retrieve different pieces

of data from the state.

And here I'm then interested

in my showCounter piece of data,

and I'll store that in a show constant.

The constant name of course is up to you.

Now again, that will then always update

and the component will be re-evaluated

whenever that data which we're accessing here changes.

So now here with show extracted,

we now can render this div here conditionally

by checking if show and only rendering the div

if show is truthy, like this.

If we now save this and reload,

if we click Toggle Counter, it's gone,

if I click this again, it's there again.

I can still increase it even if it's hidden

but it only shows up when,

well, when I click Toggle Counter.

So that now also works and that is how we can manage

multiple different pieces of data in our state.

Of course, this data is still kind of connected,

we have the counter and then the state

whether we wanna show it or not

but it's too totally different values

which are changed in totally different ways.

So therefore, that is how we can manage

multiple pieces of data.