NGRX | store.select(state => state.MyObject) | returns undefined

Question

Situation, I'm trying to retrieve state info using the following approach:

listObject: Array<ListObject>;
this.list$ = this.store.select(state => state.MyListObject);
this.listSub$ = this.list$.subscribe(list => this.listObject = list);

This works for every component except a new component I created a couple days ago. The listSub$ subscription returns an undefined object. The kicker is I can see the state with my Redux DevTools. In state there are two objects in the MyListObject. At a login event, the store is dispatched to load the list; I can see the list load in Redux DevTools as well as logging statements.

I cannot figure out why this.store.select(state => state.MyListObject) returns undefined when state is present. Has anyone seen this issue before?

I made sure that StoreModule.forRoot({}) has my reducer referenced, and the effect I'm using is in the EffectsModule.forRoot([]).

The Problem Code

clatschList: ClatschList;
this.clatschList$ = this.store.select(state => state.ClatschList);
this.ClatschListSub = this.clatschList$.subscribe(list => this.clatschList = list);

MyListObject

export class ClatschList {
  public clatsches: Array<ClatschSummary> = [];
  public links: Array<Link> = [];
}

App State

export interface ClatschesAppState {
  ClatschList: ClatschList;
 }

Action

export type Action
  = LoadMemberClatsches
| LoadMemberClatschesSuccess;

export const LOAD_MEMBER_CLATCHES = 'LOAD_MEMBER_CLATCHES';
export class LoadMemberClatsches {
  readonly type = LOAD_MEMBER_CLATCHES;
  constructor() {}
}

export const LOAD_MEMBER_CLATCHES_SUCCESS = 'LOAD_MEMBER_CLATCHES_SUCCESS';
export class LoadMemberClatschesSuccess {
  readonly type = LOAD_MEMBER_CLATCHES_SUCCESS;
  constructor(public clatschList: ClatschList) {}
}

Reducer

export function MemberClatschesReducer(state: ClatschList = new 
ClatschList(), action: ClatschAction.Action) {

  switch (action.type) {
    case ClatschAction.LOAD_MEMBER_CLATCHES_SUCCESS: {
      return action.clatschList;
    }

    default: {
      return state;
    }
  }
}

Effect

  @Effect() LoadMemberClatschList$ = this.actions$
      .ofType(ClatschAction.LOAD_MEMBER_CLATCHES).pipe(
        switchMap((action: LoadMemberClatsches) =>
          this.clatschService.FindAllByMember().pipe(
            map(list => new ClatschAction.LoadMemberClatschesSuccess(list)))
        )
      );

Module

@NgModule({
  imports: [
    CommonModule,
    HttpClientModule,
    AuthorizationModule,
    StoreModule.forRoot(
               {  makerContext: makerContextReducer,
                  makers: makerReducer,
                  locations: locationsReducer,
                  locationSearchResult: locationSearchResultReducer,
                  locationSearchResultDetail: locationSearchResultDetailReducer,
                  events: MakerEventsReducer,
                  eventContext: EventContextReducer,
                  EventList: EventListReducer,
                  EventListPagination: EventListPaginationReducer,
                  SelectedEvent: SelectedEventReducer,
                  MemberClatschList: MemberClatschesReducer,
        }),
    EffectsModule.forRoot( [MakerEffect, LocationEffect, EventEffect, 
ClatschEffect]),
    StoreDevtoolsModule.instrument()
  ],
  declarations: [LocationSearchComponent],
  providers: [ MakerService,
    StorageService,
    EventService,
    LocationService,
    ClatschRepositoryService,
    ClatschService,
    ApiResourceService,
    LoggingService,
    UserNotificationService,
    HttpErrorHandlerService ]
})

export class CoreModule { }

Answer 1

Ok thanks for posting the rest of the code. I found your problem. In the module, you declared:

StoreModule.forRoot({  
    ...
    MemberClatschList: MemberClatschesReducer,
})

That means your app state will have a property MemberClatschList which will be handled by the MemberClatschesReducer, but both in the AppState interface and your component you called the property ClatschList. It always returns undefined because you're trying to access state.ClatschList, when in reality it should be state.MemberClatschList