ngrx-workshop
Search…
Setup and Configuration
Setting up projects

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!