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

Question

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

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

第一种方法：

创建一个具有异步调用函数的中间件类，该函数将在调用 NextDispacther 完成后等待异步事件完成，并使用将在减速器中处理的新操作

 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);
        }
      }

    }

第二种方法：

创建一个 typedMiddleware 做同样的事情，但它通过 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));
};

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

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

Answer 1

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