Getting Error When Fire Effect Method In Angular Ngrx

Question

I use Angular 7 NGRX state system.

When I dispatch this method from my component, I get error.

Parameters are correct. I checked them all. I think I made mistake by using "mergeMap" and "return" wrong value.

Where am I mistaken at this code ?

Error :

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

ERROR TypeError: Actions must have a type property

Action Methods :

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 Method :

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

Reducer Methods :

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

Not enough details to know what's going on, please provide your actions to your post. — penleychan
@Yevgeniy.Chernobrivets There is a problem about return and map. EMPTY doesn't even work. — canmustu
I don't see any problems with map return for now at least, i thought maybe your api returns and error and you get into catchError and EMTY is not actually an action. — Yevgeniy.Chernobrivets

canmustu canmustu · Accepted Answer · 2019-08-02T17:18:02

I found the bug.

In effect method :

This line : map((guru: Person) => {

Should be : mergeMap((guru: Person) => {

Getting Error When Fire Effect Method In Angular Ngrx

1 Answers