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

Question

I'm creating an Ngrx Angular 2 app and was trying to get my http calls to continue polling after a time interval. I have seen the use of the interval() function, but in case of Ngrx, when service calls are done inside @Effect(), it gives an error. Please advise:

@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)));
    });

I want to run the switchMap function every ten seconds. This does not work.

    @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);

The type error is:

score 14 · Accepted Answer · answered Apr 01 '17 at 22:57

As stated in the other answer, interval is a static function, so it does not exist on the Observable prototype - which is why your error is effected.

Instead, you should be able to achieve what you want using 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)))
    )
  );

With timer, it's possible to specify an initial delay and here it's set to zero so that the timer fires immediately. After that, it will fire every ten seconds, but if another LOAD_TASKS action is received, the switchMap will see it unsubscribed and a new timer created, etc.

What stops or unsubscribes the Observable.timer? Wouldn't this just continue on forever even after receiving the data that was needed? — adam-beck, Oct 13 '17 at 19:22
how would I do this with an action payload and rxjs 6? https://stackoverflow.com/questions/52263977/how-to-do-http-polling-in-ngrx-effect?noredirect=1#comment91477694_52263977 — FussinHussin, Sep 10 '18 at 20:30

score 0 · Answer 2 · answered Apr 01 '17 at 09:17

0

In rxjs 5 interval() is a static function. You can only use it as a creator Observable.interval(1).

Try this.

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

answered Apr 01 '17 at 09:17

Sasxa

36,894
14
85
98

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

2 Answers2

Linked