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

我有自己的单元测试reducers但是,当我在浏览器中调试时,我想检查我的动作是否被正确调用以及状态是否已被相应地修改。

我正在寻找类似的东西:

window._redux.store

...在浏览器中,这样我就可以在控制台上键入该信息并检查运行情况。

我该如何实现?

梅十三2020/03/13 17:02:03

首先,您需要在window对象中定义存储(可以将其放置在configureStore文件中):

window.store = store;

然后,您只需要在控制台中编写以下内容:

window.store.getState();

希望对您有所帮助。

An2020/03/13 17:02:03

如果您使用的是Next JS,则可以通过以下方式访问商店:window.__NEXT_REDUX_STORE__.getState()

您还可以分派动作,只需查看您在window.__NEXT_REDUX_STORE__

GOMandy2020/03/13 17:02:03

使用React开发人员工具:

const store = [...__REACT_DEVTOOLS_GLOBAL_HOOK__.reactDevtoolsAgent.internalInstancesById.values()].find(e=>e.elementType.name==="Provider").pendingProps.store
西里小卤蛋2020/03/13 17:02:03

如何在任何网站上查看Redux商店,而无需更改代码

更新2019年11月

自从我最初回答以来,react devtools已经更改。componentschrome devtools中的新标签仍然包含数据,但您可能需要搜索更多内容。

  1. 打开chrome devTools
  2. 选择react devtool的Components标签
  3. 单击最顶部的节点,然后在右侧列store中显示
  4. 在树上重复步骤3,直到找到store(对我来说这是第4级)
  5. 现在,您可以按照以下步骤操作 $r.store.getState()

屏幕截图示例

原始答案

如果您正在运行React开发人员工具$r.store.getState();,则无需更改代码库即可使用

注意:您必须先在开发人员工具窗口中打开react devtool才能进行此工作,否则会出现$r is not defined错误

  1. 打开开发人员工具
  2. 点击反应标签
  3. 确保选择了提供者节点(或最高节点)
  4. 然后在控制台中输入$r.store.getState();$r.store.dispatch({type:"MY_ACTION"})
Davaid小哥2020/03/13 17:02:03

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

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

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