How to edit object in store redux?

Question

React

Hello.
Such a reducer:

export default function person(state = {name:'Joe', age:30}, action) {
  switch (action.type) {
    case 'CHANGE_PERSON_NAME':
      return state = {...state, name:action.name}
    default:
      return state
  }
}

here's a dispatch:

changePersonName = ( )=>{
    this.props.dispatch( { type: 'CHANGE_PERSON_NAME', name: 'George' } );
  }

the question is that I can’t just take and change the name in the reducer like this - in the forehead:

export default function person(state = {name:'Joe', age:30}, action) {
  switch (action.type) {
    case 'CHANGE_PERSON_NAME':
      return state.name = action.name  //  вот здесь не срабатывает!! см. аналогичную строку выше
    default:
      return state
  }
}

what is the difference? Why does the first option work and the second one doesn't? as I myself decided, it works, but it’s not clear why I can’t just change the property of the object, but instead I do destructuring, etc ..

Answer 1

It is connected with the mechanism of work of redux itself and the concept of immutability embedded in it. Checking through deepEqual that an object has changed is an overly expensive operation that must be performed per reducer. You can read more here

Answer 2

I'm not talking about that. that immutability, pure function, etc. - this concept is clear. the question is how to edit the elements of an object.
Here is an example from the documentation:
1.

export default function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return state.concat([action.text])
    default:
      return state
  }
}

2.

export default function counter(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

immutability immutability, but the array changes, doesn't it? it is clear that a new one is being created, but in the end, that application synchronizes its state.
how to change a property in an object? as I indicated, and in a different way? How do you change a property in an object? after all, can there be an object in the state? (an array is the same object) for example, there is such a state:

const store = createStore(reducer)
console.log(store.getState())
// {
//   counter: 0,
//   todos: []
//   obj: {
//    key1: prop1,
//    key2: prop2,
//    key3: prop3,
//    key4: prop4,
//    ...
//   }
// }

and you need to change prop3 property in obj.
how will you do it?
_________________________________________________ Got
it all figured out. just a question on the ways "How do you do it?" relevant. Maybe I'm not doing it optimally, maybe there's a better way...