redux - 如何使用 Flutter 和 Redux 显示进度指示器？

Question

我仍在学习 Flutter，最近尝试了很多 Redux 教程。我已经通过计数器、firebase auth 和 cloud firebase 获得了许多示例。这是 http://flutterbyexample.com/ 的示例应用程序，我将以此为基础提出问题。这是我想要做的:

1. 用户按下登录按钮
2. 登录按钮被禁用/替换为进度指示器
3. 中间件执行 API 调用以登录
4. 登录成功或失败
5. 进度指示器被注销按钮取代

我注意到的问题是，当前可以快速多次按下登录/注销按钮，当我对按钮调度的操作执行登录 API 调用时，可能会出现错误。

如果没有 redux，我会在状态小部件中使用 bool 值跟踪按钮，并在按下按钮后立即使用内置的 FutureBuilder 替换按钮。

我尝试在我的 Redux 存储中使用 bool 值 isLoading 来实现此行为。但是，当我尝试分派(dispatch)其他操作时，我会陷入无限循环或者它根本不会触发，所以我不知道在哪里分派(dispatch)实际的 API 登录操作。

我相信我的问题与 this stackoverflow question 类似，但我不知道答案如何应用于 Flutter。

Answer 1

我找到了丢失的部分! redux用于同步操作，以添加异步行为redux_thunk可用于通过函数调用包装操作。

Redux provides a simple way to update a your application's State in response to synchronous Actions. However, it lacks tools to handle asynchronous code. This is where Thunks come in.

// 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);
};