繁体   English   中英

NGRX | store.select(状态=> state.MyObject)| 返回未定义

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

在这种情况下,我正在尝试使用以下方法检索状态信息:

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

这适用于除我几天前创建的新组件以外的所有组件。 listSub $订阅返回一个未定义的对象。 最重要的是,我可以使用Redux DevTools查看状态。 在状态下,MyListObject中有两个对象。 在登录事件中,将调度商店以加载列表。 我可以在Redux DevTools中看到列表加载以及日志记录语句。

我无法弄清楚为什么有状态时this.store.select(state => state.MyListObject)返回未定义的原因。 有人看过这个问题吗?

我确保StoreModule.forRoot({})引用了我的减速器,并且我正在使用的效果在EffectsModule.forRoot([])中。

问题代码

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> = [];
}

应用状态

export interface ClatschesAppState {
  ClatschList: ClatschList;
 }

行动

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

减速器

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() LoadMemberClatschList$ = this.actions$
      .ofType(ClatschAction.LOAD_MEMBER_CLATCHES).pipe(
        switchMap((action: LoadMemberClatsches) =>
          this.clatschService.FindAllByMember().pipe(
            map(list => new ClatschAction.LoadMemberClatschesSuccess(list)))
        )
      );

模组

@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 { }

好的,谢谢您发布其余的代码。 我发现了你的问题。 在模块中,您声明了:

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

这意味着您的应用程序状态都会有一个属性MemberClatschList将由处理MemberClatschesReducer在届时AppState接口,但都和你的组件,你叫物业ClatschList 它总是返回undefined因为您正在尝试访问state.ClatschList ,而实际上应该是state.MemberClatschList

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM