Using @ngrx/store-devtools to debug the state changes

In this recipe, you'll learn how to set up and 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 project for this recipe resides in chapter06/start_here/using-ngrx-store-devtool:

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.

4. Login as an Admin user, and you should see a screen like this:

Figure 6.4 – Using ngrx-store-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…

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