如何从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 块。