像 Redux 所说的那样处理大型数组答案

【问题标题】：Dealing with large arrays as Redux states像 Redux 所说的那样处理大型数组
【发布时间】：2017-11-12 23:17:11
【问题描述】：

想象一下，你有大量的项目作为你的 redux 状态的一部分。现在每次添加/删除项目时，我都想进行一些 API 调用。目前我正在做这样的事情：

 class Mixer extends React.Component{

   componentWillReceiveProps(nextProps) {
     // compare two massive arrays
     // API call
   }

   render() {
     //whaeva
   }
 }


 MixerContainer = connect(
   mapStateToProps,
   mapDispatchToProps
 )(Mixer)

比较两个大数组（nextProps 与当前 props）并在添加新项目或删除项目时进行 API 调用。这似乎非常低效，但是有没有更好的方法来处理这个问题？

【问题讨论】：

阵列有多大？也许您可以分离数组并在单独的 reducer 中实现逻辑？
嗯，目前它不是很大，但为了争论，我们假设它有数千个项目。不知道你在单独的 reducer 中实现逻辑是什么意思，你能举个例子吗？
因此假设有获取许多帖子的 API 调用，并且每个帖子包含许多 cmets。然后，您可以将博客和 cmets 存储在商店中的单独属性中。但我想这里真正的问题是如何比较 2 个潜在的海量数组。也许您可以使用 Map 来跟踪商店的属性（它成为 Mixer 组件中的道具）。
我建议您在添加或删除项目的地方进行 API 调用，以避免比较数组

标签： arrays reactjs redux state

【解决方案1】：

您应该始终在行动中做这些事情。创建一个调用 API 调用的操作，在服务器返回成功后，更改客户端存储。这样，您可以防止出现客户端和服务器数据集不同的情况。服务器应该永远是你的真实来源。

【讨论】：

我也在考虑这个。我真的希望 API 调用对状态“反应”，而不是依赖于操作。
我没有看到在操作中调用 API 有任何问题。比较两个巨大的数组对于您的应用程序的性能似乎不是一个好主意。你如何比较它们？
我可能最终会这样做，我只是认为这不是 React 方式。例如，将来可能有其他方法来设置状态，而不是通过“添加”或“删除”操作。这意味着我必须在每一项操作中进行 API 调用。如果可以以高性能的方式做到这一点，我宁愿更喜欢对状态做出反应的行为。我会等待其他答案然后接受。
你不用复制逻辑，只要updateArray('remove', content)这样做一个动作，然后根据参数调整调用即可。取决于你对数组的逻辑是什么。
顺便说一句。我认为服务器应该是你的真相来源。因为如果您从客户端的数组中删除某些项目，但 API 调用由于某种原因会失败，您将遇到问题……这就是为什么您应该始终在操作中执行此操作，然后在成功后更新客户端存储.