選擇器 selector 是用于獲取存儲狀態(tài) state 切片的純函數(shù)。

@ngrx/store 提供了一些幫助函數(shù)來優(yōu)化這個選擇。 選擇器在選擇狀態(tài)切片時提供了許多功能。

使用 createSelector 和 createFeatureSelector 函數(shù)時，@ngrx/store 會跟蹤調(diào)用選擇器函數(shù)的最新參數(shù)，在 ngrx-store.js 里完成。

因為選擇器是純函數(shù)，當參數(shù)匹配時可以返回最后一個結果，而無需重新調(diào)用選擇器函數(shù)。這可以提供性能優(yōu)勢，特別是對于執(zhí)行昂貴計算的選擇器。這種做法被稱為 memoization.

最佳實踐：

設計一個 featureState 包含了具體的應用邏輯。使用 createSelector 工具函數(shù)創(chuàng)建 selector.

Spartacus 里有類似設計：

看個例子：

export class AppModule { constructor(private config: DebugConfig,private actions$: Actions,private cartService: ActiveCartService,private store: Store<StateWithMultiCart>){// console.log('Jerry config: ', this.config);/*const action = this.actions$.pipe(ofType(CartActions.LOAD_CART),map((action: CartActions.LoadCart) => action.payload),tap((data) => console.log('Jerry cart: ' , data)));action.subscribe();const action2 = this.actions$.pipe(ofType(CartActions.LOAD_CART_SUCCESS),map((action: CartActions.LoadCartSuccess) => action.payload),tap((data) => console.log('Jerry cart SUCCESS: ' , data)));action2.subscribe();*/const action3 = this.actions$.pipe(ofType(CartActions.LOAD_CART_SUCCESS),map((action: CartActions.LoadCartsSuccess) => action.payload),tap((data) => {console.log('Jerry cart SUCCESS: ' , data);this.store.pipe(select(MultiCartSelectors.getMultiCartEntities)).subscribe((value) => {console.log('Jerry result from selector: ', value);});}));action3.subscribe();/*const loading$ = this.cartService.getLoading();loading$.subscribe((data) => console.log('Jerry cart loading? ', data));*/} }

運行時：

第一層：entities
第二層：000001
第三層：error，loading，success，processesCount 和 value.

這個 state 的結構是在哪里定義的呢？

在 feature 的 store 文件夾下。

ProcessesLoaderState 提供了 processesCount 字段，它本身又是 LoaderState 類型：

因此也具有了 loading, error, success 和 value 四個字段：

EntityState 接口，本身又提供了第一層的 entities 結構和第二層的 id 結構。

在我寫下面這段高亮代碼的上下文里，Cart 肯定已經(jīng)可用了，因為它是在 LOAD_CART_SUCCESS 的回調(diào)里執(zhí)行的。

單步調(diào)試：

先執(zhí)行distinguished，再執(zhí)行 map：

value 包含了所有的 state 數(shù)據(jù)：

直接從內(nèi)存里返回上一次的 result：

強行在調(diào)試器里把值改了。

被迫重新執(zhí)行 projectionFn：

注意，這個強行改值需要進行兩次。

首先獲得 feature state：

再從 state 里將 carts 數(shù)據(jù)提取出來：

大功告成：

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的使用 selector 从 SAP Spartacus state 里读取 Cart 数据的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。