rxjs - 调度一个 Action 来响应取消

Question

我从 cancellation recipe 开始来自 redux-observable 文档并希望对其进行一些扩展。

基本上我有一个场景，在触发取消后，使用 takeUntil我想调度另一个操作来清理等。

这是我目前想到的:https://jsbin.com/zemenu/195/edit?js,output

启动“获取用户信息”，然后点击取消。我希望它按以下顺序执行操作:
- USER/FETCH- REQUEST/STARTED- USER/CANCELLED- REQUEST/CANCELLED
这以我现在设置的方式工作。但是，我得靠路过dispatch进requestSequence函数，然后在 finally 中触发它.是否有一种更简洁的方法可以仅使用可观察的运算符来做到这一点？所以当 USER.CANCELLED触发某些最终操作被映射到 requestSequence 内部可观察的。

Redux 记录器已启用，因此请检查控制台以了解所有操作。

Answer 1

而不是使用 .takeUntil() ，听起来您想使用 .race() ，这是相当恰当的命名。无论哪个流首先发出，都赢了!另一个是取消订阅。

您需要稍微重组一些东西才能根据需要使用它。你想隔离你立即发出的第一个 Action ，你的 request.onStart(meta) , 与 ajax 请求分开 Observable.fromPromise(apiCall(...args)) .然后你想直接在那个 ajax 和取消之间进行比赛，所以你需要传入 action$ ActionsObservable，因为您在助手中拥有所有这些。

https://jsbin.com/suvaka/edit?js,output

function requestSequence(apiCall, args, meta, action$) {
  return Observable.of(request.onStart(meta))
    .concat(
      Observable.fromPromise(apiCall(...args))
        .map((payload) => request.onSuccess(payload, meta))
        .catch((e) => Observable.of(request.onError(e, meta)))
        .race(
          action$.ofType(USER.CANCELLED)
            .map(() => request.onCancel(meta))
        )
    );
}

const fetchUserEpic = (action$, store) =>
  action$.ofType(USER.FETCH)
    .mergeMap(action =>
      requestSequence(
        userRequest, 
        [`/api/users/${action.payload}`],
        { activity: USER.FETCH, path: 'user' },
        action$
      )   
    );

旁注:小心过早的抽象，比如制作那些类型的助手。尽管您可能会在某些史诗中重复一些事情，但我发现将其抽象化会使以后更难理解，尤其是如果其他人没有编写代码并且不是 Rx 大师。当然，只有您才能知道此建议是否适用于您和您的代码库。

对我来说，主要的困惑点是您必须传递给 requestSequence 的所有参数。 ，许多人第一次遇到它时会很难理解。如果你发现你的史诗非常普遍地做完全相同的事情并且你想重用，也许抽象整个史诗会更清楚，并创建像 userRequest 这样的 API 实用程序。下面你可以独立测试。

(未经测试，基本上是伪代码)

const createApiEpic = options =>
  action$ =>
    action$.ofType(options.on)
      .mergeMap(action =>
        Observable.of(request.onStart(meta))
          .concat(
            options.effect(action.payload)
              .map(payload => request.onSuccess(payload, meta))
              .catch(e => Observable.of(request.onError(e, meta)))
              .race(
                action$.ofType(options.cancel)
                  .map(() => request.onCancel(meta))
              )
          )
      );

const userRequest = id =>
  Observable.ajax.getJSON(`/api/users/${id}`);

const fetchUserEpic = createApiEpic({
  on: USER.FETCH,
  effect: userRequest
  cancel: USER.CANCELLED
});