Setup and Configuration

Setting up projects
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 updated 4 months ago