Как избежать изменения состояния при обновлении массива в redux?

Question

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

case TOGGLE_TABLE:
      const newState = { ...state };
      const activeTable = newState.list.find((table: any) => table.id === action.id);
      if (activeTable.visible === undefined) activeTable.visible = false;
      else delete activeTable.visible;

      return newState;

Насколько я понимаю, у меня состояние мутации, есть ли какое-то быстрое решение, чтобы убедиться, что я не?

Answer 1

Используйте findIndex, чтобы найти activeTable вместо этого, и назначьте новый массив для .list, который содержит новый activeTable объект:

const newState = { ...state };
const { list } = newState;
const activeTableIndex = list.findIndex((table) => table.id === action.id);
const newActiveTable = { ...list[activeTableIndex] };
if (newActiveTable.visible === undefined) newActiveTable.visible = false;
else delete newActiveTable.visible;
newState.list = [...list.slice(0, activeTableIndex), newActiveTable, list.slice(activeTableIndex + 1)];
return newState;

Или, если никогда не будетболее одного совпадения id, вы можете считать .map более элегантным:

const newState = { ...state };
const newList = newState.list.map((table) => {
  if (table.id !== action.id) return table;
  const newActiveTable = { ...table };
  if (newActiveTable.visible === undefined) newActiveTable.visible = false;
  else delete newActiveTable.visible;
  return newActiveTable;
});
newState.list = newList;
return newState;