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

SAP Commerce Cloud Spartacus UI 的 ActionClass 数据结构设计相关推荐

  1. SAP Commerce Cloud Spartacus UI 的购物车 Cart 功能

    此功能是在 TUA Spartacus 库的 1.0 版中引入的. 购物车在 TUA Spartacus 与核心 Commerce Spartacus 中的工作方式不同,需要支持产品供应以及复杂的定价 ...

  2. SAP Commerce Cloud Spartacus UI footer 区域的设计模型

    本文研究如下图高亮所示的 SAP 电商云 Footer 区域的设计明细. 对应的 HTML markdup 入口:cx-footer-navigation: cx-footer-navigation ...

  3. 如何获取 SAP Commerce Cloud Spartacus UI 购物车 Cart 的加载状态

    在 Storefront AppModule 构造函数里注入 ActiveCartService: private cartService: ActiveCartService, 调用其 API: c ...

  4. SAP Commerce Cloud Spartacus UI 4.0.1 版本的安装

    官方文档 使用命令行创建一个基于 Angular 12 的 应用: ng new mystore --style=scss 务必注意 SAP Spartacus 4 以上的安装环境要求: 然后命令行调 ...

  5. SAP Commerce Cloud Spartacus UI 读取 Component 元数据的 Action 设计

    先看数据:该 page 包含了 35 个 Components: 可以看到这些 Components 属于 homepage,但是 payload 字段里,只包含了 35 个 Components 其 ...

  6. SAP Commerce Cloud Spartacus UI 修改 primary color 的方法

    问题 解答 The easiest and recommended way to override basic primary colors, as of version 4.0, is by cha ...

  7. SAP Commerce Cloud Spartacus UI 的高阶 reducer 设计

    在 components.reducer.ts 里,loaderReducer 函数,会根据输入的 entityType,返回一阶 reducer. 然后在代码第86行,调用该一阶 reducer 进 ...

  8. SAP Commerce Cloud 新一代 UI Spartacus 和 Customer Data cloud 的集成

    SAP Customer Data Cloud Integration Spartacus 3.2 版可用. SAP Customer Data Cloud 允许您启用自定义注册和登录,还可以管理用户 ...

  9. SAP Commerce Cloud Product Action 导出的层级结构设计

    以 ProductReview Effect 为例,代码里使用了 ProductActions: 这个 productAction 是从一个 index.ts 里导入的: index.ts 首先从一个 ...

最新文章

  1. Numpy之N维数组-ndarray
  2. 深入解析和反思携程宕机事件
  3. WebRTC的优缺点
  4. 06 Jquery 基础
  5. mysql transaction用法,mysql的事务,隔离级别和锁用法实例分析
  6. SpringBoot项目遇到的一些问题
  7. python有道字典_Python基于有道实现英汉字典功能
  8. 非参数统计的Python实现—— Fisher 精确性检验
  9. c语言中负数参与除法,C语言中负数除法与右移取整问题
  10. vue 富文本编辑器 Editor 使用
  11. 如何用photoshop做24色环_怎么使用PS制作24色环?
  12. 小镇青年程序员的逆袭人生:从差点回老家到荔枝技术骨干
  13. C++Builder的基本功能
  14. h3c 抓包么 能通过debug_华三路由器可以抓包吗 路由器密码
  15. react router 路由守卫_react实现路由守卫
  16. 读书笔记012:《伤寒论》- 手少阳三焦经
  17. 如何下载 Chrome 应用商店的 .crx 文件
  18. NDK中LOCAL_SHARED_LIBRARIES
  19. 在项目中使用iconfont图标(在线使用)
  20. echarts x 起始_echarts实现获取datazoom的起始值(包括x轴和y轴)

热门文章

  1. Java 基础 - 各项集合实现
  2. SQLServer中round函数
  3. #11 硬连接与软链接与RAID与LVM2
  4. 可再生能源建设提速 风电光伏业高景气可期
  5. 解决pl/sql devloper 中数据库操作语句中文乱码的问题
  6. 设计模式(命令模式)
  7. Android 应用交互框架浅析
  8. OLEDB Excel 与C# 的数据流通方法
  9. Steps to install Domino Server 8.5.1 on AIX 6
  10. 转载:Django之Form组件