以 CmsSetPageSuccessIndex 為例：

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

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

meta

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

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

loader 表明該 entity 載入狀況。

payload

包含的業務資料：

type

字串型別。

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

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

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 的實現：

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

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

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

entitySuccessMeta 可以看成一個構造器或者工廠函式：

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

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 製造：

export function loadMeta(entityType: string): LoaderMeta {
  return {
    entityType: entityType,
    loader: {
      load: true,
    },
  };
}

EntityMeta 欄位的值，通過 entityMeta 構造：

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

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

更多Jerry的原創文章，盡在："汪子熙":