Actions must be plain objects while using redux thunk

Question

I am using Redux thunk to dispatch multiple actions. I have a store.js file

// store.js
import rootReducer from '../reducers/setInitData'; // reducer file
import { applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';
const middleware = applyMiddleware(thunk);

export default createStore(rootReducer, middleware, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

I have an app.js

import React from 'react';
import { render } from 'react-dom';
import  { Provider }  from 'react-redux';

import CampaignCreate  from './CampaignCreate' // component
import store from './store/store' // store.js

store.dispatch((dispatch) => {
   dispatch({
     type: 'SET_STATE',
     payload : {

     }
   })
   dispatch({
       type : 'DISPLAY_REACT_COMPONENTS',
       payload : {
        dataLoadComplete : true
       }
   })
});
render(
 <Provider store={store}>
   <div id="campaign-init">
      <CampaignCreate />
   </div>
 </Provider>,
 document.getElementById('campaigns-react')
)

When I run my code I see the following error in my console:

Uncaught Error: Actions must be plain objects. Use custom middleware for async actions.

What is going wrong with the above code?

Answer 1

It's not the correct way to configure middlewares with redux devtools, according to redux devtools' readme, you should do this:

// don't forget import { compose } from 'redux'
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, composeEnhancers(middleware));