调度新的 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删除componentNameif (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;}