Redux DevTools配置失效求助及相关代码说明

你已经找对了方向，只需要调整一下compose的使用方式，就能让Redux DevTools正常生效了。原来的代码里直接用Redux默认的compose组合中间件和重置功能，现在要把它替换成DevTools提供的增强版compose，这样才能让工具和你的store配置完美兼容。

修改后的完整代码如下：

var persistedState = loadState();
// 优先使用DevTools的增强compose，没有的话用默认compose
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
// 用composeEnhancers替代原来的compose来组合所有中间件和增强器
var createStoreWithMiddleware = composeEnhancers(
  applyMiddleware(thunk, loadingBarMiddleware(), errorBarMiddleware()),
  reduxReset()
)(createStore);
export var store = createStoreWithMiddleware(reducers, persistedState);

核心要点： #

• window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__是Redux DevTools浏览器插件提供的特殊compose函数，它能同时处理中间件、store增强器（比如你的reduxReset）和DevTools的调试能力。
• 如果用户没安装DevTools插件，代码会自动 fallback 到Redux默认的compose，完全不影响原有功能的正常运行。
• 一定要把所有需要组合的中间件和增强器都放进composeEnhancers的参数里，不能再单独用原来的compose包裹。

这样修改后，打开浏览器的开发者工具，找到Redux标签，就能看到你的store状态变化、action记录等调试信息了。

内容的提问来源于stack exchange，提问作者faraz