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 只处理在此类型上定义的操作。

扫描二维码关注公众号，回复： 14390229 查看本文章

export type HeroesAction =
    | LoadHeroes
    | LoadHeroesFail
    | LoadHeroesSuccess;

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

猜你喜欢