Setup and Configuration
Setting up projects
npm i @ngrx/{store,effects,entity,router-store}
ng add @ngrx/store-devtools
npm i @ngrx/{schematics,store-devtools} ngrx-store-freeze --save-dev
- 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
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 { }
Last modified 3yr ago