使用RxJS switchMap仅取消订阅具有相同请求URL /动作有效负载的流（redux-observable epics）

Question

我有一个界面，用户可以触发对相同端点的调用但具有不同的参数（在本例中为UUID）。到目前为止，每当我发送具有相同类型的新redux操作时，我一直在享受switchMap取消我的正在进行的http请求的行为，在这种情况下我仍然希望这种行为，但是仅如果新操作请求的UUID（操作对象的一部分）与已在进行中的操作相同。我不确定正确的方法。

例如，在一次调度多个动作之后，我希望所有具有唯一ID的动作完成，但那些重复现有且尚未完成的id的动作将取消之前的请求并取代它。< / p>

例如：

store.dispatch({ type: "GET_SOME_DATA", uuid: "1" })
store.dispatch({ type: "GET_SOME_DATA", uuid: "2" })
store.dispatch({ type: "GET_SOME_DATA", uuid: "2" })
store.dispatch({ type: "GET_SOME_DATA", uuid: "3" })
store.dispatch({ type: "GET_SOME_DATA", uuid: "2" })
// Get results back for '1', then '3', then '2' assuming equal response times.
// Only the duplicate uuid calls were cancelled, even though all have the same 'type'

我尝试使用.distinctUntilChanged((a, b) => a.uuid === b.uuid)过滤流输入到.switchMap只是为了看看会发生什么，但这仅仅限制了哪些操作到达switchMap，以及取消除最近的GET_SOME_DATA动作相关API调用之外的所有行为仍然会发生。

const getDataEpic = (action$) =>
  action$.ofType(GET_SOME_DATA)
    .switchMap(({ uuid }) => // would be great if the switchMap would only cancel existing streams with same uuid
      ajax.getJSON(`/api/datastuff/${uuid}`)
        .map((data) => successAction(uuid, data.values))
        .catch((err) => Observable.of(
          errorAction(uuid),
          setNotificationAction((err.xhr.response && err.xhr.response.message) || 'That went wrong'),
        ))

目前，我正在使用mergeMap，但我担心这可能导致我遇到的问题，例如我在旧版请求可能解决后最终解决的问题。最近的一个，导致我的redux存储用旧数据更新，因为mergeMap没有像switchMap那样取消Observable流...有没有办法让我查看当前的RxJS Ajax请求并取消那些新的动作＆ ＃39;网址，还是我明显遗漏的更好的解决方案？

干杯！

修改：我想知道将switchMap更改为mergeMap，然后链接takeUntil并取消其他GET_SOME_DATA操作将是一种正确的方法，或者如果只是所有请求立即取消？ 例如

const getDataEpic = (action$) =>
  action$.ofType(GET_SOME_DATA)
    .mergeMap(({ uuid }) =>
      ajax.getJSON(`/api/datastuff/${uuid}`)
        .takeUntil(
          action$.ofType(GET_SOME_DATA).filter(laterAction => laterAction.uuid === uuid)
        )
        .map((data) => successAction(uuid, data.values))
        .catch((err) => Observable.of(
          errorAction(uuid),
          setNotificationAction((err.xhr.response && err.xhr.response.message) || 'That went wrong'),
    ))

Edit2：显然takeUntil添加似乎正在运行！我不确定它是否100％在适当的方面上升，但我喜欢一些反馈。我也想支持手动取消选项，所讨论的方法here是否正确实施？

Edit3：我认为这是我的最终版本。在mergeMap中删除了Redux动作的解构，以防有人对redux-observables有更新的看法：

const getDataEpic = (action$) =>
  action$.ofType(GET_SOME_DATA)
    .mergeMap((action) =>
      ajax.getJSON(`/api/datastuff/${action.uuid}`)
        .takeUntil(Observable.merge(
          action$.ofType(MANUALLY_CANCEL_GETTING_DATA)
            .filter((cancelAction) => cancelAction.uuid === action.uuid),
          action$.ofType(GET_SOME_DATA)
            .filter((laterAction) => laterAction.uuid === action.uuid),
        ))
        .map((data) => successAction(action.uuid, data.values))
        .catch((err) => Observable.of(
          errorAction(action.uuid),
          setNotificationAction((err.xhr.response && err.xhr.response.message) || 'That went wrong'),
    ))

观察到的网络行为迅速点击了一切。只有非重复的id请求通过了！

Answer 1

您还可以使用 groupBy 运算符来处理具有相同uuid的流，并在每个uuid操作流上应用有用的 switchMap 行为：

action$.ofType(GET_SOME_DATA)
.groupBy(
    ({ uuid }) => uuid, // group all the actions by uuid
    x => x,
    group$ => group$.switchMap(_ => Observable.timer(5000)) // close existing streams if no event of a grouped action is emitted 5 seconds in a row (prevents memory leaks)
)
.mergeMap(actionsGroupedByUuid$ => 
    actionsGroupedByUuid$.switchMap(({ uuid }) => 
        ajax.getJSON(`/api/datastuff/${uuid}`)
            .map((data) => successAction(uuid, data.values))
            .catch((err) => Observable.of(
                errorAction(uuid),
                setNotificationAction((err.xhr.response && err.xhr.response.message) || 'That went wrong'),
            )) 
    )
);