如何使用Flutter和Redux顯示進度指示器？

Question

我仍在學習Flutter，最近嘗試了許多Redux教程。 我已經通過計數器，firebase身份驗證和雲firebase獲得了許多示例。 這是來自http://flutterbyexample.com/的示例應用程序，我將以此為基礎。 這是我想做的：

1. 用戶按下登錄按鈕
2. 登錄按鈕已禁用/已替換進度指示器
3. 中間件執行API調用以登錄
4. 登錄成功或失敗
5. 進度指示器由注銷按鈕代替

我注意到的問題是，當前可以快速多次按“登錄/注銷”按鈕，並且當我對按鈕分派的操作執行登錄API調用時，它可能會出現錯誤。

如果沒有redux，我將在狀態小部件中使用布爾值跟蹤按鈕，並在按下按鈕后立即使用內置的FutureBuilder替換按鈕。

我試圖在Redux存儲中使用布爾值isLoading來實現此行為。 但是，當我嘗試分派其他操作時，我會陷入無限循環，或者根本無法觸發，因此我不知道在哪里分派實際的API登錄操作。

我相信我的問題類似於這個stackoverflow問題，但是我不知道答案如何在Flutter中應用。

Answer 1

我找到了丟失的那一塊！ redux用於同步動作，為了添加異步行為redux_thunk可用於通過函數調用包裝動作。

Redux提供了一種簡單的方法來響應同步操作來更新應用程序的狀態。 但是，它缺少處理異步代碼的工具。 這是Thunk進來的地方。

// Create a `ThunkAction`, which is any function that accepts the 
// Store as it's only argument. Our function (aka ThunkAction) will
// simply send an action after 1 second.  This is just an example, 
// but  in real life, you could make a call to an HTTP service or 
// database instead!
final action = (Store<String> store) async {
  final searchResults = await new Future.delayed(
    new Duration(seconds: 1),
    () => "Search Results",
  );

  store.dispatch(searchResults);
};