时间戳

首页 > 解决方案 > 添加 takeUntil 停止触发所有动作 rxJS, redux-observable

reactjs - 添加 takeUntil 停止触发所有动作 rxJS, redux-observable

问题描述

我试图找出一种方法来在用户注销后取消所有 HTTP 请求。我创建了一个负责创建 ajax 请求的通用函数。这是功能

const createRequest = (ajaxParameters) => {
  return ajax(ajaxParameters).pipe(
    takeUntil([ofType("LOGOUT")])
  )
};

并且我所有的史诗功能都在导入上述功能来发出 HTTP 请求。我正在做这样的事情

   const sendRequest = (url) => {
       xhr = createRequest(_.merge({}, requestDefaults, {
             method: "GET",
             url: url
          }, token))
      xhr.pipe(
          map( 
             // some code over here and triggering some actions over here
          )
      )
   }

问题是每当我takeUntil像上面那样添加时，它都会停止触发所有史诗。知道我在这里做错了什么吗？

史诗代码

const fetchUserData = action$ => action$.pipe(
  ofType(user.FETCH_USER_DATA.PENDING),
  mergeMap(sendRequest(URL_OVER_HERE))
);

标签： reactjsreduxrxjsrxjs6redux-observable

解决方案

我不知道那里[ofType("LOGOUT")]在做什么，但最有可能的是，您想要pipe关闭action$：

const createRequest = (ajaxParameters) => {
  return ajax(ajaxParameters).pipe(
    takeUntil(action$.pipe(ofType("LOGOUT")))
  )
};

takeUntil如果它收到一个值，则完成您的 observable。你拥有它的方式，它可能认为数组是可观察的，值是 operator ofType。所以它在任何事情开始之前就完成了。这就是为什么您必须改为倾听的原因action$。

作为另一个优化，您可以立即pipe关闭xhrobservable：

const sendRequest = (url) => {
  createRequest(_.merge({}, requestDefaults, {
    method: "GET",
    url: url
  }, token))
  .pipe(
    map( 
      // some code over here and triggering some actions over here
    )
  )
}

推荐阅读