角NGRX循环响应数据 [英] Angular NGRX looping response data

问题描述

//动作

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

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

//减速器

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

//效果

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

//服务

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

//组件

  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"/>
...

如果使用 abc $ |，我阅读了NGRX文档.在THML中异步，那么我不需要退订.但是，现在console.log()调试循环直到api调用限制.

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.

如果我使用角度服务而不是NGRX，则数据响应一次正确.

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

谢谢.

推荐答案

这里的问题是效果监听其发出的动作:

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

PlayersAction.PlayersActionTypes.LOAD_PLAYERS_WIN_LOSE_COUNT

然后

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.

这篇关于角NGRX循环响应数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！