SAP Commerce Cloud Spartacus UI 的 ActionClass 数据结构设计

2021年09月15日 阅读数:4
这篇文章主要向大家介绍SAP Commerce Cloud Spartacus UI 的 ActionClass 数据结构设计,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

以 CmsSetPageSuccessIndex 为例:typescript

运行时该 Action 类包含三大字段:函数

(1) meta
(2) payload
(3) typespa

meta

meta 包含的 loader 字段和 meta 自己都是一个 object.code

meta.entityId 和 entityType 是该 action payload 的标识位。ip

loader 代表该 entity 加载情况。原型链

payload

包含的业务数据:rem

type

字符串类型。
字符串

从 上图 Prototype 能看出,CmsSetPageSuccessIndex 的原型链类为 EntitySuccessAction.原型

这一点也能从其实现代码看出:string

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的原创文章,尽在:"汪子熙":