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

您可以像这样更好地编写删除案例，但是您需要做一些小改动。不是传递index，而是通过value来删除（更简洁的做事方式）：

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

如果有帮助，请告诉我

React Redux在状态内附加/删除数组

3 个答案: