Question

我还在学习Flutter，最近尝试了许多Redux教程。我通过计数器，firebase auth和cloud firebase获得了许多样本。以下是来自http://flutterbyexample.com/的示例应用，我将以此为基础提出问题。这就是我想要做的事情：

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

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

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

我尝试在Redux商店中使用boolean isLoading实现此行为。但是当我尝试调度其他操作时，我最终会进入无限循环或者根本不会触发，所以我不知道在哪里发送实际的API登录操作。

我相信我的问题与this stackoverflow question类似，但我不知道如何在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);
};

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

1 个答案: