调度新的 redux 操作时如何正确删除对象子字段？

Question

我想知道在 redux 操作中删除嵌套字段的正确方法是什么。例如，我有这样的代码：

const SUBSCRIBE = 'SUBSCRIBE';
const UNSUBSCRIBE = 'UNSUBSCRIBE';

export default function reducer(state = {}, action) {
  const {
    productName,
    products,
    componentName
  } = action;
  switch (action.type) {
    case UNSUBSCRIBE: {
      if (state[productName]?.[componentName]) {
        const newState = { ...state };
        delete newState[productName][componentName];
        return newState;
      } else {
        return state;
      }
    }
    default:
      return state;
  }
}


export function unsubscribe(productName, componentName) {
  return {
    type: UNSUBSCRIBE,
    productName,
    componentName
  };
}

在UNSUBSCRIBE 操作中，我删除了newState[productName][componentName] 字段，但是这也会删除处于“旧”状态的字段。所以理论上，如果有其他动作使用这个字段，它可能会因为状态发生变化而丢失。我是否应该将旧状态深度复制到newState，然后删除newState[productName][componentName]？

Answer 1

您可以选择以下两种方法之一：

1. 创建productName 状态的副本并从该副本中删除componentName

if (state[productName]?.[componentName]) {
  const newProductState = { ...state[productName] };
  delete newProductState[componentName];
  return {
    ...state,
    [productName]: newProductState
  };
} else {
  return state;
}

1. 您可以将componentName 标记为未定义而不是删除（我个人更愿意这样做）

if (state[productName]?.[componentName]) {
  return {
    ...state,
    [productName]: {
      ...state[productName],
      [componentName]: undefined,
    },
  };
} else {
  return state;
}