CODEWITHSUNDEEP
angularngrxngrx-effects
Jayden
Jayden

Reputation: 283

Infinite loop happening with effects - Angular ngrx8

There are a couple of Questions are raised related to this..but I went through all but my issue is not solved. Basically I'm a beginner so I couldn't able to trace the issue.

This is my Effects:

readMsg$ = createEffect(() => this.actions$.pipe(
  ofType(readMsg),
  map(action => action.payload),
  switchMap((reqPayload: MsgReadRequest) => {
      return this.httpService.post('api/msgread', reqPayload)
      .pipe(
        map((resp: MsgReadResponse) => resp.message === 'ok' ?
        readMsgSucess({payload: resp}) :
        readMsgFailure({payload: resp}),
        catchError((error: HttpErrorResponse) => of(error.message))
      )
    );
    })
));

And these are my Actions:

export const readMsg  = createAction('[Read] Msg in xl', props<{payload: NewsReadRequest}>());
export const readMsgSucess  = createAction('[Read] Msg in xl', props<{payload: NewsReadResponse}>());
export const readMsgFailure  = createAction('[Read] Msg in xl', props<{payload: NewsResponse}>());
export const htttpError  = createAction('[Read] Msg in xl error', props<{payload: HttpErrorResponse}>());

Upvotes: 1

Views: 64

Answers (2)

Jayden
Jayden

Reputation: 283

A simple mistake.. In Actions I should not mention same statement..I just changed actions like below and now everything working fine..

export const readMsg  = createAction('[Read] Msg in xl', props<{payload: NewsReadRequest}>());
export const readMsgSucess  = createAction('[Read] Msg in xl success', props<{payload: NewsReadResponse}>());
export const readMsgFailure  = createAction('[Read] Msg in xl failure', props<{payload: NewsResponse}>());
export const htttpError  = createAction('[Read] Msg in xl error', props<{payload: HttpErrorResponse}>());

Upvotes: 2

Tony
Tony

Reputation: 20142

Maybe this can help you

readMsg$ = createEffect(() => this.actions$.pipe(
  ofType(readMsg),
  map(action => action.payload),
  switchMap((reqPayload: MsgReadRequest) => 
    this.httpService.post('api/msgread', reqPayload)
      .pipe(
        map((resp: MsgReadResponse) => resp.message === 'ok' ?
        readMsgSucess({payload: resp}) :
        readMsgFailure({payload: resp}),
        catchError((error: HttpErrorResponse) => of(error.message))
      )
    ))
));

Upvotes: 0

Related Questions