[NgRx 8] Basic of NgRx8
1. First step is creating action creator
Action name should be clear which page, which functionality, what is the action name
"[Load Courses Effect] All Courses Loaded","[Courses Resolver] Load All Courses"
Action
import { createAction, props } from "@ngrx/store"; import { Course } from "./model/course"; export const loadAllCourse = createAction( "[Courses Resolver] Load All Courses" ); export const allCoursesLoaded = createAction( "[Load Courses Effect] All Courses Loaded", props<{ courses: Course[] }>() );
action types:
To make actions easy to work with, can create action types: basic it is just a improt and re-export
// actions-types.ts import * as CoursesAction from "./cuorses.actions"; export { CoursesAction };
Effects:
Using 'createEffect', first param is a function to catch the event stream, second param is the options, can set '{dispatch: false}' which mean no other dispath event for this effect.
import { Injectable } from "@angular/core"; import { Actions, ofType } from "@ngrx/effects"; import { createEffect } from "@ngrx/effects"; import { CoursesAction } from "./actions-types"; import { CoursesHttpService } from "./services/courses-http.service"; import { concatMap, map, tap } from "rxjs/operators"; @Injectable() export class CoursesEffects { constructor( private action$: Actions, private coursesHttpService: CoursesHttpService ) {} loadAllCourses$ = createEffect(() => this.action$.pipe( ofType(CoursesAction.loadAllCourse), concatMap(() => this.coursesHttpService.findAllCourses()), map(courses => CoursesAction.allCoursesLoaded({ courses })) ) ); }
import { Injectable } from "@angular/core"; import { Router } from "@angular/router"; import { Actions, ofType, createEffect } from "@ngrx/effects"; import { AuthActions } from "./action-types"; import { tap } from "rxjs/operators"; @Injectable() export class AuthEffects { constructor(private action$: Actions, private router: Router) {} login$ = createEffect( () => this.action$.pipe( ofType(AuthActions.login), tap(action => { localStorage.setItem("user", JSON.stringify(action.user)); }) ), { dispatch: false } ); logout$ = createEffect( () => this.action$.pipe( ofType(AuthActions.logout), tap(action => localStorage.removeItem("user")), tap(() => this.router.navigateByUrl("/")) ), { dispatch: false } ); }
Register effect:
@NgModule({
imports: [
...
EffectsModule.forFeature([AuthEffects])
],
...
})
Reducers:
Reducer mainly take care five things:
1. Define state interface
2. Creating adapter
3. Generate intialize state
4. Generate next state for one action
5. Export selector
1. Initial state:
First we need to have the interface defined for the state:
/* export interface CoursesState { entities: { [key: number]: Course }; ids: number[]; }*/
NgRx provide API to create state interface:
import { EntityState, createEntityAdapter } from "@ngrx/entity"; export interface CoursesState extends EntityState<Course> { /**Extend the entity here */ allCoursesLoaded: boolean; }
'EntityState' contains 'entities' & 'ids'.
And we can extends interface by providing extra props: for example: 'allCoursesLoaded'.
2. Create Adapter:
export const adapter = createEntityAdapter<Course>({ sortComparer: compareCourses // selectId: course => course.id // NgRx use 'id' by default });
3. Generate initial state:
We can use 'adapter' to create initialstate
export const initCoursesState = adapter.getInitialState({ allCoursesLoaded: false });
4. Create Reducer:
export const coursesReducer = createReducer( initCoursesState, on(CoursesAction.allCoursesLoaded, (state, action) => adapter.addAll(action.courses, { ...state, allCoursesLoaded: true }) // next state ) );
5. Export selector:
export const { selectAll } = adapter.getSelectors();
Full code:
import { Course, compareCourses } from "../model/course"; import { EntityState, createEntityAdapter } from "@ngrx/entity"; import { createReducer, on } from "@ngrx/store"; import { CoursesAction } from "../actions-types"; /* export interface CoursesState { entities: { [key: number]: Course }; ids: number[]; }*/ export interface CoursesState extends EntityState<Course> { /**Extend the entity here */ allCoursesLoaded: boolean; } export const adapter = createEntityAdapter<Course>({ sortComparer: compareCourses // selectId: course => course.id // NgRx use 'id' by default }); export const initCoursesState = adapter.getInitialState({ allCoursesLoaded: false }); export const coursesReducer = createReducer( initCoursesState, on(CoursesAction.allCoursesLoaded, (state, action) => adapter.addAll(action.courses, { ...state, allCoursesLoaded: true }) ) ); export const { selectAll } = adapter.getSelectors();
5. Selector:
Selecotor mainly has two API: createFeatureSelector & createSelector:
import { createSelector, createFeatureSelector } from "@ngrx/store"; import * as fromCourses from "./reducers/courses.reducers"; export const selectCoursesState = createFeatureSelector< fromCourses.CoursesState >("courses"); export const selectAllCourses = createSelector( selectCoursesState, fromCourses.selectAll ); export const selectAllCoursesLoaded = createSelector( selectCoursesState, state => state.allCoursesLoaded ); export const selectBeginnerCourses = createSelector( selectAllCourses, courses => courses.filter(course => course.category === "BEGINNER") ); export const selectAdvancedCourses = createSelector( selectAllCourses, courses => courses.filter(course => course.category === "ADVANCED") ); export const selectPromoTotal = createSelector( selectAllCourses, courses => courses.filter(course => course.promo).length );
Component:
import { Component, OnInit } from "@angular/core"; import { compareCourses, Course } from "../model/course"; import { Observable } from "rxjs"; import { defaultDialogConfig } from "../shared/default-dialog-config"; import { EditCourseDialogComponent } from "../edit-course-dialog/edit-course-dialog.component"; import { MatDialog } from "@angular/material"; import { Store, select } from "@ngrx/store"; import { AppState } from "../../reducers"; import * as coursesSelector from "../courses.selectors"; @Component({ selector: "home", templateUrl: "./home.component.html", styleUrls: ["./home.component.css"] }) export class HomeComponent implements OnInit { promoTotal$: Observable<number>; beginnerCourses$: Observable<Course[]>; advancedCourses$: Observable<Course[]>; constructor(private dialog: MatDialog, private store: Store<AppState>) {} ngOnInit() { this.reload(); } reload() { this.beginnerCourses$ = this.store.pipe( select(coursesSelector.selectBeginnerCourses) ); this.advancedCourses$ = this.store.pipe( select(coursesSelector.selectAdvancedCourses) ); this.promoTotal$ = this.store.pipe( select(coursesSelector.selectPromoTotal) ); } onAddCourse() { const dialogConfig = defaultDialogConfig(); dialogConfig.data = { dialogTitle: "Create Course", mode: "create" }; this.dialog.open(EditCourseDialogComponent, dialogConfig); } }
select:
'select' operator can be used in many places, mainly if you want to get piece of data from store, for example, it can be used in resolver as well:
import { Injectable } from "@angular/core"; import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from "@angular/router"; import { Observable } from "rxjs"; import { Store, select } from "@ngrx/store"; import { AppState } from "../reducers"; import { CoursesAction } from "./actions-types"; import { tap, first, finalize, filter } from "rxjs/operators"; import { adapter } from "./reducers/courses.reducers"; import { selectAllCoursesLoaded } from "./courses.selectors"; @Injectable() export class CoursesResolver implements Resolve<any> { loading = false; constructor(private store: Store<AppState>) {} resolve( route: ActivatedRouteSnapshot, state: RouterStateSnapshot ): Observable<any> { return this.store.pipe( select(selectAllCoursesLoaded), tap(courseLoaded => { if (!this.loading && !courseLoaded) { this.loading = true; this.store.dispatch(CoursesAction.loadAllCourse()); } }), // this resolve need to complete, so we can use first() filter(courseLoaded => courseLoaded), first(), finalize(() => (this.loading = false)) ); } }
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
2016-10-08 [NodeJS] Use Now alias for custom sub-domains
2016-10-08 [CSS3] Create a fixed-fluid-fixed layout using CSS calc()