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

Question

我正在使用Redux和ImmutableJS.在我的SPA(非常复杂的管理系统)中,用户经常将大量数据加载到存储中(许多表的数千行).打开多个页面并在商店中存储过多数据后,应用程序变得非常慢,因为ImmutableJS商店甚至可以包含数百万个条目.

如何从商店"删除"某些内容,以便数据不会减慢应用程序的速度？我知道这将违背其主要原则,但你怎么解决呢？

使用具有例如jQuery的通用网站,这将非常简单.每次刷新页面时,所有不必要的内容都会被垃圾回收.因此,一个页面的2-3,000个条目就可以了,但是当打开一个新页面时,reducer会加载新数据,但旧的数据仍然被引用.

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

Answer 1

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

在 Redux 中改变状态几乎总是一个非常糟糕的主意，因为它是库的一种先决条件。我的第一个担心是三重检查您是否确实由于内存膨胀而不是由于不必要的重新渲染或由于不必要的计算而遇到内存问题。我的意思是，如果您将大量数据保存在同一个地方，请确保您没有做一些导致 React 不必要地重新渲染事物或筛选过多数据的事情。

您可以通过司法使用reselect库或使用某种其他类型的记忆来解决该问题，这些记忆将以一种避免不必要的重新计算的方式从您的减速器中检索数据。同样，请确保您不会在更改单行时不必要地重新渲染整个列表中的每个项目。

摆脱对先前状态的引用

要在 JavaScript 中对某些内容进行垃圾编译，您只需确保不再引用它。

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

Vanilla Redux 并没有在引擎盖下保持以前的状态。它所做的只是将当前状态保持在一个let变量中，然后在通过将操作分派到根 reducer 获得新状态后更改其值（请参阅源代码）。

所以，我会确保我不会使用像 redux dev tools 这样的东西，它会保留以前的 state。

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

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

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

Answer 2

我建议不要将整个数据保留在存储中，而是保留指向内存解决方案（本地存储、REDIS 等）的指针。我会使用PouncDB并将修订号仅存储_rev在我的商店中。