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