如何使用Redux devTools调试redux存储有多大？

Question

我现在在 Chrome 中运行 redux devtools，但它每秒都在不断变化（因为我们每秒轮询 API 并更新 redux）。我想看看我们加载了多少数据到 redux 中，以及回收了多少数据/垃圾。我有什么选择？我可以以某种方式打印状态的 JSON，或者以其他方式记录正在使用的内存量吗？

Answer 1

我可以以某种方式打印状态的 JSON，或者以其他方式记录正在使用的内存量吗？ 对于第一个，您可以尝试以下 -->

• 暂停 Redux DevTools 中的更新：

在 Chrome 中打开 Redux DevTools。 由于状态每秒都会更新，因此很难实时检查。 单击“暂停”按钮（看起来像“||”符号）可将状态冻结在特定点。 这使您可以检查当前状态，而无需不断更改。

• 将状态导出为 JSON：

在 Redux DevTools 中，查找导出或保存状态的选项。 这会将整个 Redux 状态下载为 JSON 文件。 在文本编辑器或 JSON 查看器中打开 JSON 文件以查看所有数据。 检查文件大小： JSON 文件的大小可以让您了解 Redux 存储中有多少数据。

对于第二个，你可以这样做-->

您可以创建自定义 Redux 中间件来计算并记录每个操作后状态的大小。 这是一个示例代码，您可以参考 -->

const stateSizeLogger = store => next => action => {
  const result = next(action);
  const state = store.getState();
  const stateSize = new TextEncoder().encode(JSON.stringify(state)).length;
  console.log(`Current Redux state size: ${stateSize} bytes`);
  return result;
};

并将此中间件添加到您的商店。

import { createStore, applyMiddleware } from 'redux';

const store = createStore(
  rootReducer,
  applyMiddleware(stateSizeLogger)
);

希望有帮助！