Setup and Configuration

Installation
1
npm i @ngrx/{store,effects,entity,router-store}
Copied!
1
ng add @ngrx/store-devtools
Copied!
1
npm i @ngrx/{schematics,store-devtools} ngrx-store-freeze --save-dev
Copied!
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
1
import { NgModule } from '@angular/core';
2
import { BrowserModule } from '@angular/platform-browser';
3
import { FormsModule } from '@angular/forms';
4
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
5
import { ActionReducerMap, MetaReducer, StoreModule } from '@ngrx/store';
6
import { storeFreeze } from 'ngrx-store-freeze';
7
​
8
import { AppComponent } from './app.component';
9
import { HelloComponent } from './hello.component';
10
​
11
import { environment }  from '../environment/environment';
12
import { UserService } from './core/services/user.service';
13
​
14
export interface State {
15
  // states
16
}
17
​
18
export const storeDevTools = !environment.production ? StoreDevtoolsModule.instrument() : [];
19
​
20
export const metaReducers: MetaReducer<State>[] = !environment ? [storeFreeze] : [];
21
​
22
export const reducers: ActionReducerMap<State> = {
23
  // reducers
24
}
25
​
26
@NgModule({
27
  imports: [ 
28
    BrowserModule, 
29
    FormsModule, 
30
    StoreModule.forRoot(reducers, { metaReducers }),
31
    storeDevTools 
32
  ],
33
  declarations: [ AppComponent, HelloComponent ],
34
  bootstrap:    [ AppComponent ],
35
  providers: [UserService]
36
})
37
export class AppModule { }
38
​
Copied!

Table of Contents

Rules of Thumb

Last modified 2yr ago

Copy link

Contents

Installation

Configuration Best Practices

Store Dev Tools and Store Freeze