redux - 如何使用异步调度方法作为 RefreshIndicator onRefresh 回调

Question

我有一个包含在 RefreshIndicator 中的列表.当下拉列表时，我想从 Firestore(数据库)中获取一些数据，更新我的状态，然后呈现列表。

我连接了一个 redux Action ，可以获取数据并更新我的状态:

final FetchPostsRequest = () {
    return (Store<AppState> store) {
        final CollectionReference postCollection = Firestore.instance.collection("posts");
        postCollection.getDocuments().then((QuerySnapshot snapshot) {
            List<DocumentSnapshot> docs = snapshot.documents;
            print("Getting documents....");
            List<Model.Post> posts = docs.map((d) => Model.Post.fromMap(d.data)).toList();
            store.dispatch(new FetchPostsSuccess(posts: posts));
        }).catchError((err) {
            print(err);
            store.dispatch(new FetchPostsFailure(error: err));
        });
    };
};

如何将其用作 RefreshIndicator's打回来？它的回调形式为 Future<Null> RefreshCallback () ，而且我不确定如何解决这个问题以适应 redux 状态管理的思维方式。

Answer 1

使用RefreshIndicator在 Flutter 中使用 redux 你应该放一个 Completer<Null>进入你的 Action 类。计划是

1. 创建一个包含 Completer<Null> 的 Action
2. 返回action.completer.future到 onRefresh RefreshIndicator 的功能
3. 编写一个中间件来监听此操作。

行动

假设您有 RefreshItemsAction .代码如下:

class RefreshItemsAction {
  final Completer<Null> completer;

  RefreshItemsAction({Completer completer})
    : this.completer = completer ?? Completer<Null>();
}

中间件

中间件如下:

List<Middleware<AppState>> createItemsMiddleware() {
  return [
    TypedMiddleware<AppState, RefreshItemsAction>(_refreshItems),
  ];
}

Middleware<AppState> _refreshItems() {
  return (Store<AppState> store, action, NextDispatcher next) {
    if (action is RefreshItemsAction) {
      loadItems().then((items) {
          store.dispatch(ItemsRefreshedAction(items));
          action.completer.complete();
        },
      ).catchError((_) {
        store.dispatch(ItemsNotRefreshedAction());
        action.completer.complete();
      });
    }
    next(action);
  };
}

刷新指示器

Presentation 层将如下所示:

return RefreshIndicator(
      onRefresh: () {
        var action = RefreshItemsAction();
        store.dispatch(action);
        return action.completer.future;
      },
      child: ListView(...)
    );

更多信息请查看issue on github