Redux在将大量集合保存到存储中时似乎变慢了

Question

Redux在将大量集合保存到存储中时似乎变慢了

javascriptreactjsreduxreact-redux

4

简化情况:

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

该应用程序使用ReactJs-Redux-ImmutableJs-Reselect技术栈。但是我已经确定了减速实际上是将数据保存到Redux store中。

使用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的性能？

- Recipe

可能是Redux处理大对象的性能问题的重复问题。 - Mikhail Litvinov

2

@MikhailLitvinov 不是重复的问题。我已经看到了其他帖子。然而，建议是关于从存储中读取和使用记忆化。在我的情况下，读取、检索和显示数据不是问题。实际保存到存储中才是问题... - Recipe

你计时了那两个set语句的持续时间吗（每个端上都有console.time）？这650个对象内部的数据有多大？存储本身并没有做特殊的事情来减慢代码，redux内部的代码非常简单。你是如何测量性能的？你的UI性能可能取决于其他因素，比如redux-connect、PureComponent的使用等等。 - Dominic

1

你的示例代码没有任何console.log语句，所以我不确定你是如何得出redux是瓶颈而不是重新渲染650个项目的结论的，因为你提供了一个具有650个项目的新状态来（重新）渲染。使用connect与返回该项的记忆化函数可能会跳过一些渲染，但没有代码就只是猜测。此外，fromJS可能每次都返回一个新引用。假设你在客户端进行过滤。如果你在服务器上搜索，那么每次都会得到一个新的引用。 - HMR

1

我们想要表达的是，Redux 本身并不慢，它是一个小而简单的库，运行一个函数，如果该函数返回一个新对象，则会触发所有监听器的更新。你需要确定瓶颈并更具体化，将 650 个对象设置到纯 JavaScript 对象（即 Redux）中并不慢。我之前曾经将 10,000 个嵌套对象设置到 Redux 存储中，并没有出现任何问题。 - Dominic

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Recipe · Accepted Answer

我认为我们现在已经解决了问题。显然，Redux在处理大型数组时非常慢。我将分发的有效负载转换为对象，现在保存到存储的延迟从2-3秒降至30-50毫秒。

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