asynchronous - Flutter Redux snackbar

Question

我在 flutter 代码中使用 redux。我有一个按钮，按下时会发送一个 Action 来调用异步 API(在我的中间件中)。我想要做的是当 api 调用执行并返回响应时，我想显示 snackbar ，说明它已成功更新数据或错误消息。我的问题是如何通过调度一个 Action 来显示它。或者有没有更好的方法在 redux 中做到这一点？

Answer 1

免责声明: 这不是在 IDE 中编写并运行的代码。它只是描述问题解决方案的一种方式。可能有错误。

假设您拥有 Redux 存储并使用异步进行 API 调用。

您的页面小部件:

... 

_onSubmit(Store<MyState> store) {
   store.dispatch(new SubmitAction(onCompleted: _onCompleted, onError: _onError))

}

_onCompleted() {
    Scaffold.of(context).showSnackBar(new SnackBar(
       content: new Text("Item Completed")));

}

_onError(error) {
    Scaffold.of(context).showSnackBar(new SnackBar(
       content: new Text("Error Occurred")));
}

你的 Redux 中间件:

apiMiddleware(Store<MyState> store, action, NextDispatcher next) {

    if(action is SubmitAction) {
        yourAPICall()
            .then((data) => action.onCompleted())
            .catchError((e) => action.onError(error));
    }

    next(action);
}

MyAction 类:

typedef void VoidCallback();
typedef void ErrorCallback(error);
class MyAction {
   MyAction({this.onCompleted, this.onError})

   VoidCallback onCompeleted;
   ErrorCallback onError;
}

其中一些可以通过 future 来完成，但这很简单。