Как редактировать объект в store redux?

Question

[Ostic]

Здравствуйте.
Такой 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
  }
}

вот такой dispatch:

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

вопрос в том, что у меня не получается просто взять и поменять name в reducer вот так - в лоб:

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
  }
}

в чём разница? почему первый вариант работает, а второй нет? как бы я сам решил, оно работает, но непонятно почему я не могу просто поменять свойство объекта, а вместо этого занимаюсь деструктуризацией и пр..

Comments

[Роман Александрович]

нельзя так редактировать стор потому что вы его мутируете. Почитайте про чистые функции и мутации.

Answer 1

[Nick]

Связано с механизмом работы самого redux и концепцией иммутабельности в него заложенной. Проверять через deepEqual что объект изменился это слишком дорогая операция, которая должна выполняться на каждый редьюсер. Подробнее можно почитать тут

Answer 2

[Антон Спирин]

В документации есть ответы на все ваши вопросы.
Redux: Immutable data
Redux: Immutable update patterns

Answer 3

[Ostic]

я не о том. что иммутабельность, чистая функция и тп - эта концепция ясна. вопрос в том, как редактировать элементы объекта.
вот пример из оф документации:
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
  }
}

иммутабельность иммутабельностью, но ведь меняется же массив? понятно, что создается новый, но в итоге то приложение синхронизирует свое состояние.
как изменить свойство в объекте? так, как я указал,
return state = {...state, name:action.name}
и по-другому никак?
вы как меняете свойство в объекте?
ведь может же в стейте быть объект? (массив - тот же объект)
например, есть такой стейт:

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

и Вам необходимо изменить в obj св-во prop3.
как Вы это сделаете?
_______________________________________________
всё разобрался. только вопрос по способам "Как Вы это сделаете?" актуален. Может я не оптимально просто делаю, может есть способ лучше...

Comments

[Антон Спирин]

Способ описан в документации:

return {
   ...state,
   obj: {
     ...state.obj,
     key3: action.payload,
   },
};

не надо писать:
return state = { ... };
достаточно:
return { ... };
так какstate = в данном случае, абсолютно бессмысленная операция.