angular6 - 如何在ngrx/effects中将参数(action.payload)传递给服务？

Question

我是ngrx-6的新手。
这些效果将监听 Action “LOAD_COURSE_DETAILS”，并应使用course_id(action.payload)调用服务。但是我遇到一个错误

Property 'toFixed' is missing in type 'Action'.

但是，如果我执行console.log，则可以看到数据正在从组件传递到效果。



如何将参数传递给服务？

提前致谢。

文件:效果

@Effect()
loadCourseDetails$ = this.actions$.pipe(
  ofType(CourseActionTypes.LOAD_COURSE_DETAILS),
  switchMap((action) => {
    console.log('in course effects', action);
    return this.courseService.getCourseDetails(action).pipe(
      map((data) => new fromCourse.LoadCourseDetailsSuccess(data))
    );
  })
);

文件:actions.ts (我的操作定义了有效负载)

export class LoadCourseDetails implements Action {
  readonly type = CourseActionTypes.LOAD_COURSE_DETAILS;
  constructor(public payload: Number) {}
}
export class LoadCourseDetailsSuccess implements Action {
  readonly type = CourseActionTypes.LOAD_COURSE_DETAILS_SUCCESS;
  constructor(public payload: ICourse) {}
}

文件:component.ts (调度操作)

loadCourseDetails(id: Number) {
  console.log('dispatch course id', id);
  this.store.dispatch(new fromCourse.LoadCourseDetails(id));
}

文件:service.ts(由effeccts调用)

getCourseDetails(courseId: Number) {
    return this.http.get(`url/${courseId}.json`);
}

Answer 1

您必须使用payload中的action。
为此，您必须填写ofType函数的泛型。

现在switchMap中的 Action 非常聪明，足以知道它是LoadCourseDetails Action ，因此也将知道有效负载类型。

@Effect()
loadCourseDetails$ = this.actions$.pipe(
  ofType<LoadCourseDetails>(CourseActionTypes.LOAD_COURSE_DETAILS),
  switchMap((action) => {
    console.log('in course effects', action);
    return this.courseService.getCourseDetails(action.payload).pipe(
      map((data) => new fromCourse.LoadCourseDetailsSuccess(data))
    );
  })
);

有关更多效果的用法，请查看 Start using ngrx/effects for this