Question

我正在AngRX 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的动作。我需要这样做，以便隐藏加载指示器。

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，它返回一个布尔值。

奖金：我建议您使用ngrx最佳做法来创建操作：

new GetChartDataSuccess(payload)

或者甚至更适合version 8中的动作创建者：

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

Ngrx中的Rxjs-过滤/副作用结束后的调用操作

1 个答案: