17. Store dev tools

In this section we will introduce the awesome store dev tools for Chrome and other mediums.

1. Install redux dev tools chrome extension

​https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en​

Image: Redux devtools extension

2. npm install the ngrx StoreDevtools

• npm install the store dev tools that expose our reducers to the chrome extension.

npm install @ngrx/store-devtools

3. Register the StoreDevtoolsModule

• Register the StoreDevtoolsModule in our AppModule.

• Name our app in the config to know which app we are dealing with in the browser extension.

• Also disable all the expensive compute and memory heavy functions of the devtools when we are in production to only allow logging.

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';

import { HomeComponent } from './home/containers/home/home.component';
import { AppComponent } from './app.component';
import { InMemoryDataService } from './app.db';
import { reducer } from './state/spinner/spinner.reducer';
import { environment } from '../environments/environment.prod';

@NgModule({
  declarations: [AppComponent, HomeComponent],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      { path: '', pathMatch: 'full', redirectTo: 'home' },
      { path: 'home', component: HomeComponent },
      { path: 'event', loadChildren: './event/event.module#EventModule' }
    ]),
    HttpClientModule,
    HttpClientInMemoryWebApiModule.forRoot(InMemoryDataService, {
      delay: 1000
    }),
    StoreModule.forRoot({ spinner: reducer }),
    StoreDevtoolsModule.instrument({
      name: 'NgRx Demo App',
      logOnly: environment.production
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

4. Run the app and explore the dev tools in the browser

App running the store devtools

StackBlitz Link

Duncanhunter - Angular And Ngrx Demo App - StackBlitzStackBlitz

Web Link: Link to the demo app running in StackBlitz