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

Question

我是 ngrx-6 的新手。 效果将侦听操作“LOAD_COURSE_DETAILS”，并应使用 course_id (action.payload) 调用服务。但我收到错误

“Action”类型中缺少属性“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))
    );
  })
);

有关更多效果用法，请查看 为此开始使用 ngrx/effects

Answer 2

如果您的操作如下所示（请注意该参数称为 mediParam）

    export const getAvatars = createAction('[Dashboard API] Get Avatars',
      props<{mediParam: any;}>()
    );

然后实际上，您将像这样访问它：

 action.mediParam

Ngrx效果：

getAvatars1$ = createEffect(() => {
    return this.actions$.pipe(
      ofType(actions.getAvatars),
      concatLatestFrom(() => [this.store.select(selectState)]),
      switchMap(([action, state]) => {
        let param = action.mediParam;
        return this.bgcService.getAvatars(param).pipe(
          map((data: any) => {
            let avatars = JSON.parse(JSON.stringify(data.body));
            return actions.getAvatarsSuccess({ data: avatars});
          })
        );
      }))
  });