使用 Chrome 开发工具的控制台打印/修改 Redux 商店

Question

我发现能够通过 Chrome 开发工具的控制台打印/修改 Redux 存储很有用，但是为此我必须将存储复制到窗口组件中，如下所示：

window.store = store;

render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById("root")
);

这样我以后可以使用控制台打印例如带有 window.store.getState() 的商店的内容：

如何通过控制台直接访问提供者内部的商店？

Answer 1

我想提出一个替代方案：使用 Redux Devtools。它们可作为 Chrome 或 Firefox 扩展程序使用，允许您查看当前和所有过去的状态以及所有已调度的操作。
如果您遵循官方建议并为您的 Redux 代码使用 Redux Toolkit（现代 Redux 多年来不再使用手写的 switch..case reducers，尽管不幸的是过时的教程显示了这一点；如果您需要最新的教程使用the official Redux tutorial)，使用configureStore 甚至会为您正确设置开发工具。