在 React+Flux 中异步处理不影响视图的数据

Posted 2023-02-22

【中文标题】在 React+Flux 中异步处理不影响视图的数据

【英文标题】：Asynchronously handling data which does not affect the view in React+Flux

【发布时间】：2016-04-28 02:02:13

【问题描述】：

我正在编写一个 React（实际上是 React Native）应用程序，它在本地存储数据并将其提交给后端进行处理。更具体地说，它允许用户下订单产品，如果提交失败，例如，用户当前未登录，则必须存储数据并稍后重新提交到后端。

应用程序是使用 Flux 数据流构建的。我已经阅读了很多有关 Flux 的信息，但我仍然无法理解如何处理这种情况：

用户下单：React 组件调用 Action Creator 方法并传入订单数据 Action Creator 将订单异步提交到后端 订单提交失败（例如，因为用户尚未登录） 错误已修复（例如，用户登录） 数据必须自动重新提交到后端

在步骤 #3-5 之间数据位于何处？我可以想到两种可能的方法来处理这个问题，但我不确定根据 Flux 哪种方法是正确的。这是第一个：

动作创建者创建一个 ORDER_SUBMIT_FAILED 动作并将订单数据附加到它。 订单存储接收操作并将订单存储在“待处理订单”列表中。 用户登录，并生成 LOGIN_SUCCESS 操作。 订单商店也收到此操作，并重新提交“待处理订单”。

但我不明白订单商店如何将数据重新提交到网络。根据Should flux stores, or actions (or both) touch external services?，我的商店是哑数据存储库，所有网络活动都发生在 Action Creators 中。 Store 是否应该将数据传回给 Action Creator？但这似乎违反了 Flux。

另一个是：

Action Creator 加载登录屏幕并向其传递回调。 登录屏幕处理登录过程，并在成功完成后调用回调。 回调（到 Action Creator）允许它重新提交失败的订单。

但使用回调似乎也不是很像通量。

React/Flux way to handle permission sensitive actions with login flows 讨论了类似的情况，但重点关注如何首先检查登录。接受的答案建议遵循上面第一个建议的流程，但没有回答我在那里提出的问题。

谢谢！

【参考方案1】：

这是我处理该问题的方式。不确定它是否遵循任何建议，但对我来说效果很好。

最初，ORDER_SUBMIT 操作仅由本地 OrderStore 执行。它在本地以挂起状态保存。从那里它通过第二个异步操作发送到后端。我实际上有一个同步过程，它可能在不同的存储上收集多个更新，并将它们一次全部发送到一个“同步”端点。但是，您当前使用的直接异步操作也可以正常工作。 当同步操作返回时，它会使用服务器数据更新本地存储。根据您实现同步的方式，您可能需要生成一个本地 ID，该 ID 会发送到服务器并返回，以便将服务器结果与您的本地数据集匹配。 如果后端调用失败，您将本地数据集设置为指示它需要重新发送的状态。然后您可以在适当的时候检查您的商店是否有需要重新发送的项目，并再次生成适当的同步操作。 正如我所说，我不确定这是否是最佳做法，但对我来说它有效。

【讨论】：

回复：“从那里它通过第二个异步操作发送到后端”：在我的情况下，我更喜欢商店对后端一无所知。这不是一个硬性规定，但我喜欢这样做。 （您可以在***.com/questions/25630611/… 阅读有关原因的更多信息）另外，回复：“然后您可以...检查您的商店是否需要重新发送并再次生成适当的同步操作”，这发生在哪里?谢谢！

我实际上使用的是 Reflux，它更多地从智能商店/愚蠢的行动角度处理事情。我对级联操作有点不确定，但还没有找到更好的方法来做到这一点。直接在 Store 上调用函数可能会导致完全的依赖混乱。检查打开的重新提交将再次发生在商店中，监听“重新连接”或任何操作并发出同步操作。

【参考方案2】：

在我自己的 Flux 变体（有点像 redux）中，我没有动作创建器，而是所有动作都只是分派的有效负载 - 没有异步动作。相反，我有普通的 JS 类（称为异步处理程序）绑定到存储状态（通过“getter”函数），就像 React 组件一样。因此，如果我想触发数据保存，我有一个商店设置了一些状态以指示应该进行保存，然后处理程序看到更改并发出请求，根据需要调度操作以实现成功等。处理程序在开始时创建起来。

在您的情况下，异步处理程序可以绑定到挂单和登录状态，并在商店更新它们时采取相应的行动。