Store 資料夾資料結構的一個典型例子：

![](https://img-blog.csdnimg.cn/img_convert/5f7ed465cbfc5cf2aeae2fa95d5086bd.png)

當您第一次使用 ngrx/store 模組時，必須決定執行應用程式所需的操作。 首先分析從伺服器端載入 Heroes 資料的過程並決定應該進行哪些 Action 建模。

- 從伺服器端載入所有英雄資料，因此需要一個載入英雄的動作。
- 一個 Effect 啟動並從伺服器端檢索英雄資料。 Effect 還需要通知 Store 我們已經成功地檢索到了 Heroes 資料，因此它需要排程一個動作（Load Heroes Success Action）。如果與伺服器端的通訊失敗或出於任何其他原因，Effect 會排程另一個動作（載入英雄失敗）進行錯誤處理。

Ngrx Store 提供的 Action 介面：

```typescript
export interface Action {
    type: string;
}
```

我們建立一些字串常量，作為 Action 的標識：

```typescript
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：

```typescript
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 只處理在此型別上定義的操作。

```typescript
export type HeroesAction =
    | LoadHeroes
    | LoadHeroesFail
    | LoadHeroesSuccess;

```

Angular Ngrx Store 工具庫裡 Action 定義指南

相關文章