javascript - Redux + ImmutableJS - 如何垃圾收集太大的商店？

Question

我将 Redux 与 ImmutableJS 结合使用。在我的 SPA(相当复杂的管理系统)中，用户经常将大量数据加载到存储中(许多表有数千行)。在打开多个页面并且存储中有太多数据后，应用程序变得非常慢，因为 ImmutableJS 存储可能包含数百万个条目。

我怎样才能从商店中“删除”一些东西，这样数据就不会拖慢应用程序的速度？我知道这会违背其主要原则，但您还能如何解决它？

使用带有例如 jQuery 的通用网站，这将非常容易。每次页面刷新时，所有不必要的东西都会被垃圾收集。因此，一个页面2-3千个条目是可以的，但是当打开一个新页面时，reducer加载了新数据，但仍然引用旧数据。

当然，我不想强​​迫用户重新加载页面。

Answer 1

三重检查这确实是内存膨胀，而不仅仅是不必要的重新渲染/重新计算

Redux 中的变异状态几乎总是真正的 bad idea因为它是图书馆的一种先决条件。我首先关心的是三重检查您是否确实遇到了内存问题，这是由于内存膨胀造成的，而不是由于不必要的重新渲染或不必要的计算造成的。我的意思是，如果您将大量数据保存在同一个地方，请确保您没有做一些导致 React 不必要地重新渲染或筛选过多数据的事情。

您可以通过司法使用 reselect 来解决该问题库或通过使用一些其他类型的内存，这些内存将以一种避免不必要的重新计算的方式从你的 reducer 中检索数据。同样，确保你不是 unnecessarily re-rendering every item仅在更改单行时在整个列表中。

摆脱对先前状态的引用

To get something to be garbage compiled in JavaScript, you just make sure that nothing is referencing it any longer .

如果您真的需要沿着这条路走下去，那么如果您愿意的话，不要让旧页面的数据“活着”是很重要的，因为 JavaScript 只会垃圾收集不再引用的东西。

Vanilla Redux 并没有保留以前的状态。它所做的只是将当前状态保存在 let 变量中，然后在从将操作分派(dispatch)到根 reducer 获取新状态后更改其值(参见 source code )。

所以，我会确保我没有使用像 redux 开发工具这样的东西 persists previous state .

然后在 reducer 中，创建一个新对象，它不以任何方式使用以前的数据，而是返回一个包含新数据的新对象:

const data = (state, action) => {
  switch (action.type) {
    case 'RETRIEVE_DATA_SUCCESS':
      return action.payload;
    default:
      return state
  }
}

我建议阅读 Chrome 的内存分析工具 here以确保它正常工作。