flutter - Flutter 中的路由使用 Redux

Question

当我们使用 Redux 时，在 Flutter App 中管理路由的最佳位置在哪里？因为我遵循了一些示例，其中一些在操作中路由，而另一些在中间件甚至容器中路由。

标签： flutterreduxroutingflutter-redux

Answer 1

您可以调度常规操作来触发导航。

class NavigationService {

 static NavigationService _service;

 NavigationService.__internal();

  factory NavigationService.instance(){
     if(_service == null){
     _service = new NavigationService.__internal();
   }
 return _service;
}

final GlobalKey<NavigatorState> _navigatorKey = GlobalKey<NavigatorState>();

Future<dynamic> pushNamed(String routeName, {dynamic arguments}) {
  return _navigatorKey.currentState.pushNamed(routeName, arguments:arguments);
}

bool pop() {
    return _navigatorKey.currentState.pop();
}

GlobalKey<NavigatorState> get navigatorKey => this._navigatorKey;
}

RouteMiddleware 负责所有与路由相关的操作

class RouteMiddleware<Action> extends TypedMiddleware<AppState, Action> {
  RouteMiddleware() : super(null);

  @override
  void call(Store<AppState> store, action, next) {
    if(action is YourRoutingAction){
      NavigationService.getInstance().pushedNamed(action.pageName);
    }
    next(action);
   }
}

将与路由相关的操作作为常规操作发送

goToHomePageAfterDataLoad(store) {
   dataLoadLoadLogic().then((data){
   store.dispatch(RoutingAction(pageName: "HOME"));
  });
}