我有我的单元测试reducers,正如我所说的那样.但是,当我在浏览器中进行调试时,我想检查是否已正确调用我的操作以及是否已相应地修改状态.
我正在寻找类似的东西:
window._redux.store
...在浏览器中,我可以在控制台上键入它并检查事情的进展情况.
我怎样才能做到这一点？
如果您已经运行了反应开发人员工具,则可以使用components而无需更改代码库.
注意:您必须首先在开发人员工具窗口中打开react devtool以使其工作,否则您将收到Components错误
打开开发者工具
单击"React"选项卡
确保选择了提供者节点(或最顶层节点)
然后键入store或store进入您的控制台
let store = createStore(yourApp);
window.store = store;
现在您可以从控制台中的window.store访问商店,如下所示:
window.store.dispatch({type:"MY_ACTION"})
您可以使用Redux Book中描述的日志记录中间件:
/**
* Logs all actions and states after they are dispatched.
*/
const logger = store => next => action => {
console.group(action.type)
console.info('dispatching', action)
let result = next(action)
console.log('next state', store.getState())
console.groupEnd(action.type)
return result
}
let createStoreWithMiddleware = applyMiddleware(logger)(createStore)
let yourApp = combineReducers(reducers)
let store = createStoreWithMiddleware(yourApp)
或者,您可以将日志记录更改为仅附加到全局数组(您的window._redux),并在需要有关特定状态的信息时查看数组.
京公网安备 11010802040832号 | 京ICP备19059560号-6 