如何在调度新的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;
}

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

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