оператор распространения в редуксе редуктора

Question

Я пытаюсь понять, что делает оператор распространения в состоянии Redux?

Я прошел этот вопрос Назначение синтаксиса Spread в React-Redux Reducers , но по какой-то причине не убедил в ответе.

Может кто-нибудь объяснить мне очень простыми словами, почему мы делаем что-то вроде этого

  case WHATEVER:
      return {
        ...state,
        DateSucess: action.payload,

вместо просто

 case WHATEVER
  return {
   DataSucess: action.payload

Answer 1

Оператор спреда действует так же, как в ES6, по-прежнему такое же поведение (см. Документы MDN ).

О мотивации использования ... состояния, идея заключается в том,просто: сохраните старое состояние и добавьте или перезапишите свойство DateSucess.

Итак, скажем:

const state = {foo: 'bar', DateSucess: 'oldDateSuccess', zip: 'zap'}

Если вы не используете распространение, новым значением состояния будет только DateSucess ивы потеряете значение foo и zip, используя спред, который вы просто перезаписываете DateSucess, оставляя остальное значение без изменений.

Этот спред будет эквивалентен следующему с Object.assign

return Objet.assign(oldState, {DateSucess: 'newDateSucess'})

Answer 2

Предположим, что ваша структура состояний выглядит следующим образом:

const initialState = {
    DateSucess: ' ',
    DateFailure: ' '
}

Ну, тогда, с этим состоянием, теперь мы пишем редуктор и ..

Редуктор является чистымфункция, которая принимает предыдущее состояние и действие и возвращает следующее состояние.

В редукторе мы делаем некоторые вычисления и возвращаем следующее состояние.Учитывая это, мы не мутируем государство.Мы создаем копию с помощью Object.assign ().

Object.assign(state, { DateSucess: action.payload}) также неверно: он будет мутировать первый аргумент.Вы должны предоставить пустой объект в качестве первого параметра.Например:

return Object.assign({}, state, { DateSucess: action.payload})    

Вы также можете включить предложение оператора расширения объекта для записи {... state, ... newState} вместо этого.В вашем случае это будет выглядеть так:

return {...state, DateSucess: action.payload}

Для получения дополнительной информации: https://redux.js.org/basics/reducers

Answer 3

Оператор Spread просто возвращает копию массива или объекта, ассоциированного с is.Посмотрите на пример ниже

const abc = {
  'first_key':1,
  'second_key':2,
}

const newObj={...abc} //will COPY abc

const newObjWithNewKey = {...abc,  'first_key':'01 first','new_key':'007'} // will COPY abc and value of first_key will be replaces with new value as it exists. will add new keyvalue pair new_key.

console.log("abc",abc,"newObj",newObj,"newObjWithNewKey",newObjWithNewKey)

Теперь в редуксе, если вы просто return new payload, тогда вы потеряете другие значения состояния.но если вы используете ... означает, что вы говорите js, что копируете существующее состояние и обновляете значения указанного keys, если ключа нет, добавьте новый