異步處理不影響React + Flux視圖的數據

Question

我在寫一個React（實際上是React Native）應用程序，它在本地存儲數據並將其提交到後端進行處理。更具體地說，它允許用戶下訂單產品，並且如果由於例如用戶當前未登錄而提交失敗，則數據必須被存儲並且稍後被重新提交到後端。

該應用程序使用Flux數據流構建。我讀過很多關於流量，但我仍然不知道如何處理這種情況：

1. 用戶下訂單：一個陣營組件調用一個動作造物主方法，並傳入訂單數據
2. 行動造物主異步提交訂單到後端
3. 的訂單提交失敗（例如，因爲用戶已經尚未登錄）
4. 該錯誤是固定的（例如，在用戶登錄）
5. 的數據必須是自動重新提交到後端

數據在＃3-5步驟之間存在什麼位置？我可以想出兩種可能的方法來處理這個問題，但我不確定哪一種方法是正確的，根據Flux。以下是第一條：

1. Action Creator創建ORDER_SUBMIT_FAILED操作並將訂單數據附加到該操作。
2. 訂單商店接收該操作並將訂單存儲在「掛單」列表中。
3. 用戶登錄，並生成LOGIN_SUCCESS操作。
4. 訂單商店也會收到此操作，並重新提交「掛單」。

但我不明白Order Store如何重新向網絡提交數據。根據Should flux stores, or actions (or both) touch external services?，我的商店是啞數據存儲庫，所有網絡活動都發生在Action Creators中。商店是否應該將數據傳回給Action Creator？但是這似乎違反了Flux。

另一種是：

1. 行動造物主加載登錄屏幕，並將其傳遞一個回調。
2. 登錄屏幕處理登錄過程，成功完成後調用回調。
3. 回調（進入Action Creator）允許它重新提交失敗的訂單。

但是使用回調函數似乎也不像通量一樣。

React/Flux way to handle permission sensitive actions with login flows討論了類似的情況，但重點在於如何首先檢查登錄。接受的答案建議遵循上面提出的第一個流程，但不回答我在那裏提出的問題。

謝謝！

Answer 1

這是我處理這個問題的方式。不知道它是否遵循任何建議，但對我來說它工作得很好。

首先ORDER_SUBMIT操作僅由本地OrderStore提取。它在本地保存在待處理狀態。從那裏開始，它會通過第二次異步操作發送到後端。我實際上有一個同步過程，可以收集不同商店的潛在多個更新，並將它們一次全部發送到單個「同步」端點。但是，目前使用的直接異步操作也很好。 當同步操作返回時，它會使用服務器數據更新本地存儲。根據實現同步的方式，您可能需要生成一個本地ID，將其發送到服務器並返回，以便將服務器結果與本地數據集相匹配。 如果後端調用失敗，則將您的本地數據集設置爲指示需要重新發送的狀態。然後，您可以在適當時候檢查商店是否需要重新發送商品，然後再次生成適當的同步操作。 正如我所說的，我不確定這是否是最佳做法，但對我而言它是有效的。

Answer 2

在我自己的flux變體中（有點像redux），我沒有動作創建者，而是所有的動作都是分派的有效載荷 - 沒有異步動作。相反，我有簡單的JS類（稱爲異步處理程序），它與React組件的作用（通過「getter」函數）綁定到存儲狀態。所以如果我想觸發一個數據保存，我有一個商店設置了一些狀態來指示應該發生保存，然後處理程序會看到這個更改併發出請求，根據成功需要調度操作等。處理程序在啓動時創建向上。

就你而言，異步處理程序可以綁定到掛起的訂單和登錄狀態，並隨着商店更新它們而相應採取行動。