Redux Pattern with Navigation / Routing

[SebastianStehle]

Hi,

This post is a question. I think it is to opinionated for SO.

I have used ngrx in a prototype for a mockup tool (http://athene.weblaunches.net/) only. It was one page only. At the moment i am developing a growing administration tool for a backend and I face without some designs in my code. I think I can solve them with Redux pattern but I stuggle with scenarios for navigation and routing.

For example I have a protected tool (you need to login) with a menu to a list of products.

When the user clicks the link to the products list I raise an event, that the user clicked the item. An effect also makes the request to the backend to load the products. Another effect changes the URL with the router. When the products page is displayed after a nice and short transition the products are already loaded.

The question is:

• How is the flow when the user refreshs the page or enters the url manually?
• What should I do with my products-state when I go to another page, e.g. user management? Depending on the requirements I would like to reset it, because I want to reload everything when user comes back to the product list.
• How do I store my page state in the global state? Do you use some field to define the current page?

[mbret]

Basically what does represent a page is both component bindings and router state. If you want to keep your current page into the store you will have to use ex ui-router hooks to save the route and params into the store. Then you can save to the store the component bindings but it should already be the case if you are completely using ngRedux. It's always up to you to decide whether you want to save everything in your store or not.

[SebastianStehle]

Sorry, but the answer is not what I expected. I am Redux is a architecture pattern. It does not solve a hard technical problem. So I think there should be some guidelines to this problem. "Its up to you" is not helpful at all.

[littleStudent]

How is the flow when the user refreshs the page or enters the url manually?

Not sure what your exact problem is. But I would simply dispatch the LOAD_XXX_REQUEST action when the component appears. Since you are preloading this normally when you navigate (load data before you change the route) you should make sure to only dispatch this if no data is available.

What should I do with my products-state when I go to another page, e.g. user management?

In most cases I leave the state in and overwrite it with new state on next loads. If this is not suited for you you can always send CLEAN_XXX actions on ngDestroy

How do I store my page state in the global state? Do you use some field to define the current page?

Is the question here how to save the router state in ngrx? checkout router-store
I personally do not save the current route in store. But I know a lot of others do that.

Hope that helps.

[robwormald]

Please check this against NgRx v4, and if it’s still an issue, please reopen on https://github.com/ngrx/platform. Thanks!