javascript - redux-observable - 等待请求完成后再开始另一个请求

Question

我的应用程序中有一个邀请列表，每个邀请都有相应的删除按钮。当用户点击删除时，将调度 DELETE_INVITE 操作并引发一场史诗般的火灾:

const deleteInvite = (action$: any, store: Store<ReduxState, *>) =>
  action$.pipe(
    ofType(DELETE_INVITE),
    mergeMap(({ payload }) =>
      ajax(api.deleteInvite(payload.inviteId)).pipe(
        map((response: Object) => ({
          type: DELETE_INVITE + SUCCESS,
          payload: {
            data: response.response,
            status: response.status,
          },
        })),
        catchError((error: Object) => of({
          type: DELETE_INVITE + FAILURE,
          error: {
            response: {
              data: error.xhr.response,
              status: error.xhr.status,
            },
          },
        })),
      ),
    ),
  );

现在我想确保一次只触发一个请求，并等到最后一个请求完成。换句话说，我想保护自己免受用户快速单击所有按钮并同时触发少量请求的情况的影响。

switchMap 是我正在寻找的东西，因为它只会处理最近的点击...但请求已经被触发，并且 UI 留下了过时的数据。所以我需要一些东西，只有在内链完成时才能再次调用 mergeMap 。

Answer 1

根据您下面的评论，听起来您想要的是 exhaustMap .

Projects each source value to an Observable which is merged in the output Observable only if the previous projected Observable has completed.

const deleteInvite = (action$: any, store: Store<ReduxState, *>) =>
  action$.pipe(
    ofType(DELETE_INVITE),
    exhaustMap(({ payload }) =>
      ajax(api.deleteInvite(payload.inviteId)).pipe(
        map((response: Object) => ({
          type: DELETE_INVITE + SUCCESS,
          payload: {
            data: response.response,
            status: response.status,
          },
        })),
        catchError((error: Object) => of({
          type: DELETE_INVITE + FAILURE,
          error: {
            response: {
              data: error.xhr.response,
              status: error.xhr.status,
            },
          },
        })),
      ),
    ),
  );