如何在ngrx/effects中传递params (action.payload)服务？

Question

我刚接触过ngrx-6。该效果将侦听操作"LOAD_COURSE_DETAILS“，并应调用course_id (action.payload)服务。但我搞错了

属性“toFixed”在“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内部的操作足够聪明，可以知道它是一个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))
    );
  })
);

要获得更多的效果用法，请查看为此开始使用ngrx/effects