将大型集合保存到存储时，Redux 似乎很慢

Question

简化情况：

我正在开发一个实时应用程序，需要将大约 650 个对象作为数组保存到

Redux store

中。

该应用程序拥有 ReactJs - Redux - ImmutableJs - Reselect 技术堆栈。但我已经发现实际将数据保存到 Redux 存储中的速度会变慢。

使用 ImmutableJs 是无关紧要的。我已经创建了使用和不使用这个框架的 POC，并且性能没有改变。

以下代码是我的

SearchReducer

const searchReducer = (state = fromJS(defaultState), action) => {
  switch(action.type) {
    case SEARCHMUSICIAN:      
      const { searchTerm, results } = action.payload;

      return state.set('searchTerm', searchTerm)
                  .set('foundMusicians', fromJS(results));

    default:
      return state;
  }
};

什么可以解释经济放缓？对于更大的集合或同时处理大量数据，Redux 实际上会很慢吗？ 我是否缺少可以提高 Redux 性能的标志或配置？

Answer 1

我想我们现在已经解决了。 显然 Redux 对于大数组来说非常慢。 我已将分派的有效负载转换为对象，现在保存到存储的延迟从 2-3 秒变为 30-50 毫秒。

我的猜测是，当使用较大的数组时，Redux 在内部优化方面遇到了麻烦。 当数组大小增加时，保存到存储的延迟也会呈指数增长。当使用对象并增加属性或键的数量时，也不会发生这种情况。

Answer 2

我确信 Redux 可以处理超过 100MB 的存储对象。通常，导致应用程序变慢的原因不是存储中数据的大小，而是在 Redux 中存储和屏幕上渲染之间应用于数据的方法和映射器。 请检查： 1-您是否正在映射/转换数据格式以进行渲染？如果答案是肯定的，请尝试在每个数据生命周期内制作一次。 2-检查您是否正在mapStateToProps函数中进行数据转换/格式化（这些将在每次渲染时完成） 3-检查您是否正在通过广泛使用 deepClones 来更改对大对象的引用。深度克隆将使用新的内存，并具有不同的内存引用，从而导致越来越多的渲染。 3-检查您是否使用了不被应用程序的多个子组件共享的 Redux 状态变量。如果是这样，他们一定是当地政府