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

Question

This is how I create my store

import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import { routerMiddleware } from 'react-router-redux';
import rootReducer from '../reducers';

const debugware = [];
if (process.env.NODE_ENV !== 'production') {
  const createLogger = require('redux-logger');
  debugware.push(createLogger({
    collapsed: true
  }));
}

export default function configureStore(history, initialState) {
  const store = createStore(
    rootReducer,
    initialState,
    window.devToolsExtension ? window.devToolsExtension() : f => f,
    applyMiddleware(thunkMiddleware, routerMiddleware(history), ...debugware),
  );

  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('../reducers', () => {
      const nextRootReducer = require('../reducers/index').default;
      store.replaceReducer(nextRootReducer);
    });
  }

  return store;
}

But my app stop working and I can find why. Any suggestion please.

score 4 · Accepted Answer · answered Jul 20 '16 at 07:07

4

You can try this:

import { createStore, applyMiddleware, compose } from 'redux';

const store = createStore(
  rootReducer,
  initialState, 
  compose(
    applyMiddleware(thunkMiddleware, routerMiddleware(history), ...debugware),
    window.devToolsExtension ? window.devToolsExtension() : f => f
  )
);

answered Jul 20 '16 at 07:07

steppefox

1,784
2
14
19

How should I write the same code without `middleware` and `initialState`? – Adrian Moisa Mar 19 '17 at 19:28
1

You can replace initialState with empty object like {}, but to handle async actions, you need some custom middleware, you could write your own, or use thunkMiddleware from redux-thunk package – steppefox Mar 21 '17 at 14:04
I managed to use compose with only one argument: `window.devToolsExtension`. Good trick with `initalState` as empty object. However in the meantime I already installed saga middleware. – Adrian Moisa Mar 21 '17 at 15:20

score 1 · Answer 2 · answered Aug 05 '16 at 09:13

The DevTools' enhancer should be always the last in compose, so it will know about other middlewares and enhancers.

Additionally, in case you want to dispatch actions remotely, you should also add:

if (window.devToolsExtension) window.devToolsExtension.updateStore(store)

As indicated in troubleshooting.

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

2 Answers2