当前位置:  开发笔记 > 编程语言 > 正文

在调试时,我可以从浏览器控制台访问Redux存储吗?

如何解决《在调试时,我可以从浏览器控制台访问Redux存储吗?》经验,为你挑选了3个好方法。

我有我的单元测试reducers,正如我所说的那样.但是,当我在浏览器中进行调试时,我想检查是否已正确调用我的操作以及是否已相应地修改状态.

我正在寻找类似的东西:

window._redux.store

...在浏览器中,我可以在控制台上键入它并检查事情的进展情况.

我怎样才能做到这一点?



1> S.Kiers..:

如果您已经运行了反应开发人员工具,则可以使用components无需更改代码库.

注意:您必须首先在开发人员工具窗口中打开react devtool以使其工作,否则您将收到Components错误

    打开开发者工具

    单击"React"选项卡

    确保选择了提供者节点(或最顶层节点)

    然后键入storestore进入您的控制台


看起来$ r指的是Dev Tools中“组件”部分中当前选择的组件。我似乎无法通过`$ r`访问整个`store`,也许是因为我到处都使用钩子,但是我看到了我的组件可以看到的一部分存储,这几乎与好,有时更重要!
注意:为此,您需要将`state`存储为根组件的属性.如果您按照[指示](https://redux.js.org/basics/usage-with-react#passing-the-store)并将``作为顶级组件,这将有效精细.移动它只是有点儿!
尝试$ r.state.store.getState()

2> Adrian Silve..:

let store = createStore(yourApp); window.store = store;

现在您可以从控制台中的window.store访问商店,如下所示:

window.store.dispatch({type:"MY_ACTION"})


并且还可以访问状态:`window.store.getState()`

3> Sean Vieira..:

您可以使用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),并在需要有关特定状态的信息时查看数组.

推荐阅读
yzh148448
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有