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))
);
}
}

[NgRx 8] Basic of NgRx8的更多相关文章

  1. ngRx 官方示例分析 - 3. reducers

    上一篇:ngRx 官方示例分析 - 2. Action 管理 这里我们讨论 reducer. 如果你注意的话,会看到在不同的 Action 定义文件中,导出的 Action 类型名称都是 Action ...

  2. [转]VS Code 扩展 Angular 6 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout

    本文转自:https://marketplace.visualstudio.com/items?itemName=Mikael.Angular-BeastCode VSCode Angular Typ ...

  3. Atitit HTTP 认证机制基本验证 (Basic Authentication) 和摘要验证 (Digest Authentication)attilax总结

    Atitit HTTP认证机制基本验证 (Basic Authentication) 和摘要验证 (Digest Authentication)attilax总结 1.1. 最广泛使用的是基本验证 ( ...

  4. Basic Tutorials of Redis(9) -First Edition RedisHelper

    After learning the basic opreation of Redis,we should take some time to summarize the usage. And I w ...

  5. Basic Tutorials of Redis(8) -Transaction

    Data play an important part in our project,how can we ensure correctness of the data and prevent the ...

  6. Basic Tutorials of Redis(7) -Publish and Subscribe

    This post is mainly about the publishment and subscription in Redis.I think you may subscribe some o ...

  7. Basic Tutorials of Redis(6) - List

    Redis's List is different from C#'s List,but similar with C#'s LinkedList.Sometimes I confuse with t ...

  8. Basic Tutorials of Redis(5) - Sorted Set

    The last post is mainly about the unsorted set,in this post I will show you the sorted set playing a ...

  9. Basic Tutorials of Redis(4) -Set

    This post will introduce you to some usages of Set in Redis.The Set is a unordered set,it means that ...

随机推荐

  1. [高清·非影印] Python机器学习经典实例(电子书+源码)

    ------ 郑重声明 --------- 资源来自网络,纯粹共享交流, 如果喜欢,请您务必支持正版!! --------------------------------------------- 下 ...

  2. .Net Jpush极光推送

    1.首先登陆极光官网注册账号   https://www.jiguang.cn/push   2.注册成功后,在应用管理中创建应用

  3. webapi session

    webapi中使用session 修改global.cs里面的内容 using System; using System.Web; using System.Web.Routing; using Sy ...

  4. ADO.NET 二(Connection)

    C# 语言中 Connection 类是 ADO.NET 组件连接数据库时第一个要使用的类,也是通过编程访问数据库的第一步. 接下来了解一下 Connection 类中的常用属性和方法,以及如何连接 ...

  5. react基础学习和react服务端渲染框架next.js踩坑

    说明 React作为Facebook 内部开发 Instagram 的项目中,是一个用来构建用户界面的优秀 JS 库,于 2013 年 5 月开源.作为前端的三大框架之一,React的应用可以说是非常 ...

  6. git stash 缓存本地修改 简介

    当我们在使用git的时候,又是会有这种情况:当新的需求了的时候.我们需要为此需求新建一个分支,再次分支上进行修改,当经过测试,提交代码时,在将其合并到主分支,或生产分支上. 但是有时候也有失误的时候, ...

  7. 挂载nfs提示:mount.nfs: access denied by server while mounting...

    出现此类错误原因大致为: 权限问题 防火墙机制问题 共享配置文件问题 搭建好nfs服务后,在client端进行挂载时,提示: [root@web1 media]# mount -t nfs 192.1 ...

  8. 聊Java中的任务调度的实现方法及比较

    前言 任务调度是指基于给定时间点,给定时间间隔或者给定执行次数自动执行任务.本文由浅入深介绍四种任务调度的 Java 实现: Timer ScheduledExecutor 开源工具包 Quartz ...

  9. VSCode - Beautify插件配置

    注: 本文摘自 黑火巨雷 - 简书 1. 在工作目录下建立.jsbeautifyrc文件 官方文档 { "brace_style": "none,preserve-inl ...

  10. javascript_19-DOM初体验

    DOM DOM: 文档对象模型(Document Object Model),又称为文档树模型.是一套操作HTML和XML文档的API. DOM可以把HTML和XML描述为一个文档树.树上的每一个分支 ...