All language subtitles for 015 How To Work With Redux State Correctly_en

Now let's talk about the objects

which we are returning in our reducer, in our Redux reducer.

I mentioned in the last lecture that we always

return a brand new snapshot, a brand new state object

which Redux will use to replace its existing state with.

So the objects which we return

in the reducer will not, and that's super important

will not be merged with the existing state.

They will overwrite the existing state.

So if we, for example going set

show counter here when we incremented

because before it got to add it here, if we do this

if I click increment, you see I close my counter.

I closed my counter when I click increment even

though I shouldn't, because I don't set show counter here

hence it's basically removed from the object

and it has a value of undefined therefore

an undefined is treated as false.

So we don't render to counter then.

And that's of course a side-effect, which we don't want.

That's an error.

So we must always set all the other states

when we update a piece of state

because we overwrite the old state.

Now that brings up one question.

Why do we need to return a new piece of data here?

Why can't we just use the state

which we're getting as an argument, access counter

and increment it like this, instead of returning?

Or maybe we do it like this, and then we return state.

And when we do that, we changed state before we return it.

And then we just return it again.

Well, if we do that and we reload, everything works.

So it's not easy to see that this is wrong,

but it is, even though it works.

This is something you absolutely must not do

when working with Redux.

You should never super important never

mutate the state, the existing state.

You should never change the existing state.

Instead, always override it

by returning a brand new state object.

And because objects and arrays are reference values

in JavaScript, it's easy to accidentally override

and change the existing state.

You could for example think that

you can do something like this.

And then you return a new object where you then

do set to counter to state.counter

and show counter to state.showcounter.

We can do this because we changed the counter here.

And then we returned a brand new object.

Everything's good, right?

Well, again, that will work.

If I reload, it works, but it's still super bad

because we still mutate the existing state because objects

and arrays are reference values in JavaScript.

And in case it's not clear to you What I mean by that.

Attached you find a link which leads you

to an article and a video where I explained this in depth.

Now, when working with redux and it's state

you must never mutate state like this

never changed the original state which you're getting.

This can lead to bugs, unpredictable behavior

and it can make debugging your application harder as well.

So even though it doesn't lead to a bug here

it can have unwanted and unexpected side effects

in bigger applications where your state gets out of sync.

And suddenly the UI is not reflecting your state

correctly anymore.

And hence the simple rule is never

mutate your state like this.

Always return a brand new object

where you copy any nested objects or erase.

If you have any and create brand new values

as we're doing it here.

By updating our state like this

we create a brand new object where we don't change anything.

And especially when you have a state

with nested objects and arrays

it's easy to accidentally mutate your existing state.

And therefore you should be super careful

that you do this in an immutable way

that you'd never accidentally mutate your existing state

but you copy any objects which you added.

So you always create a brand new object or array.

Whenever you need to update data

you never just dive into an existing object

and start manipulating its properties.

Always copy and create new objects.

Now, at this point it might look a little bit too early

to emphasize it like this,

because this is a fairly simple state here

but it is super important, easy to mess up

and something you should know right from the start

which is why I am emphasizing it here.