在flutter redux中处理异步事件的最佳方法

Question

在开始使用flutter和redux构建应用程序时，我遇到了以下问题：处理网络请求或任何异步操作的最佳方法是什么？

上下文：当请求完成更新状态并查看视图中的更改时，进行异步调用以从服务器端获取字符串（在我的情况下只是Future.delayed）。

第一种方法：

创建一个具有异步调用函数的middlewareClass，该函数将在完成调用NextDispacther之后等待异步事件完成，该操作将在reducers中处理

 class UserTypeMiddleware extends MiddlewareClass<AppState> {

      @override
      void call(Store<AppState> store, action, NextDispatcher next) async{
        if (action is GetTitleAction) {
          String title = await Future<String>.delayed(Duration(seconds: 2), () {
            return "This is a title ";
          });
          next(UpdateTitleAction(title));
        } else {
          next(action);
        }
      }

    }

第二种方法：

创建一个类型化的中间件，它可以执行相同的操作，但它会通过store.dispatch调度操作

TypedMiddleware<AppState, GetTitleAction> userTypeMiddleware() =>
    TypedMiddleware<AppState, GetTitleAction>(_getTitle);

Future _getTitle(Store<AppState> store, GetTitleAction action, NextDispatcher next) async {
  String title = await Future<String>.delayed(Duration(seconds: 2), () {
    return "Flow.me este o aplicatie care va permite sa inchiriati un scooter ";
  });
  store.dispatch(UpdateTitleAction(title));
  next(action);
}

第三种方法：

使用redux thunk

ThunkAction<AppState> updateTitleAction = (Store<AppState> store) async {
  String title = await Future<String>.delayed(Duration(seconds: 2), () {
    return "Flow.me este o aplicatie care va permite sa inchiriati un scooter ";
  });

  store.dispatch(UpdateTitleAction(title));
};

从我的角度来看，我宁愿处理中间件中处理服务器请求的逻辑而不是处理动作 - 只是为了保持一致性 - 中间件与reducer处于同一级别，用于处理逻辑。

如果我在异步请求中延迟调用中间件中的NextDispatcher，它是否以任何方式打破了redux的想法？这可能代表一个问题吗？

Answer 1

处理网络请求或异步操作的最佳方法是为它创建中间件，永远不要处理reducer中的异步操作（它是redux反模式，reducer应该是纯函数），或者你可以使用redux-thunk。