Ngrx 中的 Rxjs - 在 filter/end 副作用后调用操作

Question

我在 NGRX 商店中使用 Angular 7。我有一个效果，如果商店中不存在，它将为我检索一些数据。我正在使用 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 类型的操作。我需要这样做才能隐藏加载指示器。

Answer 1

如果我的理解是正确的，你愿意：

仅当存储中不存在数据时调用getChartData
在所有情况下调度一个 GET_CHART_DATA_COMPLETE 操作

如果那是真的。您可以考虑这种方法：（抱歉，可能有错别字）

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，其中 return 一个布尔值。

奖励：我可以建议您使用 ngrx 最佳实践来创建操作：

new GetChartDataSuccess(payload)

甚至 version 8 中的动作创作者更好 :

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

Ngrx 中的 Rxjs - 在 filter/end 副作用后调用操作

Rxjs in Ngrx - call action after filter/end of side effect

angular

rxjs

ngrx

ngrx-effects