在数据可用之前调用 ngrx 选择器

Question

我有一个父组件 DashBoardComponent，它在登录时调用 loadLast3YearBalances 操作

this.store
  .select(loggedInUserBankAccountId)
  .subscribe((loggedBankAccountId) => {
    this.store.dispatch(DashBoardActions.loadLast3YearBalances( { loggedBankAccountId }));
  });

这个动作调用一个效果

  loadlast3YearsBlances$ = createEffect(() =>
this.actions$.pipe(
  ofType(DashBoardActions.loadLast3YearBalances),
  concatMap((action) =>
    this.graphHttpService.getYearlyBalance(action.loggedBankAccountId).pipe(
      tap((data) => {
        this.notifyService.showSuccess(
          'Last Three Year Balances Loaded',
          'Sucess'
        );
      }),
      map((balances) =>
        DashBoardActions.last3YearBalancesLoaded({ balances })
      ),
       catchError((err) => {
        this.notifyService.showError(
          'Error While Loading Last Three Year Balances',
          'Error'
        );
        return of(DashBoardActions.last3YearBalancesLoadError());
      })
    )
  )
)

);

DashBoardActions.last3YearBalancesLoaded 这个动作告诉系统 loadLast3YearBalances 已经完成。

但是这个Parent组件在其html中放置了一个child graph（子组件）。

   <app-total-balance-graph></app-total-balance-graph>

此总余额图使用一个扇区。

ngOnInit() {
this.last3YearBalances$ = this.store.pipe(
  select(last3YearBalancesSelector)
); 
 ....

这个选择器是这样定义的

        import { createSelector } from '@ngrx/store';

    export const last3YearBalancesSelector = createSelector(
    state => state['dash'],
    (dash) => dash['lastThreeYearBalances']
    );

减速器是这样定义的

        import { createReducer, on } from '@ngrx/store';
    import { LineGraphData } from '../../total-balance-graph/lineGraphData';
    import { DashBoardActions } from '../action-types';


    export interface DashState {
    lastThreeYearBalances: LineGraphData[];
    }

    export const initialDashState: DashState = {
        lastThreeYearBalances: null
    };

    /* export const reducers: ActionReducerMap<DashState> = {

    }; */

    export const dashReducer = createReducer(
        initialDashState,
        on(DashBoardActions.last3YearBalancesLoaded, (state, action) => {
            return {
                lastThreeYearBalances: action.balances
            };
        })
    );

reducer 在 action last3YearBalancesLoaded 上设置 'lastThreeYearBalances' 属性但在此之前 'last3YearBalancesSelector' 被调用。那时 'lastThreeYearBalances' 属性没有设置。我得到了错误。

我哪里做错了？

Answer 1

选择器 returns 一个 Observable，它可能还没有发出任何东西（从技术上讲它会发出初始状态）。如果在您的组件中，您需要确保只使用包含排放的数据，则可以在您的组件中对其进行过滤。一个检查发射是否真实的简单示例是添加：

filter(data => !!data)

到消费者组件中的 Observable pipe。这样，只有 truthy 值才会通过。将其与：

混合

<ng-container *ngIf="myObservable$ | async as data">
</ng-container>

在消耗 Observable 的模板区域周围，您将确保不会出现任何错误。

在数据可用之前调用 ngrx 选择器

ngrx selector is called before the data is available

state-management

ngrx

ngrx-effects

angular

ngrx-store