如何从ngrx中拉取信息到组件文件
How to pull information from ngrx to component file
我已将 ngrx 库添加到我的项目中,以便我可以为我的数据创建更具反应性的模型。我已经设置了我的动作、减少、效果文件。我相信这些文件可以正常工作,因为在效果文件中记录结果时我能够看到填充的模型。但是,我无法让这些结果显示在组件中。我曾尝试在网上寻找解决方案,但没有成功。如果有人能在我的代码中发现错误,请告诉我如何解决这个问题。我将从效果和组件文件中添加必要的代码,因为我认为这里存在问题。如果有人要其他文件的内容,我也会加上这个。
效果:
@Effect()
getOperatorFacts: Observable<any> = this.actions
.pipe(
ofType(GetOperatorFacts),
map((action) => action),
switchMap(action => this.operatorSanityService.getOperatorsThatHaveOperatorFacts(action.payload)
.pipe(
map( (results: OperatorFacts) => {
GetOperatorFactsSuccess({payload: results});
console.log('From effects file', results);
}),
catchError((err) => of( GetOperatorFactsFailure({payload: err})))
)
)
);
正在尝试从组件中获取内容:
this.store.dispatch(GetOperatorFacts({payload: true}));
const x = this.store.pipe(select(getOperatorFactsState));
x.subscribe(res => {
console.log('ajde ajde', res);
});
以下代码吐出以下两个错误:
core.js:4352 ERROR Error: Effect "OperatorFactsEffects.getOperatorFacts" dispatched an invalid action: undefined
ERROR TypeError: Actions must be objects
解决方案:
按照 Marek W 的建议在成功和失败函数之前添加 return 语句解决了代码中的错误。我遇到的另一个问题是在选择器中我 returning state.OperatorFacts。进行更改,以便它只会 return 状态是使信息出现在组件文件中的正确调用。
您需要return新的操作。
// code
map((results: OperatorFacts) => {
console.log('From effects file', results);
return new GetOperatorFactsSuccess({payload: results});
}),
// code
同样适用于您的 catchError
块。
我已将 ngrx 库添加到我的项目中,以便我可以为我的数据创建更具反应性的模型。我已经设置了我的动作、减少、效果文件。我相信这些文件可以正常工作,因为在效果文件中记录结果时我能够看到填充的模型。但是,我无法让这些结果显示在组件中。我曾尝试在网上寻找解决方案,但没有成功。如果有人能在我的代码中发现错误,请告诉我如何解决这个问题。我将从效果和组件文件中添加必要的代码,因为我认为这里存在问题。如果有人要其他文件的内容,我也会加上这个。
效果:
@Effect()
getOperatorFacts: Observable<any> = this.actions
.pipe(
ofType(GetOperatorFacts),
map((action) => action),
switchMap(action => this.operatorSanityService.getOperatorsThatHaveOperatorFacts(action.payload)
.pipe(
map( (results: OperatorFacts) => {
GetOperatorFactsSuccess({payload: results});
console.log('From effects file', results);
}),
catchError((err) => of( GetOperatorFactsFailure({payload: err})))
)
)
);
正在尝试从组件中获取内容:
this.store.dispatch(GetOperatorFacts({payload: true}));
const x = this.store.pipe(select(getOperatorFactsState));
x.subscribe(res => {
console.log('ajde ajde', res);
});
以下代码吐出以下两个错误:
core.js:4352 ERROR Error: Effect "OperatorFactsEffects.getOperatorFacts" dispatched an invalid action: undefined
ERROR TypeError: Actions must be objects
解决方案:
按照 Marek W 的建议在成功和失败函数之前添加 return 语句解决了代码中的错误。我遇到的另一个问题是在选择器中我 returning state.OperatorFacts。进行更改,以便它只会 return 状态是使信息出现在组件文件中的正确调用。
您需要return新的操作。
// code
map((results: OperatorFacts) => {
console.log('From effects file', results);
return new GetOperatorFactsSuccess({payload: results});
}),
// code
同样适用于您的 catchError
块。