redux devtools未捕获错误:操作必须是普通对象。使用自定义中间件进行异步操作

redux devtools未捕获错误:操作必须是普通对象。使用自定义中间件进行异步操作,redux,react-redux,redux-devtools,Redux,React Redux,Redux Devtools,这就是我创建店铺的方式 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

这就是我创建店铺的方式

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;
}
但我的应用程序停止工作,我可以找到原因。有什么建议吗

您可以尝试以下方法:

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

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

DevTools的增强器应该始终是compose中的最后一个,因此它将了解其他中间件和增强器

此外,如果要远程分派操作,还应添加:

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

如.

所示,如果没有
中间件
初始状态
,我应该如何编写相同的代码?您可以用空对象(如{})替换初始状态,但要处理异步操作,您需要一些自定义中间件,您可以编写自己的,或者使用redux thunk packageI中的thunk中间件,我只使用了一个参数:
window.devToolsExtension
。使用
initalState
作为空对象的好技巧。然而与此同时,我已经安装了saga中间件。