Ngrx 商店、效果、Http Ajax Angular 2 上的轮询设置

Question

我正在创建一个 Ngrx Angular 2 应用程序，并试图让我的 http 调用在一段时间间隔后继续轮询。我见过 interval() 函数的用法，但在 Ngrx 的情况下，当在 @Effect() 内完成服务调用时，它会出错。请指教：

@Injectable()
export class TasksEffects {
constructor(
    private actions$: Actions,
    private TS: TaskService
){}

@Effect()
onLoadTasksLoadTasks$: Observable<Action> = this.actions$.ofType(tasksActions.ActionTypes.LOAD_TASKS)
    .switchMap(() => {
        return this.TS.index()
            .map((res) => new tasksActions.LoadTasksSuccessAction(res.json()))
            .catch(err => of(new tasksActions.LoadTasksFailAction(err)));
    });

我想每十秒运行 switchMap 函数。这不起作用。

    @Effect()
onLoadTasksLoadTasks$: Observable<Action> = this.actions$.ofType(tasksActions.ActionTypes.LOAD_TASKS)
    .switchMap(() => {
        return this.TS.index()
            .map((res) => new tasksActions.LoadTasksSuccessAction(res.json()))
            .catch(err => of(new tasksActions.LoadTasksFailAction(err)));
    }).interval(10000);

类型错误为：

Answer 1

在 rxjs 5 中 interval() 是一个静态函数。您只能将其用作创作者 Observable.interval(1).

试试这个。

this.actions$.ofType(tasksActions.ActionTypes.LOAD_TASKS)
  .skipUntil(Observable.interval(10000))
  .switchMap(res => {...})

Answer 2

如另一个答案所述，interval 是一个静态函数，因此它在 Observable 原型中不存在 - 这就是您的错误受到影响的原因。

相反，您应该能够使用 timer.

实现您想要的效果

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/observable/timer';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';

@Effect()
onLoadTasksLoadTasks$: Observable<Action> = this.actions$
  .ofType(tasksActions.ActionTypes.LOAD_TASKS)
  .switchMap(() => Observable
    .timer(0, 10000)
    .switchMap(() => this.TS.index()
      .map((res) => new tasksActions.LoadTasksSuccessAction(res.json()))
      .catch(err => Observable.of(new tasksActions.LoadTasksFailAction(err)))
    )
  );

使用 timer，可以指定初始延迟，此处将其设置为零，以便计时器立即触发。之后，它将每十秒触发一次，但如果收到另一个 LOAD_TASKS 操作，switchMap 将看到它取消订阅并创建一个新的 timer，等等

Ngrx 商店、效果、Http Ajax Angular 2 上的轮询设置

Ngrx Store, Effects, Http Ajax Polling Setup on Angular 2

angular

ngrx

ajax-polling

ngrx-effects