簡而言之：透過 cart reducer 配合 ngrx-store.js 框架程式碼。

搜尋關鍵字 LoadCartSuccess：

![](https://img-blog.csdnimg.cn/img_convert/27c8fdff44201f79dc114a9379ba3ef5.png)

執行時斷點觸發：
![](https://img-blog.csdnimg.cn/img_convert/c5ec14548da5b10d2aea8f472cb0e99f.png)

上下文：cartConnector 的回撥裡。
![](https://img-blog.csdnimg.cn/img_convert/47d11b4bd4cdfb197a37a927f2ae1e36.png)

根據關鍵字 LOAD_CART_SUCCESS 繼續搜尋：
![](https://img-blog.csdnimg.cn/img_convert/5e76ca2d265d2fb75f3ae799a6c7baae.png)

我們明確一點：action 在 reducer 裡進行狀態遷移。

根據這個關鍵字，很快就搜尋到了 LOAD_CART_SUCCESS 所在的狀態遷移：

![](https://img-blog.csdnimg.cn/img_convert/8ea89357cddb0fe85493ccb83a48cc10.png)

可以看到，http.js 上下文裡，呼叫 observer 的 next 方法，將從 Commerce Cloud 後臺返回的 API response，通知其他觀察者。

![](https://img-blog.csdnimg.cn/img_convert/a4fa73fd5bfea76837e5c1e3f67b58fa.png)

![](https://img-blog.csdnimg.cn/img_convert/2a2858977ca052c0dd124301302cb3ca.png)

body 欄位裡才是真正的 payload：
![](https://img-blog.csdnimg.cn/img_convert/62117c1a3f6d5c23640deacc28009ec0.png)

這裡使用 .body, 將 payload 解析出來：
![](https://img-blog.csdnimg.cn/img_convert/8ca89e96ef10f0085d5b5270bdf54b70.png)

在這段程式碼裡，進行 conversion：
![](https://img-blog.csdnimg.cn/img_convert/c1749bfe550a38400ecb89327f8cdaec.png)

此處觸發 Spartacus team 開發的 mergeMap callback：把 HTTP.js 返回的 response，包裝成 LoadCartSuccess 的強型別 payload：
![](https://img-blog.csdnimg.cn/img_convert/ead370007da6220144e967bc90b37b6a.png)

包裝完之後的強型別 response：
![](https://img-blog.csdnimg.cn/img_convert/914ec6cb8673ae20b12386ba6c26c16a.png)

最後 Spartacus cart reducer 被呼叫：
![](https://img-blog.csdnimg.cn/img_convert/5de42443c1b59c42a36d302fa048acd3.png)

reducer 執行完畢後，我們就能在 ngrx-store.js 的 combination 函式里的變數 nextState, 看到最新的 cart memory value：

![](https://img-blog.csdnimg.cn/img_convert/bd7995dcb8b44fd1cf59efbf5d3dfc07.png)

SAP Spartacus 成功讀取 Cart 之後，如何將 payload 插入全域性 state

相關文章