我有自己的单元测试reducers
。但是,当我在浏览器中调试时,我想检查我的动作是否被正确调用以及状态是否已被相应地修改。
我正在寻找类似的东西:
window._redux.store
...在浏览器中,这样我就可以在控制台上键入该信息并检查运行情况。
我该如何实现?
我有自己的单元测试reducers
。但是,当我在浏览器中调试时,我想检查我的动作是否被正确调用以及状态是否已被相应地修改。
我正在寻找类似的东西:
window._redux.store
...在浏览器中,这样我就可以在控制台上键入该信息并检查运行情况。
我该如何实现?
如果您使用的是Next JS,则可以通过以下方式访问商店:window.__NEXT_REDUX_STORE__.getState()
您还可以分派动作,只需查看您在window.__NEXT_REDUX_STORE__
使用React开发人员工具:
const store = [...__REACT_DEVTOOLS_GLOBAL_HOOK__.reactDevtoolsAgent.internalInstancesById.values()].find(e=>e.elementType.name==="Provider").pendingProps.store
自从我最初回答以来,react devtools已经更改。components
chrome devtools中的新标签仍然包含数据,但您可能需要搜索更多内容。
Components
标签store
中显示store
(对我来说这是第4级)$r.store.getState()
如果您正在运行React开发人员工具$r.store.getState();
,则无需更改代码库即可使用。
注意:您必须先在开发人员工具窗口中打开react devtool才能进行此工作,否则会出现$r is not defined
错误
$r.store.getState();
或$r.store.dispatch({type:"MY_ACTION"})
let store = createStore(yourApp);
window.store = store;
现在,您可以从控制台中的window.store访问商店,如下所示:
window.store.dispatch({type:"MY_ACTION"})
首先,您需要在
window
对象中定义存储(可以将其放置在configureStore
文件中):然后,您只需要在控制台中编写以下内容:
希望对您有所帮助。