javascript - NGRX | store.select(state => state.MyObject) | 返回未定义
问题描述
情况,我正在尝试使用以下方法检索状态信息:
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) 在 state 存在时返回 undefined 。有没有人见过这个问题?
我确保 StoreModule.forRoot({}) 引用了我的减速器,并且我使用的效果在 EffectsModule.forRoot([]) 中。
问题代码
clatschList: ClatschList;
this.clatschList$ = this.store.select(state => state.ClatschList);
this.ClatschListSub = this.clatschList$.subscribe(list => this.clatschList = list);
我的列表对象
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
推荐阅读
- javascript - 使元素随着鼠标移动而移动
- css - 在 weasyprint 中不知道其编号的情况下样式化 pdf 页面
- linux - 如何使用 IF 测试一个值是否满足某个掩码
- rust - 创建引用错误的递归列表“由于要求冲突,无法推断 autoref 的适当生命周期”
- typescript - Typescript 可以使用对象属性作为命名空间吗?
- powershell - PowerShell 写入 Word,动态计算 Padding 以进行对齐
- java - 对象 obj = true; 但是Java说 obj 是布尔值
- java - 在webview android java中检测声音
- json - 解析包含项目列表的大型嵌套 Json 时出现问题
- linux - 无法删除 Fedora 33 和 Docker 上的网桥