当前位置:   jquery > 正文

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

javascript,reactjs,redux,https,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开发工具,前端开发工具,开发人员工具,站长工具

我有我的单元测试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),并在需要有关特定状态的信息时查看数组.

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/blog/jquery/detail/13715
推荐阅读
相关标签
  

闽ICP备14008679号