使用 redux observable 的取消请求不起作用

Question

我正在尝试使用 redux-observable 在我的请求中添加取消。尝试实现一个简单的登录示例。目前我添加取消后无法再次提交登录请求。

const loginUserApiCall = (username, password) => {
  return new Promise((resolve, reject) => {
    if (username === "foo" && password === "foo") {
      resolve({
        user: { name: "foo", lastName: "fooLName", email: "foo@gmail.com" }
      });
    }
    reject({ err: "Creds are incorrect" });
  });
};

const loginRequestEpic = (action$, state$) =>
  action$.pipe(
    ofType(LOGIN_REQUEST),
    mergeMap(action => {
      const { username, password } = action.payload;
      return loginUserApiCall(username, password);
    }),
    mergeMap(res => of(loginSuccess(res))),
    takeUntil(action$.pipe(ofType(LOGIN_CANCELLED))),
    catchError(err => {
      return of(loginFailure(err))
    })
  );

我做错了什么，取消没有发生，取消后我无法重试请求？一旦用户取消，我应该可以重试。

Answer 1

一旦 takeUntil 被执行，它将完成您的可观察对象，当出现错误并且整个流被停用时也是如此。您可以在末尾添加 repeat 运算符

  action$.pipe(
    ofType(LOGIN_REQUEST),
    mergeMap(action => {
      const { username, password } = action.payload;
      return loginUserApiCall(username, password);
    }),
    mergeMap(res => of(loginSuccess(res))),
    takeUntil(action$.pipe(ofType(LOGIN_CANCELLED))),
    catchError(err => {
      return of(loginFailure(err))
    }),
    repeat()
  );

使用 redux observable 的取消请求不起作用

Cancel request using redux observable is not working

javascript

rxjs

middleware

redux-observable

side-effects