title: React-Redux Shopping Cart - Decrease/Increase Item Quantity
body: <p>I am doing a project on the React-Redux shopping cart. I am currently trying to build out functionality to allow a user to update the quantity of items being added to the Shopping Cart. I've already been able to get "Remove from Cart" to work. I've been searching around for different ways of doing it, but it seems that all of the Shopping Cart tutorials stop at "Add to Cart"! So I've been trying to puzzle through it on my own, but found very few examples online. Can anyone point me in the right direction?</p>
  
  <p>Here's the shopping cart tutorial originally posted on Github:
  <a href="https://github.com/reactjs/redux/tree/master/examples/shopping-cart" rel="nofollow noreferrer">https://github.com/reactjs/redux/tree/master/examples/shopping-cart</a></p>
  
  <p>Here's what I've been trying to figure out:</p>
  
  <p>ProductItem.js</p>
  
  <pre><code>const ProductItem = ({product, onAddToCartClicked, onRemoveFromCartClicked, onIncreaseQuanityClicked, onDecreaseQuantityClicked }) =&gt; (
    &lt;div style={{ marginBottom: 20, marginLeft: 20}}&gt;
    &lt;Card&gt;
      &lt;CardBody&gt;
      &lt;Product
        title={product.title}
        price={product.price}
        inventory={product.inventory} /&gt;
      &lt;Button color="primary"
        onClick={onAddToCartClicked}
        disabled={product.inventory &gt; 0 ? '' : 'disabled'}&gt;
  
        {product.inventory &gt; 0 ? 'Add to cart' : 'Sold Out'}
      &lt;/Button&gt;
            &lt;Button color="success"
              onClick={onIncreaseQuanityClicked}
              disabled={product.inventory &gt; 0 ? '' : 'disabled'}&gt; +
            &lt;/Button&gt;
            &lt;Button color="danger"
              onclick={onDecreaseQuantityClicked} 
              disabled={product.inventory &gt; 0 ? '' : 'disabled'}&gt; - 
              &lt;/Button&gt;
  
            &lt;Button onClick={onRemoveFromCartClicked}&gt;Remove&lt;/Button&gt;
      &lt;/CardBody&gt;
      &lt;/Card&gt;
    &lt;/div&gt;
  )
  </code></pre>
  
  <p>ProductsContainer.js</p>
  
  <pre><code>const ProductsContainer = ({ products, addToCart }) =&gt; (
    &lt;ProductsList title="Products"&gt;
      {products.map(product =&gt;
        &lt;ProductItem
          key={product.id}
          product={product}
          onAddToCartClicked={() =&gt; addToCart(product.id)}
          onIncreaseQuantityClicked={() =&gt; increaseQuantity(product.id)} 
          onDecreaseQuantityClicked={() =&gt; decreaseQuantity(product.id)} /&gt;
      )}
    &lt;/ProductsList&gt;
  )
  
  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 =&gt; ({
    products: getVisibleProducts(state.products)
  })
  
  export default connect(
    mapStateToProps,
    { addToCart, increaseQuantity, decreaseQuantity }
  )(ProductsContainer)
  </code></pre>
  
  <p>reducer/products.js</p>
  
  <pre><code>const products = (state, action) =&gt; {
    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
    }
  }
  </code></pre>
  
  <p>Can anyone point me in the right path? If I'm even on the right path at all, or suggest any tutorials or websites that could help?</p>