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

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