如何将参数(action.payload)传递给 ngrx/effects 中的服务?

问题描述

我是 ngrx-6 的新手.效果将侦听动作LOAD_COURSE_DETAILS"并使用 course_id (action.payload) 调用服务.但我收到一个错误

I am new to ngrx-6.The effects will listen to action "LOAD_COURSE_DETAILS" and should make a call to service with the course_id (action.payload). But i am getting an error

操作"类型中缺少toFixed"属性.

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

However, if I do console.log, I could see the data being passed from the component to the effects.

提前致谢.

文件:效果

@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(我的动作定义了有效负载)

file: actions.ts (my action has payload defined)

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));
}

file: service.ts(被效果调用)

file: service.ts (to be called by effeccts)

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

推荐答案

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

You have to use the payload from the action.In order to do this you'll have to fill in the generic of the ofType function.

现在 switchMap 中的动作足够智能，知道它是一个 LoadCourseDetails 动作，因此也知道有效载荷类型.

Now the action inside switchMap is smart enough to know it's a LoadCourseDetails action, and thus will also known the payload type.

@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

For more effect usages, check out Start using ngrx/effects for this

这篇关于如何将参数(action.payload)传递给 ngrx/effects 中的服务?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！