Angular NGRX looping response data

问题

// action

export class LoadPlayersWinLoseCount implements Action {
  readonly type = PlayersActionTypes.LOAD_PLAYERS_WIN_LOSE_COUNT;

  constructor(public accountId, public queryParams, public payload?: IWinlose, ) {}
}

// reducer

export function playersWinLoseCount(state = initialStateWinLose, action: PlayersActions): IWinlose {
  switch (action.type) {
    case PlayersActionTypes.LOAD_PLAYERS_WIN_LOSE_COUNT:
      console.log(JSON.stringify(state));
      console.log(action.payload);
      return { ...state, ...action.payload };
    default:
      return state;
  }
}

// effect

 getWinLossCount$: Observable<Action> = createEffect(() =>
  this.actions$.pipe(
    ofType(PlayersAction.PlayersActionTypes.LOAD_PLAYERS_WIN_LOSE_COUNT),
    switchMap(({ accountId, queryParams }) =>
      this.playersService.getWinLoseCount(accountId, queryParams)
        .pipe(
          map((playersWinLoseCount: IWinlose )  =>
            new PlayersAction.LoadPlayersWinLoseCount(accountId, queryParams, playersWinLoseCount)
          ),
          catchError(() =>
            EMPTY
          )
        )
      )
    ),
  );

// service

get(endpoint, params?, headers?): Observable<any> {
    return this.httpClient.get<any>(this.BASE_API_URL + endpoint, {
      ...headers,
      ...params
    })
    .pipe(
      catchError(this.errorHandle)
    );
  }



getWinLoseCount(accountId: number, queryParams: IQuery): Observable<IWinlose> {
    return this.generalService.get(`/players/${accountId}/wl`, queryParams);
  }

// Component

  queryParams;
  playersWinLoseCount$: Observable<IWinlose>;

  constructor(
    private store: Store<{ playersWinLoseCount: IWinlose }>
  ) {
    this.playersWinLoseCount$ = store.select('playersWinLoseCount');
  }

  ngOnInit(): void {
    const accountId = this.activatedRoute.snapshot.paramMap.get('id');
    this.activatedRoute.queryParamMap.subscribe(data => this.queryParams = data);
    this.getWinLossCount(accountId, this.queryParams);
  }

getWinLossCount(accountId, queryParams): any {
    this.store.dispatch(new playersActions.LoadPlayersWinLoseCount(accountId, queryParams));
  }

// HTML

<div *ngIf="playersGeneral$ | async as players" class="player-hero">
  <img class="player-avatar" [src]="players.profile?.avatarfull"/>
...

I read the NGRX doc that if I use abc$ | async in THML, then I don't need unsubscribe. However, now the console.log() debug looping until api call limit.

If I use angular service rather than NGRX, the data response once correct.

Thanks.

回答1:

The problem here is that the effects listens on the action it emits itself:

PlayersAction.PlayersActionTypes.LOAD_PLAYERS_WIN_LOSE_COUNT

and then

new PlayersAction.LoadPlayersWinLoseCount()

You need to change this logic to avoid the recursion, or to add a condition when there is no reason to emit the action, for example if the store has have data already.

来源：https://stackoverflow.com/questions/65595046/angular-ngrx-looping-response-data

标签

angular

ngrx