以 CmsSetPageSuccessIndex 為例：

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

執行時該 Action 類包含三大欄位：

(1) meta
(2) payload
(3) type

# meta

meta 包含的 loader 欄位和 meta 本身都是一個 object.

meta.entityId 和 entityType 是該 action payload 的標識位。

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

loader 表明該 entity 載入狀況。

# payload

包含的業務資料：

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

# type

字串型別。
![](https://img-blog.csdnimg.cn/img_convert/78dfd10aa49bffa5634bf07e8db8e48f.png)

從 上圖 Prototype 能看出，CmsSetPageSuccessIndex 的原型鏈類為 EntitySuccessAction.

這一點也能從其實現程式碼看出：

```typescript
export class CmsSetPageSuccessIndex extends StateUtils.EntitySuccessAction {
  readonly type = CMS_SET_PAGE_SUCCESS_INDEX;
  constructor(pageContext: PageContext, payload: Page) {
    super(pageContext.type, pageContext.id, payload);
  }
}
```

檢視 EntitySuccessAction 的實現：

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

屬性1，meta 屬性，定義在該類裡。
屬性2，payload，透過建構函式引數定義。
屬性3，type，定義在上圖81行，然後被 CmsSetPageSuccessIndex 過載。

EntitySuccessAction 建構函式接收三個引數：entityType，id 和 payload.

透過 entityType 和 id，生產出 meta 欄位。

entitySuccessMeta 可以看成一個構造器或者工廠函式：
![](https://img-blog.csdnimg.cn/img_convert/f074fa41aadeefbb358f83f3d2df7fcd.png)

根據 entityType 和 id，生產出 EntityLoaderMeta, 後者是 EntityMeta 和 LoaderMeta 的聯合。

```typescript

export interface EntityMeta {
  entityType: string;
  entityId: string | string[];
  entityRemove?: boolean;
}

export interface LoaderMeta {
  entityType: string;
  loader: {
    load?: boolean;
    error?: any;
    success?: boolean;
  };
}
```

採用三個點的語法，是因為這兩個 interface，都有同名欄位：entityType

LoaderMeta 的執行時資料，透過構造器 loadMeta 製造：

```typescript
export function loadMeta(entityType: string): LoaderMeta {
  return {
    entityType: entityType,
    loader: {
      load: true,
    },
  };
}
```
EntityMeta 欄位的值，透過 entityMeta 構造：

```typescript

export function entityMeta(type: string, id: string | string[]): EntityMeta {
  return {
    entityType: type,
    entityId: id,
  };
}
```

執行時透過 PageEffect 從 Commerce Cloud 後臺讀取 CMS 資料成功後，新建 ActionClass，將負載透過建構函式引數傳入。

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

SAP Commerce Cloud Spartacus UI 的 ActionClass 資料結構設計

相關文章