best way to handle navigation from a reducer?

[brianegan]

best way to handle navigation from a reducer?

[xqwzts]

FYI you can access your app's Navigator without a context by setting the navigatorKey property of your MaterialApp:

  /// A key to use when building the [Navigator].
  ///
  /// If a [navigatorKey] is specified, the [Navigator] can be directly
  /// manipulated without first obtaining it from a [BuildContext] via
  /// [Navigator.of]: from the [navigatorKey], use the [GlobalKey.currentState]
  /// getter.
  ///
  /// If this is changed, a new [Navigator] will be created, losing all the
  /// application state in the process; in that case, the [navigatorObservers]
  /// must also be changed, since the previous observers will be attached to the
  /// previous navigator.
  final GlobalKey<NavigatorState> navigatorKey;

Create the key:

final GlobalKey<NavigatorState> navigatorKey = new GlobalKey<NavigatorState>();

Pass it to MaterialApp:

new MaterialApp(
      title: 'MyApp',
      onGenerateRoute: generateRoute,
      navigatorKey: key,
    );

Push routes:

navigatorKey.currentState.pushNamed('/someRoute');

[brianegan]

@temirfe You have two options:

1. Make the navigatorKey a global variable (probably wouldn't do this myself)
2. Create a Middleware that accepts the navigatorKey (my preferred mechanism)

In code using a MiddlewareClass:

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

  MyMiddleware(this.navigatorKey);
 
  @override
  void call(Store<AppState> store, dynamic action, NextDispatcher next) {
    if (action is SomeAction) {
      navigatorKey.currentState.pushNamed('/someRoute');
    }
  }
}

To provide this to your Store:

void main() {
  final navigatorKey = new GlobalKey<NavigatorState>();
  final store = Store(myReducer, middleware: [MyMiddleware(navigatorKey)]);

  runApp(StoreProvider(store: store, child: MaterialApp(navigatorKey: navigatorKey)));
}

[temirfe]

navigatorKey.currentState.pushNamed('/someRoute');

it would be nice if you also showed how did you get reference to navigatorKey in navigatorKey.currentState.pushNamed('/someRoute');
because in my case editor is complaining that navigatorKey is undefined

[xqwzts]

I find it preferable to use this to navigate in a side-effect action/middleware and leave navigation state handling to flutter.

[MichaelRFairhurst]

ah, awesome! Totally didn't look deeper at the navigation API one bit. HUGE thanks, that at the very least unblocks me!

Is there any documentation on how to write a middleware? That's another thing I didn't see. Middleware does indeed seems like the right place for this.

[brianegan]

Thanks for writing in and to xqwzts for the good answer! On vacation for a few more days, but you can find some docs on Middleware here: https://github.com/johnpryan/redux.dart/blob/master/doc/async.md

[MichaelRFairhurst]

I guess there's no reason to leave this open. Thanks for the help, everyone!

[sjmcdowall]

If anyone is still reading this -- I am trying this but it's not working all that well -- when I get an outside event .. and want to go to a particular screen .. it goes there -- but loses ALL context such as theme / backbitten / app bar stuff / etc. It's a plain screen and no way to navigate ..

This is an existing screen that is navigable via App Bar buttons, etc. So ... how can this work?

Cheers