Question

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

我正在寻找类似的东西：

window._redux.store

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

我怎样才能做到这一点？

Answer 1

如果您已经开始运行开发人员工具，则可以使用$r.store.getState(); 不对代码库进行更改。

注意：您必须先在开发人员工具窗口中打开react devtool才能使其正常工作，否则会出现$r is not defined错误

打开开发人员工具
点击“React”标签
确保选择提供者节点（或最顶层节点）
然后在您的控制台中输入$r.store.getState();或$r.store.dispatch({type:"MY_ACTION"})

Answer 2

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

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

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

Answer 3

推荐的解决方案对我不起作用。

正确的命令是：

$r.props.store.getState()

Answer 4

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

您还可以调度操作，只需查看{{ 1}}

Answer 5

如果您希望查看存储状态以进行调试，可以执行以下操作：

#import global from 'window-or-global'
const store = createStore(reducer)
const onStateChange = (function (global) {
  global._state = this.getState()
}.bind(store, global))
store.subscribe(onStateChange)
onStateChange()
console.info('Application state is available via global _state object.', '_state=', global._state)

Answer 6

使用React开发人员工具：

const store = [...__REACT_DEVTOOLS_GLOBAL_HOOK__.reactDevtoolsAgent.internalInstancesById.values()].find(e=>e.elementType.name==="Provider").pendingProps.store

Answer 7

首先，您需要在window对象中定义存储（可以将其放置在configureStore文件中）：

window.store = store;

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

window.store.getState();

希望对您有帮助。

在调试时，我是否可以从浏览器控制台访问Redux存储？

7 个答案: