Setup and Configuration

Installation
npm i @ngrx/{store,effects,entity,router-store}
ng add @ngrx/store-devtools
npm i @ngrx/{schematics,store-devtools} ngrx-store-freeze --save-dev
Configuration Best Practices
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
Store Dev Tools and Store Freeze
app.module.ts
import { 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 { }
​

Table of Contents

Rules of Thumb

Last modified 3yr ago

Copy link

Outline

Installation

Configuration Best Practices

Store Dev Tools and Store Freeze