title: How to use .dispatch in react redux?
body: <p>I have the following </p>
  
  <p><strong>CatsPage.js:</strong></p>
  
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  import {connect} from 'react-redux';
  //import * as catActions from '../../actions/catActions';
  import CatList from './CatList';
  import {loadCats} from '../../actions/catActions';
  
  class CatsPage extends React.Component {
    componentDidMount () {
      this.props.dispatch(loadCats())
    }
    render() {
      return (
        &lt;div&gt;
          &lt;h1&gt;Cats&lt;/h1&gt;
          &lt;div&gt;
            &lt;CatList cats={this.props.cats} /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  CatsPage.propTypes = {
    cats: PropTypes.array.isRequired
  };
  
  function mapStateToProps(state, ownProps) {
    return {
      cats: state.cats
    };
  }
  
  export default connect(mapStateToProps)(CatsPage);
  </code></pre>
  
  <p><strong>catActions.js</strong></p>
  
  <pre><code>import * as types from './actionTypes';
  import catApi from '../api/CatsApi';
  
  export function loadCats() {
    return function(dispatch) {
      return catApi.getAllCats().then(cats =&gt; {
        dispatch(loadCatsSuccess(cats));
      }).catch(error =&gt; {
        throw(error);
      });
    };
  }
  
  export function loadCatsSuccess(cats) {
    return {type: types.LOAD_CATS_SUCCESS, cats};
  }
  </code></pre>
  
  <p>I'm getting the following error: 
  <code>Uncaught Error: Actions must be plain objects. Use custom middleware for async actions. Uncaught Error: Actions must be plain objects. Use custom middleware for async actions. at dispatch (createStore.js:166)</code></p>
  
  <p>I'm a newbie try to learn how to use React + Redux. What am I doing wrong that I need to fix to make the dispatch work and loadCats()?</p>
  
  <p>Thank you!</p>