使用 React 和 Redux 处理数据密集型请求的最佳方式是什么？答案

【问题标题】：What is the best way to handle data-intensive requests with React and Redux?使用 React 和 Redux 处理数据密集型请求的最佳方式是什么？
【发布时间】：2019-12-05 01:09:24
【问题描述】：

我的大部分页面本质上是一个由 40-100 个组件组成的列表，每个组件包含大约 11 KB 的数据（JSON 格式）。问题是 11 KB 的 100 倍等于 1.1 MB，对于旧移动设备上的浏览器来说，存储在 Redux 状态下似乎有点太占用内存了。它使我华丽的 CSS 动画看起来不连贯，按钮需要大约一秒钟来切换开/关状态。

因为每个组件的高度正好是 148 像素，所以我的第一个想法是使用虚拟列表 (Virtuoso)，它一次只渲染尽可能多的项目（大约 5-8 个顶部）。这使得第一次渲染速度更快，但没有让动画更流畅，这肯定证实了这主要是内存问题。

所以，如果我不能在状态对象中存储和保存所有数据，那么我需要做一些类似于 Virtuoso 的事情，并且只保留渲染当前屏幕所需的数据。现在，我不太确定 Redux 内部是如何工作的，但是如果状态是不可变的，那是否意味着曾经存在的所有东西都保留在那里？这是否意味着我正在尝试做一些不可能的事情，或者至少是反模式？

哦，更糟糕的是，数据需要每 3 秒更新一次，这意味着组件有时会消失，只会在下一次更新时重新出现。我尚未测试这会如何影响 Virtuoso 滚动，但我并不完全期望完美的即插即用行为。

我会很感激关于如何使用 redux 和（可能）它的中间件来解决这个问题的想法，因为它是我熟悉 atm 并切换到例如的唯一架构。 Flux 意味着必须从头开始学习并重写大约 2000 行 redux 代码。

【问题讨论】：

不可变只是意味着你不能（不应该）改变当前对象，但是reducer在那里建立一个新的状态，它可以使用旧状态的浅拷贝，只要它没有改变。因此，您可以创建一个新数组并添加到其中。 { ...state, yourList: [...state.yourList, ...newListItems] }
理想情况下，您应该提供您现在正在使用的流程的minimal reproducible example，以便有人可以指出您可以改进它的地方。但即便如此，在codereview.stackexchange.com 上可能会更好
每个组件挂载的时候可以获取到它的数据吗？这可能是使用 redux-thunk 的好地方，因为您可以定义将调用您的 api 并使用响应发送更新的操作。
@Brian 这有点棘手，因为当前组件一旦用户滚动经过它就会被卸载。理论上我可以，但我觉得这会导致太多不必要的请求，除非我取消虚拟列表并使用无限滚动。这最终会导致我现在遇到的同样问题，即如何在内存中存储 100 个活动组件。
@EmileBergeron 我试图弄清楚如何展示一个示例，但是如果不使用我的 API 并制作相同的动画密集布局，它并没有真正解决我遇到的问题的规模。除非我链接到我的实际项目页面，这是一种专有的。 :[

标签： javascript reactjs redux react-redux

【解决方案1】：

我从未使用过 Virtuoso、react-virtualized 或 react-window，但这看起来是您可以使用其中一个库解决的问题。

你的 React 应用程序的其他部分是否关心你在列表中呈现的数据？

如果不是，则将数据放入此组件的本地状态，而不是 Redux。
如果他们这样做了，也许尝试在组件挂载时在 localStorage 中设置这个巨大的列表，在卸载时取消设置，并使用组件的本地状态来选择开始/结束索引来选择数据片段。

另请参阅：https://blog.jakoblind.no/is-using-a-mix-of-redux-state-and-react-local-component-state-ok/

【讨论】：

谢谢！是的，不幸的是，整个页面都以数据为中心。我没有想过localStorage，这是一个值得一试的好主意。再次感谢您的时间:)