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 { }