Селектор ngrx вызывается до того, как данные станут доступны - PullRequest
Новая
       73

Селектор ngrx вызывается до того, как данные станут доступны

0 голосов
/ 01 августа 2020

У меня есть родительский компонент 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 завершена.

но у этого родительского компонента есть дочерний граф (дочерний компонент), помещенный в его html. 

   <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
            };
        })
    );

редуктор устанавливает свойство lastThreeYearBalances на действие last3YearBalancesLoaded, но до того, как это произойдет, вызывается last3YearBalancesSelector. и в это время свойство lastThreeYearBalances не установлено. и я получаю сообщение об ошибке.

что я здесь делаю не так?

1 Ответ

0 голосов
/ 01 августа 2020

Селектор возвращает Observable, который, возможно, еще ничего не испустил (технически он испустил начальное состояние). Если в вашем компоненте вам нужно быть уверенным, что вы используете только выбросы, содержащие данные, вы можете отфильтровать их в своем компоненте. Простой пример, который проверяет достоверность излучения, - это добавить: 

filter(data => !!data)

к Observable pipe в потребительском компоненте. Таким образом, будут передаваться только правдивые ценности. Смешайте это с: 

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

вокруг области шаблона, которая потребляет Observable, и вы убедитесь, что не получите никаких ошибок.

...