title: React/Redux Sort Function Not Updating State
body: <p>I have a simple React/Redux app that displays a list of cars based on my Rails API.</p>
  
  <p>I'm trying to add a sort feature that alphabetizes the cars by their name.</p>
  
  <p>While my variable <code>orgArray</code> is in fact alphabetized when I console.log it, my Redux dev tool says <code>states are equal</code> after clicking the sort button - therefore my UI isn't updated.</p>
  
  <p>Here's my code:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import CarCard from '../components/CarCard';
  import CarForm from './CarForm';
  import './Cars.css';
  import { getCars } from '../actions/cars';
  import { sortCar } from '../actions/cars';
  
  Component.defaultProps = {
    cars: { cars: [] }
  }
  
  class Cars extends Component {
    constructor(props) {
      super(props)
        this.state = {
          cars: [],
          sortedCars: []
        };
    }
  
  sortAlphabetically = () =&gt; {
      console.log("sort button clicked")
      const newArray = [].concat(this.props.cars.cars)
      const orgArray = newArray.sort(function (a,b) {
        var nameA = a.name.toUpperCase();
        var nameB = b.name.toUpperCase();
            if (nameA &lt; nameB) {
              return -1;
            } else if (nameA &gt; nameB) {
              return 1;
            } 
              return 0;
            }, () =&gt; this.setState({ cars: orgArray }))  
              console.log(orgArray)
              this.props.sortCar(orgArray);
            }
  
      componentDidMount() {
          this.props.getCars()
          this.setState({cars: this.props.cars})
          }
  
  
      render() {
          return (
          &lt;div className="CarsContainer"&gt;
      &lt;h3&gt;Cars Container&lt;/h3&gt; 
          &lt;button onClick={this.sortAlphabetically}&gt;Sort&lt;/button&gt;
          {this.props.cars.cars &amp;&amp; this.props.cars.cars.map(car =&gt; &lt;CarCard key={car.id} car={car} /&gt;)}  
          {/* {this.state.cars.cars &amp;&amp; this.state.cars.cars.map(car =&gt; &lt;CarCard key={car.id} car={car} /&gt;)}           */}
          &lt;CarForm /&gt;
      &lt;/div&gt;
      );
    }
  }
  
   const mapStateToProps = (state) =&gt; {
     return ({
      cars: state.cars
    })
  }
  
  const mapDispatchToProps = (dispatch) =&gt; {
    return {
      sortCar: (cars) =&gt; dispatch(sortCar(cars)),
      getCars: (cars) =&gt; dispatch(getCars(cars))
    }
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(Cars);
  </code></pre>
  
  <p>I would have guessed that <code>mapStateToProps</code> or adding the <code>sortedCars: []</code> in my initial <code>setState</code> would have worked.</p>
  
  <p>Essentially, my props are getting updated, but I need my state to be updated as well - though I'm not sure what I'm missing. </p>
  
  <p>UPDATED:</p>
  
  <p>Here's my action creator and Async action if it helps:</p>
  
  <pre><code>const sortCars = cars =&gt; {
   return {
      type: 'SORT_CARS',
      cars
    }
  }
  
  // Async Actions
  
  export const sortCar = (cars) =&gt; {
    console.log(cars, 'cars object');
    return dispatch =&gt; {
      dispatch(sortCars(cars))
     }
  }
  </code></pre>
  
  <p>UPDATE:</p>
  
  <p>Here's the Reducer as well:</p>
  
  <pre><code>export default (state = {cars: []}, action) =&gt; {
  switch(action.type) {
      case 'GET_CARS_SUCCESS':
  
      return Object.assign({}, state, {cars: action.payload})
  
      case 'CREATE_CAR_SUCCESS':
  
      return Object.assign({}, state, {cars: action.payload})
  
      case 'REMOVE_CAR;':
      return state.filter(car =&gt; car.id !== action.id)
  
      case 'SORT_CARS;':
      return Object.assign({}, state, { cars: action.payload})
  
      default:
          return state;
    }
  }
  </code></pre>