文章/答案/技术大牛

发布

社区首页 >问答首页 >我在理解Redux购物车示例中的removeFromCart实现时遇到了问题

问我在理解Redux购物车示例中的removeFromCart实现时遇到了问题
EN

Stack Overflow用户

提问于 2019-04-16 23:32:32

回答 2查看 84关注 0票数 0

我不确定在哪里以及如何实现函数removeProduct，以及如何定义Redux购物车示例https://github.com/reduxjs/redux/tree/master/examples/shopping-cart中的removeProductFromCart功能。

到目前为止，我尝试了以下内容：

action.js

           const deleteFromCart = productId => ({
                 type: types.REMOVE_PRODUCT,
                 productId
            })

           export const removeProduct = productId => (dispatch)=> {
                  dispatch(deleteFromCart(productId))
            }

cartReducer.js

           const addedIds = (state = initState.addedIds, action) => {
                   switch (action.type) {
                       case ADD_PRODUCT:

                       if(state.indexOf(action.productId) !== - 1){
                             return state
                       }
                       return [ ...state, action.productId ]

                       case REMOVE_PRODUCT:

                           return state.filter(productId => action.productId !== productId)

                       default:
                           return state
                    }
              }

          const quantityById = (state = initState.quantityById, action ) => {
                  switch (action.type) {
                       case ADD_PRODUCT:
                  const { productId } = action
                  return {
                        ...state,
                        [productId]:(state[productId] || 0) + 1
                  }
                       case REMOVE_PRODUCT:
                  return { 
                        ...state,
                        [productId]: state[productId] - 1
                  } 
                     default:
                         return state
                  }
             }

Cart.js

     const Cart = ({products, total, onCheckoutClicked, 
     onDeleteFromCart }) => {

     const hasProducts = products.length > 0

     const nodes = hasProducts ? (

     products.map(product =>

         <div key={product.id}>

            <Product
             titulo={product.titulo}
             price={product.price}
             quantity={product.quantity}
             />
            <button
             onClick={onDeleteFromCart}
             disabled={product.inventory < 0 ? 'disabled' :'' }>
            {product.inventory < 0 ? 'Sin productos' : 'Sacar del carrito'}
             </button>

          </div>
         )
       ):(<p>Agregá productos al carrito</p>)

       return (
            <div>
                <h3>Tu Carrito</h3>
                <div>{nodes}</div>
                <p>Total: &#36;{total}</p>
                <button onClick={onCheckoutClicked} disabled={hasProducts ? '' : 'disabled'}>Checkout</button>
             </div>
                )      
               }

          Cart.propTypes = {
           products:PropTypes.array,
           total:PropTypes.string,
           onCheckoutClicked:PropTypes.func,
           onDeleteFromCart:PropTypes.func
      }

    export default  Cart

CartContainer.js

const CartContainer = ({products, total, checkout, removeProduct}) => (

  <Cart
     products={products}
     total={total}
     onCheckoutClicked={()=>checkout(products)}
     onDeleteFromCart={()=>removeProduct(products.map(product => product.id))}
  />
)

CartContainer.propTypes = {
  products: PropTypes.arrayOf(PropTypes.shape({
    id:PropTypes.number.isRequired,
    titulo: PropTypes.string.isRequired,
    price: PropTypes.number.isRequired,
    quantity: PropTypes.number.isRequired
  })).isRequired,
  total:PropTypes.string,
  checkout:PropTypes.func.isRequired,
  removeProduct:PropTypes.func.isRequired
}

const mapStateToProps = (state) => ({
  products: getCartProducts(state),
  total: getTotal(state)
})

export default connect(
  mapStateToProps,
  { checkout, removeProduct }
)(CartContainer)

当我分派动作REMOVE_PRODUCT时，此代码返回一个数组...所以我不会结束理解如何让works..the代码不拖拽错误，但是我如何才能只返回产品的id呢？array..its是否正确地实现了CartContainer和cart中的功能？...makes对my...but的意义我看到了一些代码，其中的实现是用productitems.js实现的

提前感谢

redux

reactjs

回答 2

Stack Overflow用户

发布于 2019-04-17 00:29:28

有几个你可能想要修复的东西。

首先，你的action.js有点多余。你应该能够拥有：

export const removeProduct = productId => ({
             type: types.REMOVE_PRODUCT,
             productId
        })

接下来，在你的reducer中，你需要确保你扩展了你的状态，然后过滤掉指定的数组。我假设reducer的初始状态如下所示：

const INITIAL_STATE = {
  products: [] <--- An array of products in the cart
}

如果这是正确的，那么reducer中的case应该如下所示：

case REMOVE_FROM_OBJECT_ARRAY:
        return {
            ...state,
            products: state.products.filter(product => product.id !== action.productId),
        };

之后，当您需要将removeProduct操作传递给<Cart/>组件时，它应该是：

onDeleteFromCart={this.props.removeProduct}

因为您要将该动作分配给道具。

最后，您需要将产品的ID传递到触发操作的按钮的onClick方法中：

onClick={onDeleteFromCart(product.id)}

我希望这能让你朝着正确的方向前进。

编辑

尝试转换为类：

class CartContainer extends React.Component {
    constructor(props) {
      super(props);
    }
   // You may not need the constructor
}

handleRemoveProduct = (e, id) => {
  e.preventDefault()
  this.props.removeProduct(id)
}

render() {
  return(
    <Cart
      products={products}
      total={total}
      onCheckoutClicked={()=>checkout(products)}
      onDeleteFromCart={()=>removeProduct(products.map(product => 
      product.id))}
    />
  )
}

CartContainer.propTypes = {
  products: PropTypes.arrayOf(PropTypes.shape({
    id:PropTypes.number.isRequired,
    titulo: PropTypes.string.isRequired,
    price: PropTypes.number.isRequired,
    quantity: PropTypes.number.isRequired
  })).isRequired,
  total:PropTypes.string,
  checkout:PropTypes.func.isRequired,
  removeProduct:PropTypes.func.isRequired
}

const mapStateToProps = (state) => ({
  products: getCartProducts(state),
  total: getTotal(state)
})

export default connect(
  mapStateToProps,
  { checkout, removeProduct }
  )(CartContainer)

然后通过以下方式将此函数传递给您的<Cart/>组件：

onDeleteFromCart={this.handleRemoveProduct}

然后在你的按钮中：

onClick={(e) => onDeleteFromCart(e, id)}

希望这对你有用。

票数 1

Stack Overflow用户

发布于 2019-04-16 23:58:45

我还不能评论，对此我很抱歉。我稍后会删除这篇文章。我不明白你到底想做什么。您想从数组中移除Id还是返回id？

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/55711787

复制

相似问题

问我在理解Redux购物车示例中的removeFromCart实现时遇到了问题
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我在理解Redux购物车示例中的removeFromCart实现时遇到了问题EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我在理解Redux购物车示例中的removeFromCart实现时遇到了问题
EN