如何结合createStoreWithMiddleware集成Redux DevTools与Redux Thunk

我来帮你搞定这个问题！要把redux-devtools-extension和你现有的createStoreWithMiddleware结合起来其实很简单，只需要调整一下中间件和DevTools增强器的组合方式就行。

你原来的代码里是直接用applyMiddleware包装createStore，现在我们要借助composeWithDevTools来同时整合中间件和DevTools的增强能力，具体修改如下：

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import "normalize.css/normalize.css"
import "./styles/styles.scss";
import AppRouter from './routers/AppRouter';
import reducers from './reducers';
import {AUTH_USER} from "./actions/types";
import reduxThunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';

// 关键修改：用composeWithDevTools包裹applyMiddleware，同时整合中间件和DevTools增强器
const createStoreWithMiddleware = composeWithDevTools(applyMiddleware(reduxThunk))(createStore);
const store = createStoreWithMiddleware(reducers);

const token = localStorage.getItem('token');
if(token){
  store.dispatch({type:AUTH_USER});
}

ReactDOM.render(
  <Provider store={store}>
    <AppRouter />
  </Provider>
  , document.getElementById('app'));

简单说明： #

• composeWithDevTools会帮你把Redux DevTools的增强功能和中间件（这里是redux-thunk）组合在一起，不需要额外的复杂配置
• 这样修改后，你的store既保留了redux-thunk处理异步action的能力，又能完美对接浏览器里的Redux DevTools，方便你调试状态变化、追踪action触发记录等

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