Using NgRx Store Devtools to debug the state changes

In this recipe, you'll learn how to use @ngrx/store-devtools to debug your app's state, the actions dispatch, and the difference in the state when the actions dispatch. We'll be using an existing app we're familiar with to learn about the process.

Getting ready

The app that we are going to work with resides in start/apps/chapter06/ngrx-devtools inside the cloned repository:

1. Open the code repository in your Code Editor.
2. Open the terminal, navigate to the code repository directory and run npm run serve ngrx-devtools to serve the project

This should open the app in a new browser tab. If you add a couple of items, you should see the following:

Figure 6.3 – Using ngrx-devtools app running on http://localhost:4200

Now that we have the app set up, let's see the steps of the recipe in the next section.

How to do it…

1. We have an Angular app that already has the @ngrx/store package integrated. We...