![](/img/trans.png)
[英]NgRX store.select returns store object instead of observable object
[英]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.