（三）Flutter Redux 中的中间件 middleware

最新推荐文章于 2025-03-17 12:01:38 发布

发孖、

最新推荐文章于 2025-03-17 12:01:38 发布

阅读量2.9k

点赞数 3

分类专栏： Flutter

本文链接：https://blog.csdn.net/xcf111/article/details/93930135

版权

Flutter 专栏收录该内容

12 篇文章

订阅专栏

本文深入探讨了Flutter Redux中中间件的使用，包括如何自定义中间件数组，实现中间件类，以及在全局Store中引入中间件。通过具体示例，讲解了中间件的执行流程，next()方法的作用，以及在不同情况下中间件的执行结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在前面（二）Flutter Redux 中的 combineReducers 中对redux中使用combineReducers有了一定的了解，这次再来看下中间件。
中间件类似拦截器。比如当前是添加用户动作，但是我想在添加用户这操作的前面再做一步其他的动作，这时候就可以使用中间件middleware，实现MiddlewareClass该类就行。
中间件的call方法中有个关键方法next()，文章后面在细讲这个。

第一步：在redux_state.dart中自定一组中间件

/// 定义了一个中间件数组，包含2个中间件
final List<Middleware<ReduxState>> middleware = [
  UserInfoMiddleware1(),
  UserInfoMiddleware2(),
];

第二步：在user_reducer.dart中实现中间件

/// 中间件1
class UserInfoMiddleware1 implements MiddlewareClass<ReduxState> {

  @override
  void call(Store<ReduxState> store, dynamic action, NextDispatcher next) {
    print("中间件 1 开始执行了");
    if (action is AddUserAction) {
      print("中间件拦截到 ------ 添加用户");
    } else if (action is UpdateUserAction) {
      print("中间件拦截到 ------ 更新用户");
    }
    /// next看情况要不要执行
    /// 如果执行了，那后续的中间件和该action对应的逻辑都会执行
    /// 如果不执行，那就执行到这边就完了，后续的中间件和该action对应的逻辑都不会执行
    print("执行next方法，触发下一个中间件");
    next(action);
  }
}

/// 中间件2
class UserInfoMiddleware2 implements MiddlewareClass<ReduxState> {

  @override
  void call(Store<ReduxState> store, dynamic action, NextDispatcher next) {
    print("中间件 2 开始执行了");
    if(action is DeleteUserAction) {
      print("中间件拦截到 ------ 删除用户");
    }
    next(action);
  }
}

第三步：在全局Store中引入中间件 middleware

main() {
  /// 创建全局Store
  final store = Store<ReduxState>(
      getReduce,
      middleware: middleware,
      initialState: ReduxState(
        user: User.initData()
      )
  );
  runApp(ReduxDemo3(store,));
}

执行过程

执行过程跟 next() 这方法有关，代码在 next() 的前面和后面对输出结果都是有影响的
中间件1主要处理AddUserAction和UpdateUserAction
中间件2主要处理DeleteUserAction

情况1：中间件1不实现next()方法，中间件2实现next()方法

/// 中间件1
class UserInfoMiddleware1 implements MiddlewareClass<ReduxState> {
  @override
  void call(Store<ReduxState> store, dynamic action, NextDispatcher next) {
    print("中间件 1 开始执行了");
    if (action is AddUserAction) {
      print("中间件拦截到 ------ 添加用户");
    } else if (action is UpdateUserAction) {
      print("中间件拦截到 ------ 更新用户");
    }
    print("未执行next方法，无法触发下一个中间件");
  }
}

/// 中间件2
class UserInfoMiddleware2 implements MiddlewareClass<ReduxState> {
  @override
  void call(Store<ReduxState> store, dynamic action, NextDispatcher next) {
    print("中间件 2 开始执行了");
    if(action is DeleteUserAction) {
      print("中间件拦截到 ------ 删除用户");
    }
    next(action);
  }
}

效果：
在这里插入图片描述
情况2：中间件1实现next()方法，中间件2实现next()方法

/// 中间件1
class UserInfoMiddleware1 implements MiddlewareClass<ReduxState> {
  @override
  void call(Store<ReduxState> store, dynamic action, NextDispatcher next) {
    do somthging ...
    print("中间件1 执行next方法，触发下一个中间件");
    next(action);
  }
}

/// 中间件2
class UserInfoMiddleware2 implements MiddlewareClass<ReduxState> {
  @override
  void call(Store<ReduxState> store, dynamic action, NextDispatcher next) {
    do somthging ...
    next(action);
    print("中间件2 执行next方法，触发下一个中间件");
  }
}

效果：
在这里插入图片描述
结论：如果next()不执行的话那后面的所有中间件都不会被执行的，同时该action对应的业务逻辑也不会被执行

情况3：2个中间件实现next()方法，并且next()方法后还有其他代码

/// 中间件1
class UserInfoMiddleware1 implements MiddlewareClass<ReduxState> {
  @override
  void call(Store<ReduxState> store, dynamic action, NextDispatcher next) {
    do somthging ...
    print("中间件1 执行next方法，触发下一个中间件");
    next(action);
    print("该输出语句在 中间件1 的 next() 方法后面");
  }
}

/// 中间件2
class UserInfoMiddleware2 implements MiddlewareClass<ReduxState> {
  @override
  void call(Store<ReduxState> store, dynamic action, NextDispatcher next) {
    do somthging ...
    next(action);
    print("该输出语句在 中间件2 的 next() 方法后面");
  }
}

效果：
在这里插入图片描述
结论：当Action对应的业务逻辑处理完后，会按中间件组的倒序来一个一个执行next()后面的方法

情况4：中间件中发出其他的Action，中间件1中拦截到AddUserAction后，Store发起DeleteUserAction

/// 中间件1
class UserInfoMiddleware1 implements MiddlewareClass<ReduxState> {
  @override
  void call(Store<ReduxState> store, dynamic action, NextDispatcher next) {
    print("中间件 1 开始执行了");
    if (action is AddUserAction) {
      print("中间件拦截到 ------ 添加用户");
      print("========= 中间件拦截到\"添加用户\"后发起了 DeleteUserAction ==========");
      store.dispatch(DeleteUserAction(action.user));
    } else if (action is UpdateUserAction) {
      print("中间件拦截到 ------ 更新用户");
    }
    print("中间件1 执行next方法，触发下一个中间件");
    next(action);
    print("该输出语句在 中间件1 的 next() 方法后面");
  }
}

/// 中间件2
class UserInfoMiddleware2 implements MiddlewareClass<ReduxState> {
  @override
  void call(Store<ReduxState> store, dynamic action, NextDispatcher next) {
    print("中间件 2 开始执行了");
    if(action is DeleteUserAction) {
      print("中间件拦截到 ------ 删除用户");
    }
    next(action);
    print("该输出语句在 中间件2 的 next() 方法后面");
  }
}

效果：
在这里插入图片描述
结论：在中间件中，调用 dispatch 发送其他Action，会递归先处理新发出的 Action