Редукс редукторы, значение ключа объекта

Question

У меня есть hashMap в моем магазине приставок, я хочу изменить значение isChecked для детей id: 2. Это хорошо, чтобы сделать это в состоянии, как это (работает в состоянии)?

Мой hashMap

const childrens = {
  1: { name: "Test", isChecked: false },
  2: { name: "test2", isChecked: false }
};

Вот мой редуктор

export const childrensReducer = (state = childrens, action) => {
  switch (action.type) {
    case "SELECT_CHILDREN":
      const id = 2;
      state[id].isChecked = !state[id].isChecked;
      return { ...state };
  }
};

Answer 1

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

state[id].isChecked = !state[id].isChecked;

Почему для редукса требуется неизменность, можно найти в официальных документах:

https://redux.js.org/faq/immutable-data

Один из способов сделать это: (Я полагаю, вы отправляете идентификатор через action.id)

    case "SELECT_CHILDREN":
      return {
        ...state,
        [action.id]: {
          ...state[action.id],
          isChecked: !state[action.id].isChecked
        }
      };

Этот тип операций с состояниями проще, когда для состояния используется массив.

Answer 2

Не рекомендуется изменять состояние, так как реакция зависит от неизменности для многих его функций.

Рассмотрим, например, методы жизненного цикла или повторное рендеринг после сравнения состояния / реквизита (PureComponents)

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

Правильный способ обновления состояния -

case "SELECT_CHILDREN": 
  const id = 2;
  return {
    ...state,
    [id]: {
      ...state[id],
      isChecked: !state[id].isChecked
    }
  };

Answer 3

Изменять состояние не рекомендуется, как вы.

Существуют разные подходы к изменению состояния. Взгляните на ссылку ниже, чтобы получить больше информации и примеров. https://www.freecodecamp.org/news/handling-state-in-react-four-immutable-approaches-to-consider-d1f5c00249d5/