Daily Archives: February 11, 2018

说个react-redux生产环境追踪action,state流的黑魔法

用react,react-redux开发前端的时候,在开发环境,我们会enable redux dev tool extension,方便我们在线调试问题,redux这种单向数据流,状态驱动的好处就体现的淋漓尽致了。但是如果在生产环境,通常都会disable掉这样的浏览器扩展,一旦有了问题,我们很难在线去追踪action流和store的变化,有时候debug一个问题还挺痛苦的。这里讲个黑魔法,关键点就是在生产环境取得store对象的引用。当然可以在代码中直接在window对象上设置store对象,这是最简单的方法,但是这样等于把store对象直接暴露给全世界,一般开发过程都是不允许的。如果不设置全局的store对象,那我们能不能从React的$r对象上索引到store呢?打开页面,尝试在Chrome console直接输入 $r.store,它会报告store是undefined。

你需要额外的几个步骤,下面操作基于Chrome,React Developer Tools extension,不管是不是生产环境,React扩展总是可用的。

  1. 打开React Developer Tools extension,选中store节点

2. 这个时候在$r.store就是可用的了,打开console,输入,

3. 随便浏览下页面,每次store的变化都会在console里打印出来了,你还可以手工dispatch action。

4. 如果你还想把action流也打印出来,就需要加一个很小的reducer在你的code里面,像下面的actionStream.js一样。熟悉redux的话,这是很简单直接的事情,就是在redux上的store上加了一个状态去记住每一次reducer调用时候的action参数。

//actionStream.js
export default function actionStream(state, action) {
    return action;
}
...
//combineReducers.js
import action from 'actionStream.js';
... //import other reducers
export combineReducers({...,action,...});

然后,subscribe的语句变成下面就好,

$r.store.subscribe(()=>{
    var state=$r.store.getState();
    console.log(state.action);
    console.log(state)
});