Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Application state is set outside of the Redux Store, specifically navigation route #15

Closed
kinggolf opened this issue Jan 4, 2018 · 3 comments

Comments

@kinggolf
Copy link
Contributor

commented Jan 4, 2018

Is there a practical method to add route/navigation to the Redux AppState? In the redux example of this repo, DetailsScreen in detail_screen.dart and HomeScreen in home_screen.dart, both presentations components, are setting the state of the app via the Navigator. I am trying to figure out a way to include the route in the AppState and then implement subsequent routes outside presentation components, possibly through Middleware. I have failed thus far. :(

Much like the app presents the active tab via the store, I think the app should present the route via the store. Is this reasonable?

BTW - thanks so very much for this repo, it has been a great help to me getting off the ground with Flutter, Redux, and Dart.

@brianegan

This comment has been minimized.

Copy link
Owner

commented Jan 4, 2018

This is a good question, and something I've thought a bit about as well. These are only my ideas, so would be happy to hear yours in response!

First of all, I wouldn't worry about putting absolutely everything into your Redux store, and I believe the Navigator is one of those cases. Why? Because the Navigator handles a lot of things: back button support, animations between screens, showing back arrows in the App Bar, deep linking, etc, and I generally don't think these things should be the responsibility of the Redux Store.

See also this series of tweets from the original Redux author: https://twitter.com/dan_abramov/status/727278247264833536?lang=en

Therefore, I think the best way to pass data between routes is actually through named routes with query parameters. My main reason: To handle all Routes in the same way, especially deep links, which are really important to handle gracefully.

The only problem I have with using named routes at this time: handling query params in routes with Flutter is a bit clunky at the moment. You need to write your own onGenerateRoute method to parse the query params yourself. However, I think doing that is still the best way to go.

For example, in the Redux example, I think I should refactor this bit:

.push(new MaterialPageRoute(
builder: (_) => new TodoDetails(id: todo.id),
))

To be Navigator.of(context).pushNamed('/todos/${todo.id});, and then write an onGenerateRoute implementation that extracts the id of the Todo from the named route and creates a new DetailsScreen using that parsed Id. This could also work for the AddEditScreen as well.

That way, even if someone links to your app from another app, they could link to /todos/1 and your app would handle it just fine!


If you still want to sync the Router with the Store, I think you could totally do it!

For example:

  1. Create a RouteObserver that takes in a Store
  2. Create your Store and give it to the RouteObserver
  3. Pass the RouteObserver your MaterialApp.
  4. When the didPush or didPop methods are called, dispatch an action DidPopAction or DidPushAction with the route.
  5. Create a route field in your AppState
  6. When the DidPushAction or DidPopAction reaches your reducer, set the current route in your AppState to that payload!

So, that's a lot of writing haha, whatcha think overall?

@kinggolf

This comment has been minimized.

Copy link
Contributor Author

commented Jan 5, 2018

Thank you @brianegan for your words and your time. I was concerned about including the routes in the store, as I was not sure if the navigation would work as well, but I also am interested in giving it a try, which is why I asked my question.

My background is Javascript, in particular Angular, and I have used ngrx (Angular version of Redux) in several apps. The app that I am currently working on in Flutter certainly does not require Redux, it is fairly simple, but it could grow in complexity and I want to learn how to use Redux in Flutter for possible use in other apps.

Thanks again and I will keep you updated on what I learn. Cheers!

@kinggolf kinggolf closed this Jan 5, 2018
@brianegan

This comment has been minimized.

Copy link
Owner

commented Jan 6, 2018

@kinggolf Sure thing! Would love to hear what ya learn. Ya, definitely only bring in Redux patterns when you feel they're necessary.

To make Redux work a bit more like ngrx with "effects," you can check out the redux_epics package: https://pub.dartlang.org/packages/redux_epics

Also, I haven't written much about it or put as much time into documentation / flutter integrations, but if you like the full ngrx approach, I ported something similar here to see how it worked out: https://pub.dartlang.org/packages/stream_store

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.