Angular Ngrx中的火效应方法时出现错误

时间:2019-08-02 16:40:54

标签: node.js angular ngrx ngrx-effects

我使用Angular 7 NGRX状态系统。

当我从组件中分派此方法时,会出错。

参数正确。我全部检查了。我想我通过使用“ mergeMap”和“返回”错误的值来弄错了。

我在哪里弄错了此代码?

错误:

ERROR Error: Effect "StudentEffects.addReview$" dispatched an invalid action: [object Object] .....

ERROR TypeError: Actions must have a type property

操作方法:

export class AddReview implements Action {
  readonly type = ActionTypes.AddReview;
  constructor(public payload: { guruId: string, review: IReview }) { }
}


export class AddReviewSuccess implements Action {
  readonly type = ActionTypes.AddReviewSuccess;
  constructor(public payload: { guruId: string, review: IReview }) { }
}

效果方法:

  @Effect()
  addReview$ = this.actions$.pipe(
    ofType<StudentActions.AddReview>(StudentActions.ActionTypes.AddReview),
    mergeMap(action => {

      return this.personApi.findOne({ where: { id: action.payload.guruId } }).pipe(
        map((guru: Person) => {

          let reviews: Array<IReview> = Array.isArray(guru._reviews) ? guru._reviews : [];
          reviews.push(action.payload.review);

          let attrs = {
            _reviews: reviews,
          };

          return this.personApi // => Not goes inside. I get error.
            .patchAttributes(guru.id, attrs)
            .pipe(
              map(person => {

                this.notificationService.createNotification(
                  'success', 'Success', 'Your review successfully saved.'
                );

                this.logService.groupLog('AddReview', action, person);

                return new StudentActions.AddReviewSuccess({ guruId: guru.id, review: action.payload.review });

              }),
              catchError(() => {
                // this.notificationService.createNotification(
                //   'error',
                //   'Error',
                //   'There is an error on save'
                // );
                console.error('There was an error');
                return EMPTY;
              })
            );
        }),
        catchError(() => EMPTY)
      );
    })
  );

异径管方法:

case ActionTypes.AddReview: {
      return {
        ...state,
        loading: true
      };
}
case ActionTypes.AddReviewSuccess: {
  return {
    ...state,
    reviews: [
      ...state.reviews,
      { guruId: action.payload.guruId, review: action.payload.review }
    ],
    loading: false
  };
}

1 个答案:

答案 0 :(得分:1)

我找到了错误。

有效方法:

此行:map((guru: Person) => {

应该是:mergeMap((guru: Person) => {