title: React/Redux: Error: Actions must be plain objects. Use custom middleware for async actions
body: <p>Here is the code of my Component <code>UserHandler</code></p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import PropTypes from 'prop-types';
  
  import * as actionCreators from '../../store/actions/actions';
  
  class UserHandler extends Component {
    componentDidMount() {
      const { onInitUsers } = this.props;
      onInitUsers();
    }
  
    render() {
      // some code
      return (          
          {/* SOME JSX */}
      );
    }
  }
  
  const mapStateToProps = state =&gt; ({
    //    state to props mapping
  });
  
  const mapDispatchToProps = dispatch =&gt; ({
    onUserEdition: username =&gt; dispatch(actionCreators.editUser(username)),
    onUserSelection: username =&gt; dispatch(actionCreators.fetchSelectedUser(username)),
    onInitUsers: () =&gt; dispatch(actionCreators.initUsers()),
  });
  
  // PropTypes definition and defaultProps
  
  export default connect(mapStateToProps, mapDispatchToProps)(UserHandler);
  </code></pre>
  
  <p>And in my <code>actionCreators</code> file, here's what I defined:</p>
  
  <pre><code>const initUsersStart = createAction(INIT_USERS_START);
  const setUsers = createAction(SET_USERS, users =&gt; ({ users }));
  const initUsersError = createAction(INIT_USERS_ERROR, error =&gt; ({ error }));
  
  
  const initUsers = () =&gt; (dispatch) =&gt; {
    dispatch(initUsersStart());
    return axios.get('/users')
      .then(
        response =&gt; dispatch(setUsers(response.data)),
      )
      .catch(
        error =&gt; dispatch(initUsersError(error)),
      );
  };
  </code></pre>
  
  <p>When I comment the <code>onInitUsers();</code> call in the <code>componentDidMount()</code> function, I no more have the error. I want to understand why this is raising this error.</p>
  
  <p>Finally, here's how my I create my <code>store</code>:</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import { BrowserRouter } from 'react-router-dom';
  import { createStore, applyMiddleware } from 'redux';
  import { Provider } from 'react-redux';
  import thunk from 'redux-thunk';
  
  import App from './App';
  import registerServiceWorker from './registerServiceWorker';
  import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
  import reducer from './store/reducers/reducers';
  
  const store = createStore(
    reducer, /* preloadedState, */
    applyMiddleware(thunk),
    /* eslint-disable no-undef */ /* eslint-disable no-underscore-dangle */
    window.__REDUX_DEVTOOLS_EXTENSION__ &amp;&amp; window.__REDUX_DEVTOOLS_EXTENSION__(),
    /* eslint-enable */
  );
  
  // const store = createStore(reducer);
  
  ReactDOM.render(
    &lt;Provider store={store}&gt;
      &lt;BrowserRouter&gt;
        &lt;App /&gt;
      &lt;/BrowserRouter&gt;
    &lt;/Provider&gt;,
    /* eslint-disable no-undef */
    document.getElementById('root'),
    /* eslint-enable */
  );
  registerServiceWorker();
  </code></pre>
  
  <p>Please note that I have done some research before to find out what may be the root cause of such an error, and it seems that it could emanate from several causes. I checked the ones I found, but it didn't help.</p>