React Redux在状态中对数组进行追加/移除

Question

我在状态对象中有一个数组，需要从中推送或拼接项。我们如何在不改变产品阵列的情况下实现它？像这样的东西行吗？

const Cart = (state = [], action) => {
switch (action.type) {
case 'ADD_PRODUCT':
return {
...state,
products: [...state.products, action.product]
}
case 'REMOVE_PRODUCT':
return {
...state,
products: [
...state.products, ...state.products.slice(0, action.index).concat(state.products.slice(action.index + 1))
]
}
}
}
export default Cart

Answer 1

是的，这会起作用，因为你不会改变你现有的状态&总是返回一个新状态。额外：确保您也添加

default:
return state

当您抛出还原程序中未定义的操作时，为了防止状态丢失。

Answer 2

您的代码可以工作，但像一样做会更干净

case 'REMOVE_PRODUCT':
return {
...state,
products: [
...state.products.slice(0, action.index),
...state.products.slice(action.index + 1)
]
}
default: return state

同样正如@sn_92指出的那样，您应该有一个默认条件，以防您调用了上面reducer中没有定义的操作。

Answer 3

您可以用这样一种更好的方式编写remove case，但您需要做一个小的更改。与其在操作中传递index，不如传递要删除的value(更干净的方式)：

case 'REMOVE_PRODUCT':
return {
...state,
products: state.products.filter(item => item !== action.value)
}

让我知道这是否有助于