ReduxObservable 取消基于动作类型及其数据

Question

我有 React 应用程序，它使用 redux-observable 和 typescript。在这种情况下，FetchAttribute 操作会被一个 id 触发，然后进行 ajax 调用。在某些情况下，如果 "FETCH_ATTRIBUTE_CANCEL" 操作使用与 "FetchAttributeAction" 操作相同的 ID 触发，我想取消 ajax 请求。

action$.ofType(FETCH_ATTRIBUTE)
    .switchMap((request: FetchAttributeAction) => {

      return ajax.getJSON(`/api/fetch-attribute?id=${request.id}`)
        .flatMap((fetchUrl) => {
            // return new action
        })
        .takeUntil(action$.ofType(FETCH_ATTRIBUTE_CANCEL));
    });

interface FetchAttributeAction{
  id: number;
}

问题：我们如何取消基于动作类型+动作数据的执行？在我的例子中，它将 FETCH_ATTRIBUTE_CANCEL 和 id.

Answer 1

我认为您应该能够使用 pluck 和 filter 使 takeUntil 对某个动作 ID 具有选择性。

例如：

.takeUntil(action%.ofType(FETCH_ATTRIBUTE_CANCEL)
.pluck('id')
.filter((cancelActionID) => cancelActionID === fetchID))

对我来说不明显的部分是如何将当前的 fetchID 与运行进行比较。我可能会考虑尝试使用 do 存储在一个临时变量

Answer 2

关键是将 takeUntil 通知程序中的操作过滤为仅与您关心的 ID 匹配的操作。

action$.ofType(FETCH_ATTRIBUTE_CANCEL).filter(action => action.id === request.id)

它可能是这样的：

演示：https://stackblitz.com/edit/redux-observable-playground-xztkoo?file=fetchAttribute.js

const fetchAttributeEpic = action$ =>
  action$.ofType(FETCH_ATTRIBUTE)
    .mergeMap(request =>
      ajax.getJSON(`/api/fetch-attribute?id=${request.id}`)
        .map(response => fetchAttributeFulfilled(response))
        .takeUntil(
          action$.ofType(FETCH_ATTRIBUTE_CANCEL).filter(action => action.id === request.id)
        )
    );

你也可以看看之前的问题：

OP 还指出他们正在使用 switchMap（就像我最初复制他们的代码时一样）这意味着史诗自 [=13= 以来一次只有一个 getJSON ] 将取消订阅之前的内部 Observables。所以这也需要被链接起来。抓得好！

ReduxObservable 取消基于动作类型及其数据

ReduxObservable cancellation based on action type and its data

rxjs

rxjs5

redux-observable