SAP Commerce Cloud Spartacus UI 的 ActionClass 数据结构设计
以 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 数据结构设计相关推荐
- SAP Commerce Cloud Spartacus UI 的购物车 Cart 功能
此功能是在 TUA Spartacus 库的 1.0 版中引入的. 购物车在 TUA Spartacus 与核心 Commerce Spartacus 中的工作方式不同,需要支持产品供应以及复杂的定价 ...
- SAP Commerce Cloud Spartacus UI footer 区域的设计模型
本文研究如下图高亮所示的 SAP 电商云 Footer 区域的设计明细. 对应的 HTML markdup 入口:cx-footer-navigation: cx-footer-navigation ...
- 如何获取 SAP Commerce Cloud Spartacus UI 购物车 Cart 的加载状态
在 Storefront AppModule 构造函数里注入 ActiveCartService: private cartService: ActiveCartService, 调用其 API: c ...
- SAP Commerce Cloud Spartacus UI 4.0.1 版本的安装
官方文档 使用命令行创建一个基于 Angular 12 的 应用: ng new mystore --style=scss 务必注意 SAP Spartacus 4 以上的安装环境要求: 然后命令行调 ...
- SAP Commerce Cloud Spartacus UI 读取 Component 元数据的 Action 设计
先看数据:该 page 包含了 35 个 Components: 可以看到这些 Components 属于 homepage,但是 payload 字段里,只包含了 35 个 Components 其 ...
- 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 ...
- SAP Commerce Cloud Spartacus UI 的高阶 reducer 设计
在 components.reducer.ts 里,loaderReducer 函数,会根据输入的 entityType,返回一阶 reducer. 然后在代码第86行,调用该一阶 reducer 进 ...
- SAP Commerce Cloud 新一代 UI Spartacus 和 Customer Data cloud 的集成
SAP Customer Data Cloud Integration Spartacus 3.2 版可用. SAP Customer Data Cloud 允许您启用自定义注册和登录,还可以管理用户 ...
- SAP Commerce Cloud Product Action 导出的层级结构设计
以 ProductReview Effect 为例,代码里使用了 ProductActions: 这个 productAction 是从一个 index.ts 里导入的: index.ts 首先从一个 ...
最新文章
- Numpy之N维数组-ndarray
- 深入解析和反思携程宕机事件
- WebRTC的优缺点
- 06 Jquery 基础
- mysql transaction用法,mysql的事务,隔离级别和锁用法实例分析
- SpringBoot项目遇到的一些问题
- python有道字典_Python基于有道实现英汉字典功能
- 非参数统计的Python实现—— Fisher 精确性检验
- c语言中负数参与除法,C语言中负数除法与右移取整问题
- vue 富文本编辑器 Editor 使用
- 如何用photoshop做24色环_怎么使用PS制作24色环?
- 小镇青年程序员的逆袭人生:从差点回老家到荔枝技术骨干
- C++Builder的基本功能
- h3c 抓包么 能通过debug_华三路由器可以抓包吗 路由器密码
- react router 路由守卫_react实现路由守卫
- 读书笔记012:《伤寒论》- 手少阳三焦经
- 如何下载 Chrome 应用商店的 .crx 文件
- NDK中LOCAL_SHARED_LIBRARIES
- 在项目中使用iconfont图标(在线使用)
- echarts x 起始_echarts实现获取datazoom的起始值(包括x轴和y轴)