我是 RxJS 的新手,如果它没有多大意义,我很抱歉。
假设我想要一个可重用的史诗,用于从应用加载史诗中获取将被操作调用的用户。
过于简化的例子:
const getUserEpic = action$ =>
action$.pipe(
ofType(GET_USER_REQUEST),
switchMap(action => from(service.fetchUser(action.userId).pipe(
mapTo({ type: GET_USER_SUCCESS })))
),
);
const appLoadEpic = action$ =>
action$.pipe(
ofType(LOAD_APP_REQUEST),
map(() => of({ type: GET_USER_REQUEST }, { type: SOME_OTHER_REQUEST }))
);
如果我想LOAD_APP_SUCCESS
在所有调用的史诗(getUser 等)完成后调用怎么办?如果它可以在 appLoadEpic 中完成,那就太好了,但恐怕这是不可能的。
我建议这样做的方式是将各个史诗组合成一个“元”史诗。也就是说,您可以使用各个流来侦听它们的各个事件,并在所有合并的流完成后传播它们。
const getUserEpic = action$ => ...
const someOtherEpic = action$ => ...
// Creates an epic that merges all the results from each provided epic
const initializationEpic = combineEpics(getUserEpic, someOtherEpic)
const appLoadEpic = (action$, state$) => {
// Runs the new epic with the action and state values.
const onLoad$ = initializationEpic(action$, state$).pipe(
endWith({type: LOAD_APP_SUCCESS})
)
// Listen for the load app request before subscribing to the initialization
action$.pipe(
ofType(LOAD_APP_REQUEST),
mergeMapTo(onLoad$),
)
}
如果你觉得很花哨并且不想通过导入注入史诗,你也可以动态注入史诗文档详细介绍了异步注入史诗的方法,这意味着你可以将它作为文件注入的一部分而不是文件注入启动期间的动作主体,这可能会使测试更容易一些。
const appLoadEpic = (action$, state$) => {
// Listen for the load app request before subscribing to the initialization
action$.pipe(
ofType(LOAD_APP_REQUEST),
// Now the epic is injected during the app loading, and you run it inline
// here. This makes it easy to mock it during testing
mergeMap(({epic}) => epic(action$, state$).pipe(endWith({type: LOAD_APP_SUCCESS}))),
)
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句