Using @ngrx/router-store to work with route changes reactively

NgRx is awesome because it allows you to have your data stored in a centralized place. However, listening to route changes is still something that is out of the NgRx scope for what we've covered so far. We did rely on the ActivatedRoute service to watch for route changes, and when we want to test such components, the ActivatedRoute service becomes a dependency. In this recipe, you'll install the @ngrx/router-store package and will learn how to listen to the route changes using some actions built into the package.

Getting ready

The project that we are going to work with resides in chapter06/start_here/ngrx-router-store, inside the cloned repositor:

1. Open the project in VS Code.
2. Open the terminal and run npm install to install the dependencies of the project.
3. Once done, run ng serve -o.

This should open the app in a new browser tab, and you should see something like this:

Figure 6.19 – ngrx-router-store app...