reactjs - 在 catchError 中发出多个操作 - Redux Observable

Question

我有使用 rxjs 史诗的身份验证功能：

export const authWithEmailPasswordEpic = action$ =>
action$.pipe(
    filter(authUser.match),
    switchMap(({payload}) =>
        defer(() =>
            from(firebaseEmailPasswordAuth(payload)).pipe(
                mergeMap(() => of(clearAlertState(), stopLoading())),
                catchError(err =>
                    of(clearState(), createAlert({
                        status: err.code,
                        alertType: RED_ALERT,
                        alertTitle: err.message
                    })),
                )
            )
        )
    )
);

如果用户凭据不正确，我将发送警报，但我也想在 5 秒左右后删除警报。因此，我相信我需要发出两个动作来实现这一点，第二个是：

of(toggleAlert()).pipe(delay(5000)))

我将如何实现这一目标，或者有更好的方法吗？

标签： reactjsrxjsrxjs6redux-observable

Answer 1

您可以使用delay(5000)aftercatchError和mergeWiththe来实现，of(toggleAlert())如下所示：

export const authWithEmailPasswordEpic = action$ =>
  action$.pipe(
    filter(authUser.match),
    switchMap(({ payload }) =>
      defer(() =>
        from(firebaseEmailPasswordAuth(payload)).pipe(
          mergeMap(() => of(clearAlertState(), stopLoading())),
          catchError(err =>
            of(
              clearState(),
              createAlert({
                status: err.code,
                alertType: RED_ALERT,
                alertTitle: err.message
              })
            )
          ),
          mergeWith(of(toggleAlert()).pipe(delay(5000)))
        )
      )
    )
  );