如何使用颤振和 Redux 显示进度指示器?

Question

我还在学习Flutter，最近尝试了许多Redux教程。 我已经通过计数器，火基身份验证和云火碱的许多样本。 这是我的问题所依据的 http://flutterbyexample.com/示例应用程序。 以下是我想做的：

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

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

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

我试图在我的 Redux 存储中使用布尔值 isLoading 来实现此行为。 但是当我尝试调度其他操作时，我最终会陷入无限循环或根本不触发，因此我不知道在哪里调度实际的 API 登录操作。

我相信我的问题类似于这个堆栈溢出问题，但我不知道如何在 Flutter 中应用答案。

Answer 1

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

Redux 提供了一种简单的方法来更新应用程序的状态以响应同步操作。但是，它缺少处理异步代码的工具。这就是Thunks的用武之地。

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