代码: https://github.com/JanYLee/recruit-app/tree/demo/redux-devTools

    在chrome浏览器的拓展程序中先安装Redux DevTools
    image.png

    在代码中:

    • 创建store的时候判断是否有window.devToolsExtension
    • 使用redux内置方法compose结合thunk和window.REDUX_DEVTOOLS_EXTENSION

    image.png

    1. import { createStore, applyMiddleware, compose } from 'redux';
    2. import thunk from 'redux-thunk';
    3. import { counter } from './index.redux';
    5. const reduxDevTools = window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__() : undefined;
    6. // 新建store
    7. const store = createStore(counter, compose(applyMiddleware(thunk), reduxDevTools));

    就可以在浏览器中看到效果了:
    test.gif