Question

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

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

Answer 2

在React中，我总是使我的异步操作返回一个Promise，然后可以附加一个我用来引发一次性事件的.then或.catch。这就是我最终使用redux_thunk在Flutter中做相同的事情的方式：

Future<String> loginAction(Store<AppState> store) async {
  store.dispatch(IsLoadingAction(true));

  try {
    const currentUser = /* async stuff */;

    store.dispatch(LoginAction(currentUser));
    store.dispatch(IsLoadingAction(false));

    return '';
  } catch (error) {
    store.dispatch(AuthError(error.toString()));
    store.dispatch(IsLoadingAction(false));

    return 'An error occurred while attempting to log in';
  }
}

然后，在登录页面中，我可以调用登录操作（在视图模型中包装在此处），然后根据该操作是否返回字符串来调用showSnackBar：

/* ... */
GoogleSignInButton(
  onPressed: () async {
    String error = await vm.login();
    if (error != '') {
      Scaffold.of(context).showSnackBar(SnackBar(content: Text(error)));
    }
  },
),
/* ... */

Flutter Redux SnackBar

2 个答案: