Question

我正试图理解名为＆＃34;购物车＆＃34;给予redux： https://github.com/reactjs/redux/tree/master/examples/shopping-cart

在此示例中，您可以向项目列表中添加元素，我尝试实现删除项目列表的功能：

但是在reducers文件夹中有一个addedIds()函数，我添加了一个案例来删除列表中的元素，但我不知道如何实现它，这里是函数：reste of我的代码工作正常我只是不知道如何从addsIds数组中删除产品ID。

const initialState = {
  addedIds: [],
  quantityById: {}
};

function addedIds(state = initialState.addedIds, action) {
  switch (action.type) {
    case ADD_TO_CART:
        console.log("added ADD");
      if (state.indexOf(action.productId) !== -1) {
        return state
      }
      return [ ...state, action.productId ];
    case REMOVE_TO_CART:
        console.log("removed ADD");
        // here is my problem
    default:
      return state
  }
}

我认为我需要做类似这样的事情： Is this the correct way to delete an item using redux?

但我不知道如何

你能帮我吗？

Answer 1

您可以从数组中删除一些元素，只是将其过滤掉：

// ... skipped other cases from the switch
case REMOVE_TO_CART:
    return state.filter(productId => action.productId !=== productId)

使用.filter()函数的方法看起来很短，并生成redux所需的新数组实例。

Answer 2

对于那些有类似问题的人来说，解决方案是：

const initialState = {
  addedIds: [],
  quantityById: {}
};

function addedIds(state = initialState.addedIds, action) {
  switch (action.type) {
    case ADD_TO_CART:
        console.log("added ADD");
      if (state.indexOf(action.productId) !== -1) {
        return state
      }
      return [ ...state, action.productId ];
    case REMOVE_TO_CART:
        console.log("removed ADD");

      return [ ...state.slice(0,state.indexOf(action.productId),
          ...state.slice(state.indexOf(action.productId)+1))
      ];
    default:
      return state
  }
}

感谢Josh Deeden发现了这个视频： https://egghead.io/lessons/javascript-redux-avoiding-array-mutations-with-concat-slice-and-spread

Redux购物车示例

2 个答案: