選擇器 selector 是用于獲取存儲狀態 state 切片的純函數。

@ngrx/store 提供了一些幫助函數來優化這個選擇。 選擇器在選擇狀態切片時提供了許多功能。

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

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

最佳實踐：

設計一個 featureState 包含了具體的應用邏輯。使用 createSelector 工具函數創建 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 肯定已經可用了，因為它是在 LOAD_CART_SUCCESS 的回調里執行的。

單步調試：

先執行distinguished，再執行 map：

value 包含了所有的 state 數據：

直接從內存里返回上一次的 result：

強行在調試器里把值改了。

被迫重新執行 projectionFn：

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

首先獲得 feature state：

再從 state 里將 carts 數據提取出來：

大功告成：

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。