如何将参数（action.payload）传递给ngrx / effects中的服务？

Question

我是ngrx-6的新手。 这些效果将监听动作“ LOAD_COURSE_DETAILS”，并应使用course_id（action.payload）调用服务。但是我遇到了错误

  

类型“操作”中缺少属性“ toFixed”。

但是，如果我执行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（由功效调用）

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

Answer 1

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

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

@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