在FLUX模式中如何以及在何处更新和检索数据?

时间:2015-03-08 12:22:33

标签: facebook reactjs reactjs-flux flux

我一直在思考这一段时间,并且未能成功找到有关后续api(ajax)请求主题的任何信息。

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

我的问题涉及两个行动:

  1. 更新用户
  2. 检索所有用户
  3. 我很清楚,React组件启动视图操作以更新用户,从而通过调度程序产生API请求。我不清楚的是第二次检索用户的请求发生的地方。

    查看Facebook's Chat示例...

    • 是否会在Web API工具中发生?
    • 商店在收到更新通知后会这样做吗?
    • 组件在收到更改通知后是否执行此操作?

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

1 个答案:

答案 0 :(得分:1)

您不需要执行两次XHR调用的操作。您实际上只需要一个导致两个XHR调用的操作。要注意倾向于认为你应该引起一连串的行动 - 这正是Flux创建的反模式,以避免。

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

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

再次,下一步可以乐观地发生,也可以在从服务器返回数据后发生。在这种情况下,商店将进行XHR调用以检索用户列表以更新它所拥有的所有相关记录。

但是就像上一次XHR一样,你会想要根据第二个XHR的成功或错误创建两个新动作。

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

如果我没有提及,如果你能控制服务器端代码,那么我应该简单地构建一个终点来更新用户并返回新的用户列表 - - 这将使客户端代码更简单,整个事情将更有效。