Angular Ngrx Store 工具库里 Action 定义指南

简介: Angular Ngrx Store 工具库里 Action 定义指南

Store 文件夹数据结构的一个典型例子:

当您第一次使用 ngrx/store 模块时,必须决定运行应用程序所需的操作。 首先分析从服务器端加载 Heroes 数据的过程并决定应该进行哪些 Action 建模。

  • 从服务器端加载所有英雄数据,因此需要一个加载英雄的动作。
  • 一个 Effect 启动并从服务器端检索英雄数据。 Effect 还需要通知 Store 我们已经成功地检索到了 Heroes 数据,因此它需要调度一个动作(Load Heroes Success Action)。如果与服务器端的通信失败或出于任何其他原因,Effect 会调度另一个动作(加载英雄失败)进行错误处理。

Ngrx Store 提供的 Action 接口:

export interface Action {
    type: string;
}

我们创建一些字符串常量,作为 Action 的标识:

export const LOAD_HEROES = "[Heroes] Load Heroes";
export const LOAD_HEROES_FAIL = "[Heroes] Load Heroes Fail";
export const LOAD_HEROES_SUCCESS = "[Heroes] Load Heroes Success";

其中[] 中括号,代表 Action 的类型-category.

然后我们就有了很多 Action Class:

export class LoadHeroes implements Action {
    readonly type = LOAD_HEROES;
}
export class LoadHeroesFail implements Action {
    readonly type = LOAD_HEROES_FAIL;
    // can pass any error from server-side
    constructor(public payload: any) {}
}
export class LoadHeroesSuccess
    implements Action {
        readonly type = LOAD_HEROES_SUCCESS;
        constructor(public payload: fromCore.Hero[])
{}
}

每个动作类都定义了一个类型属性,因为它实现了 Action 接口。 此外,在某些情况下,需要在自定义 Action 类上定义一个可选的有效负载属性,以便调度此操作的代码可以传入一些额外的数据,这些数据稍后会被 Reducer 用来组成新的状态。


LoadHeroesFail 操作类定义了一个有效负载属性来保存与服务器端通信期间抛出的异常的主体。


类似地,LoadHeroesSuccess 动作类定义了一个有效负载属性,来保存从服务器端检索到的实际英雄数据并将其传递给 Reducer.


最后,因为使用 TypeScript 开发 Angular 应用程序,您可以通过定义一个新的 TypeScript 类型(称为 HeroesAction 类型)来添加一些动作类型检查,以保存上面定义的所有动作类。 这样,reducer 只处理在此类型上定义的操作。

export type HeroesAction =
    | LoadHeroes
    | LoadHeroesFail
    | LoadHeroesSuccess;
相关文章
|
9月前
|
存储 API 网络架构
Angular Ngrx Store 应用程序状态的一些典型例子
Angular Ngrx Store 应用程序状态的一些典型例子
|
9月前
|
存储 JavaScript 前端开发
Angular Ngrx Store 里 State 和 Reducer 的绑定关系是如何实现的
Angular Ngrx Store 里 State 和 Reducer 的绑定关系是如何实现的
|
1月前
|
JavaScript 前端开发 开发者
Angular 开发模式下的辅助工具
Angular 开发模式下的辅助工具
|
1月前
快速创建Angular组件并定义传参、绑定自定义事件的方法
快速创建Angular组件并定义传参、绑定自定义事件的方法
|
7月前
|
JavaScript UED SEO
Angular 应用启用服务器端渲染后 Ngrx store 和 re-hydration 的交互关系
Angular 应用启用服务器端渲染后 Ngrx store 和 re-hydration 的交互关系
|
9月前
|
JavaScript 前端开发 调度
Angular Ngrx 里 Store 和 State 的关系
Angular Ngrx 里 Store 和 State 的关系
|
9月前
|
SQL 数据库
Angular Ngrx store 里的 Selector 介绍
Angular Ngrx store 里的 Selector 介绍
|
1月前
|
存储 前端开发 API
浅谈 Angular 应用前端消息显示机制的一个实际需求
浅谈 Angular 应用前端消息显示机制的一个实际需求
|
1月前
|
设计模式 JavaScript 前端开发
什么是 Angular 应用里的 Custom provider
什么是 Angular 应用里的 Custom provider
|
1月前
|
JavaScript 前端开发 架构师
Angular进阶:理解RxJS在Angular应用中的高效运用
RxJS(Reactive Extensions for JavaScript)是JavaScript的一个响应式编程库,特别适用于处理异步数据流。
33 0