Understanding the purpose of the ngrx router-store project as compared to only using the angular 2 router

Question

I am in reference to the router-store ngrx project (https://github.com/ngrx/router-store).

I am not clear how to use this project...

For instance let's take the following sample from the project documentation:

store.dispatch(go(['/path', { routeParam: 1 }], { query: 'string' }));

Is this meant to be use as a replacement to the angular 2 router: router.navigate(['/path...?

...or should I use the ngrx router-store only in certain circumstances? (if so which ones?)

Also what happens to the ngrx router-store when a angular 2 router html link e.g. <a routerLink="/heroes" is clicked?

More generally, can someone please explain what is achieved by the ngrx router-store project as compared to using the plain angular 2 router?

Or to rephrase, what does ngrx router-store brings in addition to the angular 2 router?

Edit: An interesting source of information and samples about ngrx is of course the ngrx example-app (https://github.com/ngrx/example-app).

I found a dependency to the router-store there but I have not been able to find where the router-store is used within the app...

FYI, here is the comment to be found in the example app about the router store:

@ngrx/router-store keeps router state up-to-date in the store and uses the store as the single source of truth for the router's state.

Answer 1

The @ngrx/router-store exists so that it's possible for the store to be the single source of truth for an application's routing state.

Without it, there would be application state - the current route - not represented in the store. That means time-travel debugging using the DevTools would not be possible, as there would be no state in the store representing the route and there would be no actions representing route changes.

The router-store does not replace the Angular router; it just wires up listeners for routing actions and for the router itself.

When you emit a routing action using the go action creator, a "[Router] Go" action containing the specifed path is heard by the router-store which then calls the corresponding router method. When the router-store hears - from the router - that the route has changed it emits a "[Router] Update Location" action representing the route change and that action sees the router state in the store updated.

If, instead of using the go action creator, a routerLink is used to effect a route change, router-store will hear the change and will emit a "[Router] Update Location" action that will see the store's router state updated.

So, whether the route is changed via actions or more traditional links, the store always contains the router state.

With the "[Router] Update Location" actions representing route changes, you can undo said route changes via the DevTools - something that would not be possible if the router state were not represented in the store.

If you've not used the Redux DevTools, I would recommend you check them out:

• Redux DevTools Extension
• @ngrx/store-devtools
• @ngrx/store-log-monitor