状态变更后如何跳转页面？基于flutter_redux与google_sign_in的疑问

刚接触Flutter Redux确实容易搞不清副作用（比如导航）该放在哪，毕竟Redux的reducer要求是纯函数，不能直接在里面调用Navigator。结合你的场景，我给你三种实用的方案，从易到难，你可以根据自己的情况选：

方案一：在容器组件（GoogleAuthButtonContainer）里监听状态变化 #

这是最适合新手的方式，思路很直接：当Redux状态里的登录状态从“未登录”变成“已登录”时，触发导航。

首先假设你的AppState里有个authState.isLoggedIn字段用来标记登录状态，然后在GoogleAuthButtonContainer里通过StoreConnector获取这个状态，在builder里监听变化：

class GoogleAuthButtonContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StoreConnector<AppState, _ViewModel>(
      converter: (store) => _ViewModel.fromStore(store),
      builder: (context, viewModel) {
        // 用addPostFrameCallback确保当前页面渲染完成后再跳转，避免上下文问题
        WidgetsBinding.instance.addPostFrameCallback((_) {
          if (viewModel.isLoggedIn) {
            // 跳转并移除登录页，防止用户返回
            Navigator.pushNamedAndRemoveUntil(
              context,
              "/home", // 替换成你的目标路由名
              (route) => false,
            );
          }
        });

        return GoogleAuthButton(
          onPressed: viewModel.handleGoogleSignIn,
        );
      },
    );
  }
}

// ViewModel用来封装从Store获取的状态和动作
class _ViewModel {
  final bool isLoggedIn;
  final VoidCallback handleGoogleSignIn;

  _ViewModel({required this.isLoggedIn, required this.handleGoogleSignIn});

  static _ViewModel fromStore(Store<AppState> store) {
    return _ViewModel(
      isLoggedIn: store.state.authState.isLoggedIn,
      handleGoogleSignIn: () => store.dispatch(GoogleSignInRequested()),
    );
  }
}

这种方式的好处是直观，不需要额外配置，适合快速验证功能。缺点是导航逻辑和UI组件耦合在一起，项目大了之后不好维护。

方案二：用Redux中间件处理导航（推荐的最佳实践） #

如果想更符合Redux的设计理念，把所有副作用（比如API调用、导航）都放在中间件里管理，那可以专门写一个导航中间件，拦截LoggedInSuccessfully动作来触发跳转。

步骤1：创建导航中间件 #

class NavigationMiddleware extends MiddlewareClass<AppState> {
  final GlobalKey<NavigatorState> navigatorKey;

  // 传入全局导航key，用来获取Navigator上下文
  NavigationMiddleware(this.navigatorKey);

  @override
  void call(Store<AppState> store, dynamic action, NextDispatcher next) {
    // 先让动作通过reducer更新状态
    next(action);

    // 拦截登录成功的动作
    if (action is LoggedInSuccessfully) {
      navigatorKey.currentState?.pushNamedAndRemoveUntil(
        "/home",
        (route) => false, // 清除登录页栈
      );
    }
  }
}

步骤2：配置全局导航Key和Store #

在main函数里创建全局导航Key，并把它传给MaterialApp和导航中间件：

// 全局导航Key，用来在中间件里获取Navigator
final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

void main() {
  final store = Store<AppState>(
    appReducer,
    initialState: AppState.initial(),
    middleware: [
      GoogleAuthMiddleware(), // 你原来的Google登录中间件
      NavigationMiddleware(navigatorKey), // 添加导航中间件
    ],
  );

  runApp(
    StoreProvider(
      store: store,
      child: MaterialApp(
        navigatorKey: navigatorKey, // 把全局Key传给MaterialApp
        routes: {
          "/login": (context) => LoginPage(),
          "/home": (context) => HomePage(),
        },
        initialRoute: "/login",
      ),
    ),
  );
}

这种方式的优势是导航逻辑和UI、登录逻辑完全解耦，所有导航都集中在中间件里管理，项目越大越能体现出优势，是Redux的标准做法。

方案三：在登录中间件的回调里直接跳转（最简单但不推荐） #

如果你想最快实现功能，也可以在处理Google登录的中间件里，当登录成功后直接调用Navigator跳转，不过这种方式把登录逻辑和导航逻辑耦合在一起，后期不好扩展：

class GoogleAuthMiddleware extends MiddlewareClass<AppState> {
  final GlobalKey<NavigatorState> navigatorKey;

  GoogleAuthMiddleware(this.navigatorKey);

  @override
  void call(Store<AppState> store, dynamic action, NextDispatcher next) {
    if (action is GoogleSignInRequested) {
      // 处理Google登录
      googleSignIn.signIn().then((user) {
        if (user != null) {
          store.dispatch(LoggedInSuccessfully(user));
          // 登录成功后直接跳转
          navigatorKey.currentState?.pushNamedAndRemoveUntil(
            "/home",
            (route) => false,
          );
        }
      }).catchError((error) {
        store.dispatch(LoginFailed(error));
      });
    }
    next(action);
  }
}

总结建议 #

• 如果你是刚接触Redux，先从方案一开始，容易理解和实现；
• 当你对Redux的副作用处理有了更多理解后，切换到方案二，这是更规范的做法；
• 方案三尽量少用，除非是非常简单的小项目。

另外，跳转时记得用pushNamedAndRemoveUntil而不是pushNamed，这样可以把登录页从路由栈里移除，防止用户按返回键回到登录界面。

内容的提问来源于stack exchange，提问作者juan park