title: How to update the global state using redux and remove an item from the global state
body: <p>I am trying to learn redux but I am stuck in this concept on how do i properly use the <code>deleteCar</code> that i have in actions. The reducer works well but the problem is at the global state of <code>cars</code>, how can I update the state of cars in Car component and then to call the <code>deleteCar</code> function and modify the state of <code>cars</code>. When i print the cars state in <code>Car</code> component, it is empty.</p>
  
  <p>I have Component called Cars that is the parent component of Car (single car)</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from "react";
  import Car from "../Car";
  import { connect } from "react-redux";
  
  class Cars extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        cars: []
      };
    }
    componentDidMount() {
      fetch(url)
        .then(response =&gt; response.json())
        .then(data =&gt; this.setState({ cars: data }));
    }
    render() {
      const { cars } = this.state;
      return (
        &lt;div&gt;
          {cars.map(c =&gt; (
            &lt;Car key={c.id} make={c.make} price={c.price} id={c.id} /&gt;
          ))}
        &lt;/div&gt;
      );
    }
  }
  
  const mapStateToProps = reduxStoreState =&gt; {
    return {
      cars: reduxStoreState.cars
    };
  };
  
  export default connect(mapStateToProps)(Cars);
  
  </code></pre>
  
  <p>Single car</p>
  
  <pre><code>import React from "react";
  import { deleteCar } from "../../actions/delete";
  import { connect } from "react-redux";
  
  const Car = ({ deleteCar, make, price, id }) =&gt; {
    return (
      &lt;div className="card m-4"&gt;
        &lt;div className="row"&gt;
          &lt;div className="col"&gt;
            &lt;h3&gt;{make}&lt;/h3&gt;
            &lt;p&gt;{price}&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div className="row"&gt;
          &lt;button
            className="btn btn-danger"
            onClick={() =&gt;
              deleteCar({
                id: id,
                make: make,
                price: price
              })
            }
          &gt;
            Delete Car
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  const mapStateToProps = reduxStoreState =&gt; {
    return {
      cars: reduxStoreState.cars
    };
  };
  
  export default connect(mapStateToProps, { deleteCar })(Car);
  
  </code></pre>
  
  <p>Action</p>
  
  <pre><code>import { DELETE } from "../constants";
  export const deleteCar = (payload) =&gt; {
    return {
      type: DELETE,
      payload: payload
    };
  };
  </code></pre>
  
  <p>Reducer</p>
  
  <pre><code>import { ADD, DELETE, EDIT } from "../constants";
  
  export default function(state = { cars: [] }, action) {
    switch (action.type) {
      case ADD:
        return {
          ...state,
          cars: [...state.cars, action.payload]
        };
      case DELETE:
        return {
          ...state,
          cars: state.cars.filter(obj =&gt; obj !== action.payload)
        };
      case EDIT:
        return {
          ...state,
          cars: action.payload
        };
      default:
        return state;
    }
  }
  </code></pre>