调度新的 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

您可以执行以下两项操作之一：

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

if (state[productName]?.[componentName]) {

  const newProductState = { ...state[productName] };

  delete newProductState[componentName];

  return {

    ...state,

    [productName]: newProductState

  };

} else {

  return state;

}

您可以将其标记为未定义，而不是删除componentName（我个人更喜欢这样做）

if (state[productName]?.[componentName]) {

  return {

    ...state,

    [productName]: {

      ...state[productName],

      [componentName]: undefined,

    },

  };

} else {

  return state;

}