在 FLUX 模式中，数据的更新和检索是如何以及在哪里发生的？

Posted 2023-02-22

【中文标题】在 FLUX 模式中，数据的更新和检索是如何以及在哪里发生的？

【英文标题】：How and where does updating and retrieving of data happen in the FLUX pattern?

【发布时间】：2015-05-09 16:24:56

【问题描述】：

我一直在思考这个问题，但未能找到有关后续 api (ajax) 请求主题的任何信息。

假设我们有用户列表，其中一个已更新。更新用户后，我想检索整个更新的用户列表。

我的问题涉及两个动作：

更新用户 检索所有用户

我很清楚，React 组件启动视图操作以更新用户，从而通过调度程序产生 API 请求。我不清楚第二个检索用户的请求发生在哪里。

查看Facebook's Chat 示例...

Web API 实用程序中会出现这种情况吗？ 商店在收到更新通知后会这样做吗？ 组件在收到更改通知后是否执行此操作？

目前我会在 API 中执行此操作，但我想知道是否有任何经过测试的模式可以解决此问题。

【问题讨论】：

我认为this 是一个可以遵循的合理模式。

@WiredPrairie 谢谢，我去看看。

【参考方案1】：

您不需要两个操作来执行两个 XHR 调用。您实际上只需要一个导致两个 XHR 调用的操作。谨防认为您应该引发一连串动作的倾向——这正是 Flux 旨在避免的反模式。

更新整个用户列表的副作用应该是UserStore 响应USER_UPDATED 操作所做的事情。

UserStore 将更新用户记录。这可以乐观地发生，也可以在服务器调用完成后发生。更新用户服务器端的 XHR 调用可以在 updateUser() 操作创建者或存储中发生。但是，您需要为该调用的成功/错误创建操作，以便商店能够做出适当的响应。

同样，下一步可以乐观地进行，也可以在您从服务器取回数据之后进行。在这种情况下，商店将进行 XHR 调用以检索用户列表，以更新其持有的所有相关记录。

但与上一个 XHR 一样，您需要根据第二个 XHR 的成功或错误创建两个新操作。

创建新操作可使您的应用程序非常灵活和有弹性。因此，如果任何其他商店需要知道这些 XHR 的结果，它就已经在接收该数据了。

如果我没有提到这一点，那我就失职了，如果您可以控制服务器端代码，您应该简单地构建一个端点来更新用户并返回新的用户列表——这将使客户端代码更简单，整个事情会更有效率。

【讨论】：

@fischerwebdev 谢谢，您的回答对我非常有帮助，增加了我对 Flux 的信心。由于我确实可以控制服务器端代码，因此我将首先尝试该解决方案。乐观的解决方案也很有意义，如果 updateUser 请求返回成功就足够了。