Rxjs 等待第二个异步操作,然后继续redux observable
我在一个场景中有两个动作:Rxjs 等待第二个异步操作,然后继续redux observable,rxjs,redux-observable,Rxjs,Redux Observable,我在一个场景中有两个动作: INITIATE在单击按钮时触发,以及FETCH\u SUCCESS在页面加载时调用的AJAX请求将数据存储在状态时触发 epic处理INITIATE操作需要FETCH\u SUCCESS中的数据在工作状态下可用 如何编写此epic,使其1)正常执行其逻辑,在FETCH\u SUCCESS运行一次后单击次数相同,2)如果在FETCH\u SUCCESS之前单击,请等待FETCH\u SUCCESS发生,然后在数据可用/成功操作运行后继续执行逻辑 至少有一些简单的方法可
INITIATE
在单击按钮时触发,以及FETCH\u SUCCESS
在页面加载时调用的AJAX请求将数据存储在状态时触发
epic处理INITIATE
操作需要FETCH\u SUCCESS
中的数据在工作状态下可用
如何编写此epic,使其1)正常执行其逻辑,在FETCH\u SUCCESS
运行一次后单击次数相同,2)如果在FETCH\u SUCCESS
之前单击,请等待FETCH\u SUCCESS
发生,然后在数据可用/成功操作运行后继续执行逻辑
至少有一些简单的方法可以解决这个问题,我可以想到,但我不想用一个rxjx epic就可以实现。例如:1)失败/重试流,epic只检查数据是否可用,如果不可用,则以较小的延迟递归调用自身。2) 如果FETCH\u SUCCESS
尚未运行,则使INITIATE
在状态中设置一个标志,然后收听FETCH\u SUCCESS
并使其启动INITIATE
,如果在运行时设置了此标志
我想出的唯一不包括这两种方法的方法是将其写成两部史诗:
在启动之前处理获取成功
(快乐路径)的版本如下所示:
export const initiateFirstEpic = action$ => action$
.ofType(INITIATE)
.skipUntil(Observable.of(FETCH_SUCCESS))
.map(action => {
return LogicAction();
});
另一种方法是处理点击过快的问题,使INITIATE
发生在FETCH\u SUCCESS
之前:
export const successFirstEpic = action$ => action$
.ofType(INITIATE)
.switchMap(() =>
action$.ofType(FETCH_SUCCESS)
.take(1)
.map(action => {
return LogicAction();
})
);
这似乎不起作用,也不是我想要的样子。有没有一个好的方法来实现这一点?我对RxJS和Redux Observable很陌生,所以答案可能很明显。我想你要找的是
可选择使用可观察类型的FETCH_SUCCESS
操作,以防止每次获得FETCH_SUCCESS
时生成LoginAction
,以下是一个基于@m1ch4ls但使用操作符的版本:
const initiateEpic = action$ =>
action$
.combineLatest(action$.ofType(FETCH_SUCCESS).take(1))
.map(([initiateAction, fetch_success_action]) => {
return LogicAction();
});
最初,我不知道有一个静态函数Observable.combinelateest(obs1$,obs2$)
和一个操作符obs1$。combinelateest(obs2$)
,因此我对@m1ch4ls-answer的注释。这个解决方案在我尝试时不起作用。可观测到的确实在等待这两个动作被发出,但在那之后,史诗将触发每一个可能的动作。结果数组总是['which_ACTION','INITIATE','FETCH_SUCCESS']
。我希望它只在启动
操作时触发,但尚未找到合适的解决方案。如果我将combinelatetest
替换为latest from
.Oooooops nevermind,我使用的是action$.combinetest(action$.ofType('INITIATE')、action$.ofType('FETCH_SUCCESS'))
而不是observeable.combinelatetest(action$.ofType('INITIATE')、action$.ofType('FETCH_SUCCESS'))
,这就是为什么我要把它们和任何即将到来的行动结合起来。
const initiateEpic = action$ =>
action$
.combineLatest(action$.ofType(FETCH_SUCCESS).take(1))
.map(([initiateAction, fetch_success_action]) => {
return LogicAction();
});