How to do http polling in ngrx effect

Question

I have this effect, and I'm trying to use timer to poll for data every x seconds. But I can't figure out how timer is supposed to interact with the data streams. I tried adding another switchMap to the top, but then I couldn't pass the action and payload to the second switchmap. Any ideas?

I looked at this post but my situation is a little different. I'm passing a payload with my action that I need to access, and I'm using 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))
    )

try this https://stackoverflow.com/questions/43154461/ngrx-store-effects-http-ajax-polling-setup-on-angular-2 — danday74, Sep 10 '18 at 20:13
thanks, I have looked at that one, I'm using RXJS 6 though, and my action has a payload. So I haven't quite been able to get it — FussinHussin, Sep 10 '18 at 20:21

Serkan Sipahi · Accepted Answer · 2021-04-15T15:46:21.010

10

This should work (i have tested it). Please add this top of the switchMap. The key operator here is the mapTo. This operator will map the incoming value of the interval into the payload.

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

Update (hint): If you want to start immediately with the polling and then each {n}ms you can use the startWith operator or the timer observable

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

or

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

Update (15.04.2021):

For example with takeUntil and a Subject you can stop the polling stream at a time, somewhere in the code like this. You can also kill when someone click on something. It is up to you and use case depending.

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

edited Apr 15 '21 at 15:46

answered Sep 11 '18 at 13:47

Serkan Sipahi

691
6
19

1

Worked like a charm! thanks. I havent used the mapTo operator, really useful. And I guess I was confusing timer and interval. thanks @Bitcollage! – FussinHussin Sep 11 '18 at 17:24
1

@FussinHussin glad to hear. – Serkan Sipahi Sep 11 '18 at 17:35
thanks for the update, I was just about to say the first call is affected but it's fixed with the second implementation – FussinHussin Sep 12 '18 at 14:32
one more issue, it makes a call right as the app starts, before the action is submitted. So I get an error right at the beginning. Can I make it wait for the action? – FussinHussin Sep 13 '18 at 15:10
2

yes sure, please add as first argument into the pipe `skip(1)`: `interval(5000).pipe(skip(1), mapTo(action$)))`. skip(1) will skip first call. – Serkan Sipahi Sep 13 '18 at 15:14
1

and how to stop the interval? – Marek Apr 14 '21 at 10:38
@Marek I have updated your answer to include your question as an answer. – Serkan Sipahi Apr 15 '21 at 15:49
For stopping, this would also work: return interval(intervalTime).pipe( concatMap(() => this.someService.getSomething()), first( (someData) => someData.finished ), ); – Marek May 13 '21 at 19:49

How to do http polling in ngrx effect

1 Answers1

Linked