为啥我使用有效的 withLatestFrom 操作从选择器获取具有动作观察者属性的对象？

Posted 2023-02-19

【中文标题】为啥我使用有效的 withLatestFrom 操作从选择器获取具有动作观察者属性的对象？

【英文标题】：Why Am I getting an object with action observer property from selector using withLatestFrom operation in effect?为什么我使用有效的 withLatestFrom 操作从选择器获取具有动作观察者属性的对象？

【发布时间】：2022-01-06 14:10:10

【问题描述】：

“res”值是一个对象，即不是检索与选择器相关的数据，是在其他地方工作，但实际上是获取这个对象。为什么会这样？

constructor(
      private serviceStore: Store<DataState>,
) 

  searchForLatest$ = createEffect(() =>
      this._actions.pipe(
          ofType<GetLatestRequestService>(GetLatestData),
          withLatestFrom(( id ) => 
             this.serviceStore.select(getlatestData(id)),
          mergeMap(res => 
              


 actionsObserver:  
      closed: false,
      hasError: false,
      isStopped: false,
      observers: [SkipSubscriber],
      thrownError: null,
      _isScalar: false,

operator: 
      compare: undefined
      keySelector: undefined

reducerManager: 
      closed: false
      dispatcher: DevtoolsDispatcher _isScalar: false, observers: Array(1), closed: false, 
      isStopped: false, hasError: false, …
      hasError: false
      initialState: undefined
      isStopped: false
      observers: [MapSubscriber]
      reducerFactory: (reducers, initialState) => …
      reducers: uiContext: ƒ, parties: ƒ, user: ƒ, organizationsDetail: ƒ, activeRoute: ƒ, …
      thrownError: null
      _isScalar: false
      _value: (state, action) =>

Source: 
     actionsObserver: ActionsSubject _isScalar: false, observers: Array(1), closed: false, 
     isStopped: false, hasError: false, …
     operator: MapOperator thisArg: undefined, project: ƒ
     reducerManager: ReducerManager _isScalar: false, observers: Array(1), closed: false, 
     isStopped: false, hasError: false, …
     source: Store _isScalar: false, actionsObserver: ActionsSubject, reducerManager: 
     ReducerManager, source: Observable
     _isScalar: false

_isScalar: 假

【问题讨论】：

看来你没有正确应用 withLatestFrom 应该与像 withLatestFrom(anObservable$) 这样的可观察对象一起使用。重新表述你的要求，你想要达到的目标是什么？

这是一个可观察的 this.serviceStore.select(getlatestData(id))，我需要从该选择器中检索最新数据，问题是之前方法中的操作符实际上 withLatestFrom 就足够了从存储中获取数据。

【参考方案1】：

v13 中的效果更新了从选择器中检索最新数据的方法，我需要使用 concatLatestFrom 运算符来获取数据。

@Injectable()
export class CollectionEffects 
  addBookToCollectionSuccess$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType(CollectionApiActions.addBookSuccess),
        concatLatestFrom(action => this.store.select(fromBooks.getCollectionBookIds)),
        tap(([action, bookCollection]) => 
          if (bookCollection.length === 1) 
            window.alert('Congrats on adding your first book!');
           else 
            window.alert('You have added book number ' + bookCollection.length);
          
        )
      ),
     dispatch: false 
   );

  constructor(
    private actions$: Actions,
    private store: Store<fromBooks.State>
  ) 

注意：出于性能原因，请使用 concatLatestFrom 之类的扁平化运算符来防止选择器触发，直到调度正确的操作。