Angular 2上的Ngrx Store,Effects,Http Ajax轮询设置

时间:2017-04-01 08:16:43

标签: angular ngrx ajax-polling ngrx-effects

我正在创建一个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);

类型错误是:

enter image description here

2 个答案:

答案 0 :(得分:10)

如另一个答案中所述,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等。

答案 1 :(得分:0)

在rxjs中,interval()是一个静态函数。您只能将其用作创建者toIntFunction

试试这个。

Observable.interval(1)