如何在没有devtools的控制台中获取Redux商店的内容？

Question

安装React Devtools后,我可以通过以下方式获得商店:

$r.store.getState()

如何在没有React Devtools的情况下做到这一点？

Answer 1

选项1

您可以window在处于开发模式时附加商店，然后您可以从控制台访问 if。

if(env === 'dev') { // only an example - you'll need to tailor this to your build system
    window.store = store;
}

现在您可以直接从控制台访问它：

store.getState()

选项 2（镀铬）

1. 店铺创建后console.log(store)。
2. 在控制台中，右键单击商店，然后选择Store as global variable。
3. 您将获得一个新变量，名称为temp1（或 tempX，如果您创建了其他变量）。
4. 现在您可以使用temp1.getState().

不要忘记清除控制台语句（通常作为构建的一部分完成）。

Answer 2

我当时无法为窗口分配任何内容，也没有机会使用react或redux开发工具。

这显然是无证的，而且很脆弱，但是它似乎在一些具有redux的不同站点上对我有用。在控制台中输出对状态（具有细微调整的存储）的访问。

假设您正在渲染对id为的dom节点做出反应react-root。

const appStates = []
const reactRoot = document.getElementById('react-root')
let base

try {
    base = reactRoot._reactRootContainer._internalRoot.current
} catch (e) {
    console.log('Could not get internal root information from reactRoot element')   
}

while (base) {
    try {
        state = base.pendingProps.store.getState()
        // This also sometimes works...
        // state = base.stateNode.store.getState()
        appStates.push(state)
    } catch (e) {
        // no state
    }
    base = base.child
}

console.log('Application States', appStates)