在 Console Tab 查看 Redux store

虽然可以安装 chrome 插件在控制台查看 redux store， 但有时候不想打开 Redux tab 或者 store 中数据很多，查看不方便，就希望直接在 Console tab 中查看。

这种需求，可以实现一个 redux middleware ，在每次 dispatch 后，从 store 中获取到数据保存到 window 变量上即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { createStore, applyMiddleware } from 'redux';

const store = createStore(
  counterReducer,
  applyMiddleware(
    ...[
      ({ dispatch, getState }) => {
        window._store = getState();
        window._dispatch = dispatch;
        return next => action => {
          const res = next(action);
          // 存储到 window 上
          window._store = getState();
          return res;
        };
      }
    ]
  )
);

之后直接在 Console 面板即可查看 redux store，chrome 自带的智能提示让字段输入也是异常方便。

智能提示

点击体验

发布于