Почему redux не отправляет обновленный объект в магазин?

Question

Я пытаюсь понять, почему я должен создать новый объект для манипуляции, а затем отправить его в хранилище, вместо того чтобы иметь возможность отправлять экземпляр объекта, который передается функции из хранилища.

Например, если у меня есть следующий код:

export const doStuff = (
  stuff // stuff is from the store
) => dispatch => {
  stuff['foo'] = 'bar'

  console.log("stuff", stuff) // prints updated object

  dispatch({
    type: SET_STUFF,
    payload: stuff
  })
}

, тогда DOM и состояние не будут обновляться.

Однако, если я это сделаю:

export const doStuff = (stuff) => dispatch => {
  const _stuff = JSON.parse(JSON.stringify(stuff))
  _stuff['foo'] = 'bar'

  console.log("_stuff", _stuff)

  dispatch({
    type: SET_STUFF,
    payload: _stuff
  })
}

Тогда , это будет работать. Почему это так?

Я посмотрел документацию здесь , но мне трудно понять это. Является ли JSON.parse(JSON.stringify(obj)) единственным способом go манипулировать состоянием и обновлять его?

---

Редактировать

Мой редуктор:

case SET_STUFF:
    return {
      ...state,
      cartItems: payload
    };

Answer 1

, поскольку материал находится в хранилище избыточных данных, а состояние избыточного является неизменным, если вы передаете один и тот же объект, вы по существу передаете ссылку на тот же объект, который распознает избыточный объект. Однако при создании глубокой копии объекта он не передает ссылку на старый объект.

Answer 2

В первом примере вы обновляете свойство объекта. Не экземпляр объекта. Но во втором примере вы фактически создаете новый экземпляр объекта.

Вы испытываете эту проблему в первом примере. Поэтому, когда вы модифицируете объект, не создавая новый экземпляр (это также происходит с массивами или списками), реагирование игнорирует это, потому что состояния обрабатываются как неизменяемые объекты. Так что вы не видите никаких обновлений. Но во втором примере вы создаете новый экземпляр и устанавливаете его, поэтому вы видите обновленное значение.

И я думаю, что даже если вы не используете json.stringify, просто создайте новый экземпляр и установите этот объект как полезную нагрузку, вы увидите, что он обновляется. как следующее -

export const doStuff = (
  stuff // stuff is from the store
) => dispatch => {
  const new_stuff = {...stuff, 'foo': 'bar'};

  console.log("new stuff", new_stuff ) // prints updated object

  dispatch({
    type: SET_STUFF,
    payload: new_stuff 
  })
}

Answer 3

Вы должны вернуть новый экземпляр в ваш редуктор. ваш редуктор не меняет состояние, потому что вы возвращаете тот же пример экземпляра, как обновить ваше состояние

SET_STUFF:
  return {...state, staff: action.payload}