Как нам организовать функцию редуктора в Redux, которая возвращает клонированное вложенное состояние?

Question

У меня есть такой файл редуктора:

const initialState = {
  name: '',
  address: { street: '', city: '', country: '' },
  phone: {cell: '', home: ''},
  contacts: {family: [], friends: []}
};

const reducer = (state=initialState, action) => {
  switch(action.type) {
    case 'SET_NAME':
      return {...state, address: {...state.address}, phone: {...state.phone}, contacts: contacts: {family: [...obj.contacts.family], friends: [...obj.contacts.friends]}};
  }
}

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

Answer 1

Я согласен с @David Maze.Несмотря на то, что обычно удобно использовать распространение, оно становится слишком сложным, его труднее читать и легче допускать ошибки.Я уже сталкивался с этим в своей работе.

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

Answer 2

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

const reducer = (state=initialState, action) => {
  switch(action.type) {
    case 'SET_NAME':
      return { ...state, name: action.payload };
    default:
      return state;
  }
}

, что, в свою очередь, эквивалентно

case 'SET_NAME':
  return {
    // name: state.name,
    address: state.address,
    phone: state.phone,
    contacts: state.contacts,
    name: action.payload
  };

Старое состояние и новое состояние будут разделять вложенные объекты (вы не получите глубокую копию), но это нормально.

(Если ваши объекты достаточно «мясистые», также рассмотрите редукционную композицию Redux , которая позволяет вам написать отдельный редуктор для каждого из этих подполей и объединить их вместе.)