如何在没有 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（在 chrome 中）

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

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

Answer 2

我想最简单的方法是在您创建商店后立即将其分配给全局 window：

const myStore = createStore();

if(process.env.NODE_ENV !== 'production') {
  window.store = myStore;
}

以后您可以在浏览器控制台中访问它，例如：

store.getState();

Answer 3

访问商店的最简单方法可能是使用 react-redux 中的 Provider。当我们将 store 传递给这个组件时，它使元素树下的所有子元素都可以使用它。通过 React 的上下文 API.

可以使用商店

所以在 Provider 的子组件中，我们现在可以做类似的事情

render() {
  const { store } = this.context;
  console.log(store)
  return(
  ...
  )
}

这与 react-redux 的连接 HOC 能够访问商店的方式相同。

您还知道 Redux 有一个很棒的 devtools chrome extension 吗？这保留了我们的状态和操作的历史记录，因此您可以跟踪应用程序生命周期的变化。这可能是最好的解决方案！！

Answer 4

我处于无法为 window 分配任何东西的情况，而且我也没有机会使用 React 或 redux 开发工具。

这显然没有记录并且很脆弱，但它似乎在几个具有 redux 的不同站点上对我有用。在控制台中输出对状态的访问（稍作调整的存储）。

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

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)

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

How to get content of Redux store in console without devtools?

javascript

reactjs

redux

react-devtools