[英]Using RxJS switchMap to only unsubscribe from streams with the same request URL/action payload (redux-observable epics)
我有一个界面,用户可以触发对相同端点的调用但具有不同的参数(在本例中为UUID)。 到目前为止,每当我发送一个具有相同类型的新redux动作时,我一直很享受switchMap
取消我的飞行中http请求的行为,在这种情况下我仍然想要这种行为,但只有当新动作请求UUID时(动作对象的一部分)与正在进行的动作对象相同。 我不确定正确的做法。
例如,在一次调度多个动作之后,我希望所有具有唯一ID的动作完成,但那些重复现有且尚未完成的id的动作将取消之前的请求并取代它。
例如:
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调用GET_SOME_DATA
所有行为。
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请求并取消那些使用新动作的url,或者是一个我明显遗漏的更好的解决方案?
干杯!
编辑:我想知道是否将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%在适当的方面上升,但我喜欢一些反馈。 我也想支持手动取消选项, 这里讨论的方法是否正确实施?
编辑3:我认为这是我最后的工作版本。 删除了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请求通过!
您还可以使用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'),
))
)
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.