调试时，我可以从浏览器控制台访问 Redux 商店吗?

问题描述

我对 reducers 进行了单元测试.但是，在浏览器中调试时，我想检查是否正确调用了我的操作以及状态是否已相应修改.

I have unit tests for my reducers. However, when I'm debugging in the browser, I want to check if my actions have been called correctly and whether the state has been modified accordingly.

我正在寻找类似的东西:

I'm looking for something like:

window._redux.store

...在浏览器中，这样我就可以在控制台上输入并检查事情的进展.

... in the browser so I can type that on the console and check how things are going.

我怎样才能做到这一点?

How can I achieve that?

推荐答案

如何在任何网站上查看redux store，无需修改代码

2019 年 11 月更新

自从我最初的回答以来，react devtools 已经发生了变化.chrome 的 devtools 中新的 components 选项卡仍然有数据，但您可能需要多搜索一点.

How to view redux store on any website, with no code changes

Update Nov 2019

The react devtools have changed since my original answer. The new components tab in chrome's devtools still has the data, but you may have to search a little bit more.

1. 打开 chrome devTools
2. 选择 react devtool 的 Components 标签
3. 点击最上面的节点并在右侧栏中查看要显示的store
4. 在树中重复第 3 步，直到找到 store(对我来说这是第 4 级)
5. 现在您可以使用 $r.store.getState()
按照以下步骤操作

1. open chrome devTools
2. select react devtool's Components tab
3. click on the top-most node and look in right-hand column for store to be shown
4. repeat step 3 down the tree until you find the store (for me it was the 4th level)
5. Now you can follow the steps below with $r.store.getState()

如果您正在运行 React 开发者工具，您可以使用 $r.store.getState(); 而无需更改您的代码库.

If you have react developer tools running you can use $r.store.getState(); with no changes to your codebase.

注意:你必须首先在你的开发者工具窗口中打开 react devtool 才能使这个工作，否则你会得到一个 $r is not defined 错误>

Note: You have to open the react devtool in your developer tools window first to make this work, otherwise you will get a $r is not defined error

1. 开放开发者工具
2. 点击 React 标签
3. 确保选择了提供者节点(或最顶层节点)
4. 然后在控制台中输入 $r.store.getState(); 或 $r.store.dispatch({type:"MY_ACTION"})

这篇关于调试时，我可以从浏览器控制台访问 Redux 商店吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！