SAP 电商云 Spartacus UI 设置 Delivery Mode 的时序分析和一个竞争条件问题分享

(1) State.loading这个值存储在什么地方的？
(2) 什么时候变为 true？什么时候变为 false？

Component/service 需要消费存储在 store 中的数据，通过 Store 和 Selector 完成。
例子：

Component 需要改变 store 中的数据时，不能直接修改 store，通过 action 和 store：246 行

Action 触发 reducer，一个有限状态自动机。不能直接修改状态，只能根据当前状态，返回新的状态。
Loading：true

从 loading：false 跳转到 loading: true, 中间经过了哪些步骤？

只有 Cart stable 和 checkout 数据加载完成时，才能调用 HTTP PUT：

从上面的代码能看出：

Wait?

在 3G 网络下，我匀速点了8次：第一次点击的是 standard delivery

console.log 显示每一次点击都会触发一次 HTTP 请求，但不一定是即时触发，有排队现象。

所以，当我点了 radio input 之后，如果不满足 cart stable = true，checkout loading = false 的前提，HTTP PUT 就发不出去，loading 状态就没办法变为 true.

问题转而变为研究 cart stable 和 checkout loading 的变化规律。

成功设置 DeliveryMode 之后，就触发 Cart 加载：

Cart 加载完毕之后，就会通过代码第59行加载 checkout detail.

因此，delivery mode(HTTP PUT)和 cart，checkout loading，是三个串行的 HTTP 操作。

第一次点击发生在 t0，如果第二次点击发生在 t3 之后，则没有任何问题。
如果第二次点击发生在 t1~t3 之间(3G 网络)，就会出现问题。

最终解决方案：
用 delivery mode，cart stable， checkout loading 三个因素同时控制。

更多Jerry的原创文章，尽在：“汪子熙”:

SAP 电商云 Spartacus UI 设置 Delivery Mode 的时序分析和一个竞争条件问题分享相关推荐

SAP 电商云 Spartacus UI 设置 delivery mode 在 3G 慢速网络下的排队效果
能看到明显的HTTP PUT 请求的排队效果. 从发送请求的时间戳也能看出. 一旦 filter 条件满足之后: 会并行发送所有的 HTTP put 请求: 这段代码什么时候会被调用?setMode ...
SAP 电商云 Spartacus UI 修改 Delivery Mode 触发的三个 HTTP 请求
LoaderState: loading 状态在 true 和 false 之间的切换,通过 loader .reducer.ts 里的 reducer 函数进行.每次通过 store.dispatc ...
SAP 电商云 Spartacus UI set delivery mode HTTP put 请求的触发时机
看下面这段代码: context('Group Skipping - Checkout', () => {before(() => {cy.requireLoggedIn().then(( ...
SAP 电商云 Spartacus UI 里如何捕捉语言设置的更改
我们知道在 SAP 电商云 Spartacus UI 里,用户可以通过下拉菜单更改当前访问 site 的语言: 监控语言变化的代码: this.subscription.add(this.langua ...
SAP 电商云 Spartacus UI 从 CMS 取回 slots 和 component 之后的处理
从前一篇文章SAP 电商云 Spartacus UI 的双重 layout 配置层设计我们得知,Spartacus 层面的 layout-config.ts 可以控制 page template 应 ...
SAP 电商云 Spartacus UI 产品搜索结果的设计明细
我们使用如下 url 访问 SAP 电商云 Spartacus UI 产品搜索页面: http://localhost:4000/electronics-spa/en/USD/search/sony ...
Mobile first 设计思路在 SAP 电商云 Spartacus UI 中的设计体现一例
关于 Mobile First 的概念,请查看我这篇文章:什么是前端开发中的 mobile first 策略. 下图是 SAP 电商云 Spartacus UI 的搜索结果页面: 其布局设计:temp ...
SAP 电商云 Spartacus UI ComponentDataProvider defer 工厂函数
为什么 this.componentService.getItems 最后就触发到 Component-data.provider.ts 工厂函数的执行了? 29行的 getService: getS ...
在 SAP 电商云 Spartacus UI 里手动注入 module 的几种排列组合
先把所有的排列组合罗列如下: (1) 通过构造函数注入 QuickOrderFacade,但不调用其方法 (2) 通过构造函数注入 QuickOrderFacade,调用其方法 (3) 手动通过 in ...

SAP 电商云 Spartacus UI 设置 Delivery Mode 的时序分析和一个竞争条件问题分享

SAP 电商云 Spartacus UI 设置 Delivery Mode 的时序分析和一个竞争条件问题分享相关推荐

最新文章

热门文章