search

alexeieleusis / greencat

A port of Redux(https://github.com/reactjs/redux) to Dart, including Redux Thunk(https://github.com/gaearon/redux-thunk) and a simple Logger.
Apache License 2.0
48 stars 4 forks source link

[Q] How to do routing in Angular2 greencat project #7

Open sturmf opened 7 years ago

sturmf commented 7 years ago

Hi, I am currently investigating how to handle routing in an Angular2 greencat project.

So my questions are, who should be responsible to change a route? E.g. the component, the action or the reducer? Eventually the router should react to store changes etc?

The solution of course should also work if a user navigates to a deep link the first time.

So I would be interested how you handled that and if any patterns emerged already?

alexeieleusis commented 7 years ago

Store and reducer should be UI agnostic, so they are discarded at that point. Regular actions are objects without logic, so that leaves async actions as the only candidates on the greencat side, I think it is ok to use them in such a way since you have control on what they do and when they are done, so at the end they can programmatically change routes.

I think there are cases where the component should change the route too, e.g. clicking on a link taking the user to a different "page" handled by a different route.

In any case, keeping the reducer and store UI agnostic is specially important if you want to reuse it in a different app with another framework like flutter.

sturmf commented 7 years ago

Thank you for your answer! I agree with you that the store and reducer should be UI agnostic. But I would also like to have the same for the components. E.g. a List component might have clickable targets and in the case the List is used in context A I would like to change a route and when it is used in context B it might just mean something different. Therefore the behavior of a click also depends on the state the app is in I think. Eventually it makes sense to have a sole routing component which gets triggered by store changes? E.g. when I click an Item I create an ItemSelectedAction which sets state in the store like selectedItem which then triggers the routing component to change the active route?

alexeieleusis commented 7 years ago

You could definitely have a reducer for the routes and then combine it with your business logic reducer so different platforms have different stores but share the business logic reducer, you can find an example here https://github.com/alexeieleusis/greencat/blob/master/testing/todo_list/lib/src/todo_app.dart#L31 just a caveat the tuple package is no longer maintained and is not strong mode compliant, so it might need to be replaced at some point.

I am not sure the example is clear enough, but there are very good examples on the redux reducers combinators which is the one inspired greencat.