CODEWITHSUNDEEP
reduxreact-reduxredux-devtools
Jean
Jean

Reputation: 5411

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

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.

Upvotes: 3

Views: 3981

Answers (2)

Zalmoxisus
Zalmoxisus

Reputation: 161

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.

Upvotes: 1

steppefox
steppefox

Reputation: 1844

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
  )
);

Upvotes: 4

Related Questions