Rxjs в Ngrx - вызвать действие после фильтра / конец побочного эффекта - PullRequest
Новая
       21

Rxjs в Ngrx - вызвать действие после фильтра / конец побочного эффекта

0 голосов
/ 08 июля 2019

Я использую Angular 7 с магазином NGRX. У меня есть эффект, который будет извлекать мне некоторые данные, если они не существуют в магазине. Я использую оператор filter, но мне всегда нужно вызывать действие, независимо от того, существуют данные или нет, в конце побочного эффекта. Вот мой побочный эффект (упрощенно): 

getChartData$ = this.actions$
    .pipe(
        ofType(GET_CHART_DATA),
        withLatestFrom(this.store.pipe(select(x => x.store))),
        filter(((obj: [any, store]) => {
            return this.dataExistsInStore()
        })),
        map(obj => obj[0]),
        mergeMap((action) => this.chartService.getChartData((action as any).payload)
            .pipe(
                map((chartData: ChartData) =>
                    ({ type: GET_CHART_DATA_SUCCESS, payload: { tagId: (action as any).payload, chartData: chartData } })
                ),
                catchError(() => of({ type: GET_CHART_DATA_FAILED }))
            ))
    );

dataExistsInStore(): boolean
{
    return x;
}

Как я могу вызвать действие даже после фильтра, например, действие типа GET_CHART_DATA_COMPLETE. Мне нужно сделать это, чтобы я мог скрыть индикатор загрузки.

1 Ответ

2 голосов
/ 08 июля 2019

Если мое понимание верно, вы хотели бы:

  • вызывать getChartData, только если данные не существуют в хранилище
  • отправлять действие GET_CHART_DATA_COMPLETE во всехcase

Если это правда.Вы могли бы рассмотреть этот подход: (извините, могут иметь опечатки) 

getChartData$ = this.actions$.pipe(
  ofType(GET_CHART_DATA),
  withLatestFrom(this.store.pipe(select(isDataExistingInStore))),
  mergeMap(([action, isDataExistingInStore]: [Action, boolean]) => {
    if (!isDataExistingInStore) {
      return this.chartService.getChartData(action.payload).pipe(
        map((chartData: ChartData) =>
                ({ type: GET_CHART_DATA_SUCCESS, payload: { tagId: (action as any).payload, chartData: chartData } })
            ),
        catchError(() => of({ type: GET_CHART_DATA_FAILED }))
      )
    } else {
      return of({ type: GET_CHART_DATA_COMPLETE })    
    };
  )
)

Здесь я рассматриваю, у вас есть selector: isDataExistingInStore, которые возвращают логическое значение.

Бонус : Могу ли я предложить вам ngrx лучшую практику для создания действий: 

new GetChartDataSuccess(payload)

или даже лучше с создателями действий в version 8: 

myActions.getChartDataSuccess({ tagId: .... });
...