使用 selector 从 SAP Spartacus stat

2021-10-15 本文已影响0人华山令狐冲

选择器 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));*/
  }
}

运行时：