Redux - 从数组中删除项目

Question

我有一个减少，所以 ACTION_ADD_PRODUCTS 调用产品列表，ACTION_ADD_TO_CARD 操作调用在卡中添加产品和 ACTION_REMOVE_FROM_CARD 应该从卡中删除，但我无法理解如何使 ACTION_REMOVE_FROM_CARD 返回，当我点击其中一个删除按钮，该项目应从卡片阵列中删除；

const initialState = {
  products: [],
  card: []
}

export const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case ACTION_ADD_PRODUCTS:
      return {...state, 
        products: action.payload}
    case ACTION_ADD_TO_CARD:
      return {
        ...state,
        card: [...state.card,  action.payload]
      }
    case ACTION_REMOVE_FROM_CARD:         
      return {
        card: [...state.card,  action.payload]
      }
    default:
  }
  return state;
};

Answer 1

在删除项目时，您需要将附加信息传递给减速器，无论是它index还是id项目的。

如果它的索引，你可以简单地使用切片

case ACTION_REMOVE_FROM_CARD:  
      const index = action.payload.index      
      return {
        ...state,
        card: [...state.card.slice(0, index), ...state.card.slice(index + 1)]
      }

否则，如果您通过 id，则可以使用过滤器

case ACTION_REMOVE_FROM_CARD:  
      const id = action.payload.id      
      return {
          ...state,
          card: state.card.filter((card) => card.id !== id)
      }

PS 另外不要忘记返回其他状态参数，而不仅仅是 card在对象内。