angular - 如何在ngrx效果中进行http轮询

Question

我有这个效果，我正在尝试使用计时器每 x 秒轮询一次数据。但我无法弄清楚计时器应该如何与数据流交互。我尝试在顶部添加另一个 switchMap，但随后我无法将操作和有效负载传递给第二个 switchmap。有任何想法吗？

我看了this post但我的情况有点不同。我正在通过我需要访问的操作传递有效负载，并且我正在使用 ngrx 6。

@Effect()
getData = this.actions$
    .ofType(appActions.GET_PLOT_DATA)
    .pipe(
        switchMap((action$: appActions.GetPlotDataAction) => {
            return this.http.post(
                `http://${this.url}/data`,
                action$.payload.getJson(),
                {responseType: 'json', observe: 'body', headers: this.headers});
        }),
        map((plotData) => {
            return {
                type: appActions.LOAD_DATA_SUCCESS,
                payload: plotData
            }
        }),
        catchError((error) => throwError(error))
    )

Answer 1

这应该有效(我已经测试过了)。请在switchMap的顶部添加这个.这里的关键操作符是 mapTo .该运算符将把间隔的传入值映射到有效载荷中。

switchMap((action$: appActions.GetPlotDataAction) =>
   interval(5000).pipe(mapTo(action$))
);

更新(提示):
如果你想立即开始轮询，然后每 {n}ms 你可以使用 startWith运算符或 timer可观察的

switchMap((action$: appActions.GetPlotDataAction) =>
  interval(5000).pipe(startWith(0), mapTo(action$))
);

或者

switchMap((action$: appActions.GetPlotDataAction) => 
  timer(0, 1000).pipe(mapTo(action$))
);

更新 (15.04.2021):
例如，使用 takeUntil 和一个主题，您可以一次停止轮询流，在代码中的某处像这样。当有人点击某物时，您也可以杀死。这取决于您和用例。

const kill$ = new Subject();
switchMap((action$: appActions.GetPlotDataAction) => 
  timer(0, 1000).pipe(mapTo(action$), takeUntil(kill$))
);

// killing for example after 60 seconds
setTimeout(() => kill$.next(), 60000);