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

Question

I'm wondering what is the right way to delete a nested field in redux actions. For example, I have this code:

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
  };
}

In UNSUBSCRIBE action I delete newState[productName][componentName] field, however this will also delete the field on the "old" state. So theoretically if there're other actions which use this field it may be lost for them because the state is mutated. Should I deep copy old state into newState and then delete newState[productName][componentName] ?

Answer 1

You can do one of two:

1. create a copy of a productName state and delete componentName from that copy

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

2. Instead of deletion, you can mark the componentName as undefined (which I would personaly prefer to do)

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