Javascript 如何在没有store.dispatch的情况下链接异步操作并等待结果
我正在尝试编写我的Javascript 如何在没有store.dispatch的情况下链接异步操作并等待结果,javascript,redux,rxjs,redux-observable,Javascript,Redux,Rxjs,Redux Observable,我正在尝试编写我的初始化操作,它应该以以下方式将一些异步操作链接在一起 调用初始化操作 同时调用两个异步操作 等待上述操作完成 运行另外一个操作 完成初始化 下面是我期望的redux流 初始化已开始=>异步动作已开始和异步动作已开始=>异步动作已完成和异步动作已完成异步动作已开始异步动作已完成异步动作已完成 我使用store.dispatch实现了这个流程,在我的epic中,我知道这是反模式的,它将在1.0.0版本中删除,所以我想知道如何使用纯epics实现它 我的工作方案 export con
初始化操作,它应该以以下方式将一些异步操作链接在一起
调用初始化操作
同时调用两个异步操作
等待上述操作完成
运行另外一个操作
完成初始化
下面是我期望的redux流
初始化已开始
=>异步动作已开始
和异步动作已开始
=>异步动作已完成
和异步动作已完成
异步动作已开始
异步动作已完成
异步动作已完成
我使用store.dispatch
实现了这个流程,在我的epic中,我知道这是反模式的,它将在1.0.0版本中删除,所以我想知道如何使用纯epics实现它
我的工作方案
export const initEpic = (action$: ActionsObservable<Action>, store) =>
action$.filter(actions.initialization.started.match)
.switchMap(action => (
Observable.forkJoin(
waitForActions(action$, actions.asyncA.done, actions.asyncB.done),
Observable.of(
store.dispatch(actions.asyncA.started(action.payload)),
store.dispatch(actions.asyncB.started(action.payload)),
)
).map(() => actions.asyncC.started(action.payload))
)
);
const waitForActions = (action$, ...reduxActions) => {
const actionTypes = reduxActions.map(x => x.type);
const obs = actionTypes.map(type => action$.ofType(type).take(1));
return Observable.forkJoin(obs);
}
但它不分派启动动作异步动作\u A\u启动
和异步动作\u B\u启动
听起来合并
非常适合这一点。您将开始侦听asyncA.done
和asyncB.done
,然后在等待时,通过发出asyncA.started
和asyncB.started
来启动请求。这两个流合并为一个流,因此它以正确的顺序发生,并且其中一个流发出的操作由我们的epic发出,而无需store.dispatch
const initEpic = action$ =>
action$.filter(actions.initialization.started.match)
.switchMap(action => (
Observable.merge(
waitForActions(action$, actions.asyncA.done, actions.asyncB.done)
.map(() => actions.asyncC.started(action.payload)),
Observable.of(
actions.asyncA.started(action.payload),
actions.asyncB.started(action.payload),
)
)
)
);
下面是一个JSBin演示:
它不做任何ASYNC\u ACTION\u C\u FINISHED
和INITIALIZATION\u FINISHED
之类的事情,因为问题中没有包含这方面的代码,所以不确定它会做什么。非常感谢。我花了一段时间才明白为什么不需要在合并中使用store.dispatch
。我不知道forkJoin不会返回任何东西,直到所有可观察到的都解决了。这就是为什么我的操作没有store.dispatch
就不能调度的原因。你是对的,我忘了用ASYNC\u ACTION\u C\u FINISHED
和INITIALIZATION\u FINISHED
添加整个代码,对此表示抱歉。幸运的是,它与此非常相似,所以我认为我现在可以处理它
const initEpic = action$ =>
action$.filter(actions.initialization.started.match)
.switchMap(action => (
Observable.merge(
waitForActions(action$, actions.asyncA.done, actions.asyncB.done)
.map(() => actions.asyncC.started(action.payload)),
Observable.of(
actions.asyncA.started(action.payload),
actions.asyncB.started(action.payload),
)
)
)
);