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

Asynchronously handling data which does not affect the view in React+Flux

本文关键字：视图数据 React+Flux 处理影响异步更新时间：2023-09-26

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

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

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

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

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

但我不明白订单商店如何向网络重新提交数据。根据 flux 存储或操作（或两者）是否应与外部服务接触？，我的存储是哑数据存储库，所有网络活动都发生在操作创建者中。应用商店是否应将数据传递回操作创建者？但这似乎违反了Flux。

另一个是：

操作创建程序加载登录屏幕并向其传递回调。
屏幕处理登录过程，成功完成后，调用回调。
回调（进入操作创建程序）允许它重新提交失败的订单。

但是使用回调似乎也不是非常像 flux。

使用登录流处理权限敏感操作的 React/Flux 方法讨论了类似的情况，但首先侧重于如何检查登录。接受的答案建议遵循上面第一个建议的流程，但没有回答我在那里提出的问题。

谢谢！

这是我处理这个问题的方法。不确定它是否遵循任何建议，但对我来说它工作得很好。

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

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

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