我正在做一个关于 React-Redux 购物车的项目。我目前正在尝试构建功能以允许用户更新添加到购物车的商品数量。我已经能够使用“从购物车中删除”功能。我一直在寻找不同的方法,但似乎所有的购物车教程都停留在“添加到购物车”!所以我一直试图自己解决这个问题,但在网上找到的例子很少。谁能指出我正确的方向?
这是最初发布在 Github 上的购物车教程: https://github.com/reactjs/redux/tree/master/examples/shopping-cart
这是我一直想弄清楚的:
ProductItem.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>
)
ProductsContainer.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)
reducer/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
}
}
谁能给我指明正确的道路?如果我完全走在正确的道路上,或者建议任何可以提供帮助的教程或网站?
最佳答案
首先,我认为您应该在状态中包含quantity
,并将数量逻辑与inventory
分开。您的状态树可能如下所示:
{
cart: [
{id: 1, quantity: 3},
{id: 3, quantity: 2}
],
products: [
{id: 1, inventory: 10, ...},
{id: 2, inventory: 10, ...},
{id: 3, inventory: 10, ...}
]
}
Cart 存储添加到购物车的产品,products 包含所有可用产品。
考虑到这个状态树,我们可以使用以下action creators:
function quantityUp(id, val){
return {type: 'QTY_UP', id, up: val}
}
function quantityDown(id, val){
return {type: 'QTY_DOWN', id, down: val}
}
现在,我们可以创建我们的 reducer 。由于我们将数量与库存分开,因此我们也应该将 reducer 分开以反射(reflect)这一逻辑。
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;
}
};
以下操作也应该是您的购物车 reducer 的一部分:ADD_TO_CART、REMOVE_FROM_CART
如果需要,products reducer 应该自行修改 products。一种情况是在购买商品后修改商品的库存。
让我们先创建 Action 创建器:
//cart will be an array
function purchase(cart){
return {type: 'PURCHASE', cart}
}
现在我们可以创建 reducer 了:
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;
}
};
现在我们可以将产品添加到您的购物车,编辑购物车中每个产品的数量,并在购买产品后更新您所在州的每个产品的库存。
关于javascript - React-Redux 购物车 - 减少/增加商品数量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49604096/