如何在 RXJS retryWhen 中发出/合并另一个 observable

Question

I have an observable for api request, basically I added retryWhen in the event connection failed/error. While doing so I want to dispatch another action (no notify the user the system is retrying..) when the request is throwing an error.

//....
export const saveArticle1 = (action$, state$) =>
  action$.pipe(
    ofType(AUTO_SAVE_ARTICLE_READY),
    withLatestFrom(state$, (a, b) => b),
    switchMap(({
      article,
    }) => {
      const payload = getArticlePayload(article);
      return ajax.patch(`/api/article/${article.id}`, payload, { 'Content-Type': 'application/json' }).pipe(
        flatMap(({ response }) => of({
          type: ARTICLE_AUTO_SAVED,
          value: response,
        })),
        retryWhen(errors =>
          errors.pipe(
            // TODO: I try to concat or merge observable here but no luck
            delay(1000),
            take(60),
          ),
        ),
        catchError((ex) => {
          articleSaveFailureAlert();
          return showErrorNotification('Api Error. Unable to save this article.')(ex);
        }),
      );
    }),
  );

What is the best way to dispatch another action inside retryWhen ? or is there another way to achieve this?

Answer 1

You can use a recursive loop with the stopping condition that the number of attempts made is greater than the maximum allowed attempts. Then you can concatenate a single observable of your "retry" action with the patch observable. If you edit the snippet to change maxAttempts to a number lower than 5 you'll see the "failure" action being emitted.

As an aside - you might want to double-check your use of switchMap when triggering an API call that makes a persistent change. Here's an article that explains the issue in detail.

 const {of, operators, throwError, timer, concat} = rxjs; const {switchMap, catchError, flatMap} = operators; const maxAttempts = 60; const patch = (article, attempt) => { if (attempt < 5) return throwError(new Error('server unavailable')); return of(article); }; const action$ = of('patch.id'); const saveArticle1 = action$.pipe( switchMap((article) => { const loop = (attempt) => { return patch(article, attempt).pipe( flatMap((response) => of({ type: 'saved', value: response, })), catchError(error => { if (attempt > maxAttempts) return of({ type: 'failed' }); return timer(1000).pipe( switchMap(() => concat( of({ type: 'retrying' }), loop(attempt + 1) ) ) ); }) ); }; return loop(0); }), ); saveArticle1.subscribe({ next: x => console.log('next', x), error: e => console.error(e), complete: () => console.log('complete') });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.4/rxjs.umd.js"></script>