title: Adding a 'delete from cart' action to my redux store
body: <p>I've been trying to add a 'delete from cart' action to my redux setup. So far I can add items to a whitelist I have set up in my <code>store</code> but I'm not sure on how to delete items from the cart. This is my <code>store</code>:</p>
  
  <pre><code>import { createStore, applyMiddleware, compose } from 'redux';
  import { persistStore, autoRehydrate } from 'redux-persist';
  import  reducer  from './reducers';
  import thunkMiddleware from 'redux-thunk';
  import {createLogger} from 'redux-logger';
  
  
  const store = createStore(
    reducer,
    undefined,
    compose(
      applyMiddleware(createLogger(), thunkMiddleware),
      autoRehydrate()
    )
  );
  
  persistStore(store, {whitelist: ['cart']});
  
  export default store; 
  </code></pre>
  
  <p>These are my <code>reducers</code>:</p>
  
  <pre><code>import {ADD_CART} from './actions';
  import { REHYDRATE } from 'redux-persist/constants';
  
  export default Reducer;
  
  var initialState = {
    cart:{},
    data: [],
    url: "/api/comments",
    pollInterval: 2000
  };
  
  function Reducer(state = initialState, action){
      switch(action.type){
          case REHYDRATE:
                  if (action.payload &amp;&amp; action.payload.cart) {
                      return { ...state, ...action.payload.cart };
                  }
              return state;
  
              case ADD_CART:
                  return {
                      ...state,
                      cart: [...state.cart, action.payload]
                  }
  
  
  
              default:
                  return state; 
      };
  }
  </code></pre>
  
  <p>And these are my <code>actions</code>:</p>
  
  <pre><code>export const ADD_CART = 'ADD_CART';
  
  export function addCart(item){
      return {
          type: ADD_CART,
          payload: item
      }
  };
  
  export function removeCart(item){
      return{
          type: REMOVE_CART,
          payload: item
      }
  };
  </code></pre>
  
  <p>In my <code>Cart</code> component is where I want to have a delete from cart button where you can choose a specific item to delete:</p>
  
  <pre><code>import React, { Component } from 'react';
  import {addCart} from './Shop'; 
  import { connect } from 'react-redux';
  
  export class Cart extends Component {
      constructor(props) {
          super(props);
          this.state = {items: this.props.cart,cart: [],total: 0};
      }
  
      ...
      render() {
          return(
              &lt;div className= "Webcart" id="Webcart"&gt;
                  {this.countTotal()}
              &lt;/div&gt;
          );
      }
  }
  
  const mapDispatchToProps = (dispatch) =&gt; {
      return {
          onCartAdd: (cart) =&gt; {
              dispatch(addCart(cart));
          },
      }
  }
  
  function mapStateToProps(state) {
    return { cart: state.cart };
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(Cart);
  </code></pre>
  
  <p>I want to be able to select an specific item from the <code>cart</code> array and delete it. I believe this should be done through an <code>action</code> with redux since my array is being saved in my <code>store</code>. How can I do this?</p>