Flutter Redux SnackBar

Question

我在 flutter 代码中使用了 redux。我有一个按钮，按下它会发出调用异步 API 的操作（在我的中间件中）。我想要做的是当 api 调用执行并返回响应时，我想显示 snackbar 说明它已成功更新数据或错误消息。我的问题是如何通过调度一个动作来显示小吃店。或者在 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);
}

MyActionclass:

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

   VoidCallback onCompeleted;
   ErrorCallback onError;
}

其中一些可以用 futures 来完成，但这很简单。

Flutter Redux SnackBar

Flutter Redux SnackBar

asynchronous

snackbar

redux

flutter