Redux 购物车示例

Question

我正在尝试理解名为 "shopping cart" 的示例给出的 redux ： https://github.com/reactjs/redux/tree/master/examples/shopping-cart

在这个例子中你可以添加元素到你的项目列表中，我尝试实现删除项目列表的功能：

但是在 reducers 文件夹中有一个 addedIds() 函数，我添加了一个 case 来删除列表的元素，但我不知道如何实现，这是函数：reste of我的代码工作正常我只是不知道如何从 addedIds 数组中删除产品 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
  }
}

我假设我需要像这里一样做一些事情：

但我不知道如何

你能帮帮我吗？

Answer 1

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

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

Answer 2

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

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

使用 .filter() 函数的方法看起来很短，并根据 redux 的要求生成一个新的数组实例。

Redux 购物车示例

Redux shopping cart example

reactjs

redux