title: "Actions must be plain objects. Use custom middleware for async actions." with react/redux
body: <p>I've encountered this error and spent the last few hours trying to figure it out. I've looked at all the questions that appear to be duplicates - but they don't solve the issue.</p>
  
  <p>In my react/redux app, when I made an ajax request in one of my actions, it throws this error out:
  <code>Uncaught Error: Actions must be plain objects. Use custom middleware for async actions.</code></p>
  
  <p>My store creation looks like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { composeWithDevTools } from 'redux-devtools-extension';
  import reducers from './reducers';
  import thunkMiddleware from 'redux-thunk';
  import { applyMiddleware, createStore } from 'redux';
  
  export default createStore(reducers, composeWithDevTools(
   applyMiddleware(thunkMiddleware)
  ));</code></pre>
  </div>
  </div>
  </p>
  
  <p>The relevant reducer looks like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import * as actions from './../../actions/tools/vehicle-lookup';
  
  const defaultState = {
   vrm: void 0,
   isLoading: false,
   response: void 0,
   error: void 0,
  };
  
  export default function (state = defaultState, action) {
   switch (action.type) {
    case actions.VEHICLE_LOOKUP:
     return { ...state, isLoading: true, vrm: action.vrm };
  
    case actions.VEHICLE_LOOKUP_SUCCESS:
     return { ...state, isLoading: false, payload: action.payload, error: void 0 };
  
    case actions.VEHICLE_LOOKUP_FAILURE:
     return { ...state, isLoading: false, error: action.error, response: void 0 };
  
    default: return state;
   }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>The relevant action looks like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import axios from 'axios';
  
  export const VEHICLE_LOOKUP = 'VEHICLE_LOOKUP';
  export const VEHICLE_LOOKUP_SUCCESS = 'VEHICLE_LOOKUP_SUCCESS';
  export const VEHICLE_LOOKUP_FAILURE = 'VEHICLE_LOOKUP_FAILURE';
  
  export function fetchVehicleLookup(vrm: string, jwt: string) {
   return function (dispatch) {
    dispatch(requestVehicleLookup());
  
    axios.create({
     timeout: 4000,
    })
     .post('/*api url*', {
      action: '*method*',
      body: { vrm },
     })
     .then(response =&gt; response.data)
     .then(json =&gt; dispatch(receiveVehicleData(json)))
     .catch(error =&gt; dispatch(receiveVehicleDataFailure(error)));
   };
  }
  
  function requestVehicleLookup() {
   return { type: VEHICLE_LOOKUP };
  }
  
  function receiveVehicleData(payload: object) {
   return { type: VEHICLE_LOOKUP_SUCCESS, payload };
  }
  
  function receiveVehicleDataFailure(error: object) {
   return { type: VEHICLE_LOOKUP_FAILURE, error };
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>My package versions are:</p>
  
  <pre><code>"axios": "^0.16.0",
  "react": "^15.4.2",
  "react-addons-css-transition-group": "^15.5.0",
  "react-addons-transition-group": "^15.5.0",
  "react-dom": "^15.4.2",
  "react-hot-loader": "^3.0.0-beta.6",
  "react-redux": "^5.0.3",
  "react-router": "^4.0.0",
  "react-router-dom": "^4.0.0",
  "redux": "^3.6.0",
  "redux-devtools-extension": "^2.13.0",
  "redux-promise": "^0.5.3",
  "redux-promise-middleware": "^4.2.0",
  "redux-thunk": "^2.2.0",
  </code></pre>