Angular store state undefined

Question

I have an Angular 7 application which uses the ngrx-store with entities. There is a problem in that the elements of my store state are undefined in my effect.

Here is a snippet of the effect:

@Effect()
loadAccountSummaries$ = this.action$.pipe(
  ofType(fromAccountSummary.LOAD_ACCOUNT_SUMMARIES),
  withLatestFrom(this.store),
  filter(([ action, storeState ]: [ Action, State ]) => {
     // storeState.accountSummaries is undefined
     return !(storeState.accountSummaries.loaded || storeState.accountSummaries.loading)
    }
  ),
  switchMap(() => {
    this.store.dispatch(new LoadingAccountSummaries());
    return this.accountSummaryService.loadAccountSummaries()
      .pipe(map(accountSummaries => {
        this.store.dispatch(new LoadingAccountSummaries());
        return new fromAccountSummary.LoadAccountSummariesSuccess(accountSummaries);
      }));
  }));

My reduer includes the folllowing:

export interface AccountSummariesState extends EntityState<AccountSummary> {
  loading: boolean;
  loaded: boolean;
}

The initial state is like this:

export const initialAccountSummariesState: AccountSummariesState = adapter.getInitialState({
  loading: false,
  loaded: false
});

The reducer is initialised like this:

export function reducer(
  state = initialAccountSummariesState,
  action: fromAccountSummary.AccountSummaryActionsUnion
) {
  // ...
}

The state and reducers are registered like this:

export interface State {
  accountSummaries: fromAccountSummary.AccountSummariesState;
  contributionDetails: fromContributionDetail.ContributionDetailState;
}

export const reducers: ActionReducerMap<State> = {
  accountSummaries: fromAccountSummary.reducer,
  contributionDetails: fromContributionDetail.reducer
};


@NgModule({
  imports: [
    // ...
    StoreModule.forFeature('accountSummary', reducers.accountSummaries),
    StoreModule.forFeature('contributionDetail', reducers.contributionDetails),
    EffectsModule.forFeature([ AccountSummaryEffects, ContributionDetailEffects ])
    // ...
  ]
})

Why is my storeState.accountSummaries undefined in my effect? I have registered and initialised everything correctly as far as I can tell.

Przemyslaw Jan Beigert Przemyslaw Jan Beigert · Accepted Answer · 2019-03-28T13:24:58

In ngrx module you're creating accountSummary feature but you call accountSummaries key. Try to change call into storeState.accountSummary

Angular store state undefined

1 Answers