React-Redux 购物车 - 减少/增加商品数量

Question

我正在做一个关于 React-Redux 购物车的项目。我目前正在尝试构建功能以允许用户更新添加到购物车的商品数量。我已经能够让“从购物车删除”起作用。我一直在寻找不同的方法，但似乎所有购物车教程都停留在“添加到购物车”！所以我一直试图自己解决这个问题，但在网上找到的例子很少。有人能指出我正确的方向吗？

以下是最初发布在 Github 上的购物车教程： https: //github.com/reactjs/redux/tree/master/examples/shopping-cart

这就是我一直试图弄清楚的：

产品项目.js

const ProductItem = ({product, onAddToCartClicked, onRemoveFromCartClicked, onIncreaseQuanityClicked, onDecreaseQuantityClicked }) => (
  <div style={{ marginBottom: 20, marginLeft: 20}}>
  <Card>
    <CardBody>
    <Product
      title={product.title}
      price={product.price}
      inventory={product.inventory} />
    <Button color="primary"
      onClick={onAddToCartClicked}
      disabled={product.inventory > 0 ? '' : 'disabled'}>

      {product.inventory > 0 ? 'Add to cart' : 'Sold Out'}
    </Button>
          <Button color="success"
            onClick={onIncreaseQuanityClicked}
            disabled={product.inventory > 0 ? '' : 'disabled'}> +
          </Button>
          <Button color="danger"
            onclick={onDecreaseQuantityClicked} 
            disabled={product.inventory > 0 ? '' : 'disabled'}> - 
            </Button>

          <Button onClick={onRemoveFromCartClicked}>Remove</Button>
    </CardBody>
    </Card>
  </div>
)

产品容器.js

const ProductsContainer = ({ products, addToCart }) => (
  <ProductsList title="Products">
    {products.map(product =>
      <ProductItem
        key={product.id}
        product={product}
        onAddToCartClicked={() => addToCart(product.id)}
        onIncreaseQuantityClicked={() => increaseQuantity(product.id)} 
        onDecreaseQuantityClicked={() => decreaseQuantity(product.id)} />
    )}
  </ProductsList>
)

ProductsContainer.propTypes = {
  products: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.number.isRequired,
    title: PropTypes.string.isRequired,
    price: PropTypes.number.isRequired,
    inventory: PropTypes.number.isRequired
  })).isRequired,
  addToCart: PropTypes.func.isRequired,
  increaseQuantity: PropTypes.func.isRequired
}

const mapStateToProps = state => ({
  products: getVisibleProducts(state.products)
})

export default connect(
  mapStateToProps,
  { addToCart, increaseQuantity, decreaseQuantity }
)(ProductsContainer)

减速器/products.js

const products = (state, action) => {
  switch (action.type) {
    case ADD_TO_CART:
      return {
        ...state,
        inventory: state.inventory - 1
      }
    case REMOVE_FROM_CART:
      return {
        ...state,
        inventory: state.inventory + 1
      }
    case INCREASE_QUANTITY:
      return {
        ...state,
        //NOT SURE WHAT ELSE TO PUT HERE
      }
    case DECREASE_QUANTITY:
      return {
        ...state,
        NOT SURE WHAT ELSE TO PUT HERE EITHER
      }
    default:
      return state
  }
}

有人能指出我正确的道路吗？如果我走在正确的道路上，或者建议任何可以提供帮助的教程或网站？

Answer 1

首先，我认为你应该包括quantity在你的状态中，并将数量的逻辑与 分开inventory。您的状态树如下所示：

{
  cart: [
          {id: 1, quantity: 3},
          {id: 3, quantity: 2}
         ],
  products: [
          {id: 1, inventory: 10, ...},
          {id: 2, inventory: 10, ...},
          {id: 3, inventory: 10, ...}
            ]
}

购物车存储添加到购物车的产品，并且产品包含所有可用产品。

考虑到这个状态树，我们可以使用以下动作创建器：

function quantityUp(id, val){
  return {type: 'QTY_UP', id, up: val}
}
function quantityDown(id, val){
  return {type: 'QTY_DOWN', id, down: val}
}

现在，我们可以创建我们的减速器。由于我们将数量与库存分开，因此我们也应该将减速器分开以反映这一逻辑。

const cart = (state, action) => {
  switch(action.type){
    case 'QTY_UP':
      return Object.assign([], state.map(item => {
        if(item.id === action.id){
          item.quantity += action.up;
        }
        return item;
      ));
    case 'QTY_DOWN':
      return Object.assign([], state.map(item => {
        if(item.id === action.id){
          item.quantity -= action.down;
        }
        return item;
      ));
     default:
       return state;
   }
};

以下操作也应该是您的购物车减速器的一部分：ADD_TO_CART, REMOVE_FROM_CART

如果需要的话，产品减速器应该负责修改产品本身。一种情况是在购买商品后修改商品的库存。

让我们首先创建动作创建者：

//cart will be an array
function purchase(cart){
  return {type: 'PURCHASE', cart}
}

现在我们可以创建减速器：

const products = (state, action) => {
  switch(action.type){
    case 'PURCHASE':
      const ids = action.cart.map(item => item.id);
      return Object.assign([], state.map(item => {
        if(ids.includes(item.id)){
          item.inventory -= action.cart.filter(p => p.id === item.id)[0].quantity;
        }
        return item;
      }));
    case default:
      return state;
    }
  };

现在，我们可以将产品添加到您的购物车，编辑购物车中每种产品的数量，并在购买产品后更新您所在州的每种产品的库存。