npm i @ngrx/{store,effects,entity,router-store}
ng add @ngrx/store-devtools
npm i @ngrx/{schematics,store-devtools} ngrx-store-freeze --save-dev
Use module pattern
State Module
Core Module
App Interfaces
Minimum app state
App Reducer
Create AppReducerMap using AppState
Store Freeze
State Module
Registers minimum effects
RouterStateSerializer
StoreDev Tools
app.module.tsimport { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { FormsModule } from '@angular/forms';import { StoreDevtoolsModule } from '@ngrx/store-devtools';import { ActionReducerMap, MetaReducer, StoreModule } from '@ngrx/store';import { storeFreeze } from 'ngrx-store-freeze';import { AppComponent } from './app.component';import { HelloComponent } from './hello.component';import { environment } from '../environment/environment';import { UserService } from './core/services/user.service';export interface State {// states}export const storeDevTools = !environment.production ? StoreDevtoolsModule.instrument() : [];export const metaReducers: MetaReducer<State>[] = !environment ? [storeFreeze] : [];export const reducers: ActionReducerMap<State> = {// reducers}@NgModule({imports: [BrowserModule,FormsModule,StoreModule.forRoot(reducers, { metaReducers }),storeDevTools],declarations: [ AppComponent, HelloComponent ],bootstrap: [ AppComponent ],providers: [UserService]})export class AppModule { }