redux devtools未捕获错误:操作必须是纯对象.使用自定义中间件执行异步操作

Question

这就是我创建商店的方式

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

但我的应用程序停止工作，我可以找到原因。有什么建议吗。

Answer 1

你可以试试这个：

import { createStore, applyMiddleware, compose } from 'redux';
const store = createStore(
  rootReducer,
  initialState, 
  compose(
    applyMiddleware(thunkMiddleware, routerMiddleware(history), ...debugware),
    window.devToolsExtension ? window.devToolsExtension() : f => f
  )
);

Answer 2

DevTools的增强程序应该始终是compose中的最后一个，这样它就可以了解其他中间件和增强程序。

此外，如果你想远程调度操作，你还应该添加：

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

如故障排除中所示。