Реагирует ли Redux на чистый способ обновления вложенных объектов?

Question

У меня есть редуктор с начальным состоянием, которое выглядит примерно так:

const initialState = {
  person: {
    details: {
      addresses: {...},
      invoices: {...},
    },
    tasks: {
      option1: [...],
      option2: [...],
      option3: [...]
    }
  }
}

I WAS обновляет состояние внутри редуктора, выполняя что-то вроде этого:

export const exampleReducer = (state = {...initialState}, action ) => {

  case actions.AN_ACTION:
    state.person.tasks.option1 = [new array]
    state.person.tasks.option2 = [another array]
    return state

  default:
    return state
}

Но я обратил внимание на эту ссылку: https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns/, которая рекомендует сделать что-то вроде этого:

function updateVeryNestedField(state, action) {
  return {
    ...state,
    first: {
      ...state.first,
      second: {
        ...state.first.second,
        [action.someId]: {
          ...state.first.second[action.someId],
          fourth: action.someValue
        }
      }
    }
  }
}

Есть ли более аккуратный способ go по этому поводу? ?

Спасибо.

Answer 1

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

Это одна из причин, по которой мы настоятельно рекомендуем использовать библиотеку Immer для постоянных обновлений , предпочтительно в составе нашего нового официального пакета Redux Toolkit .