时间戳

首页 > 解决方案 > 在史诗中，发出一个动作，它在完成时会发出更多动作

typescript - 在史诗中，发出一个动作，它在完成时会发出更多动作

问题描述

我希望 Action1 的史诗（如下）作为可观察的 Action3 发出，然后在完成时发出 Action4 和 Action5。

const action1Epic$ = (action$: Observable<IAction1>, state$: Observable<IState>) => 
    action$.pipe(
        withLatestFromState(state$),
        switchMap(([_action, { stateProp }]) => {
            const somethingUninteresting$ = of(action2(stateProp));
            
            const compoundActions$ = of(action3(stateProp)).pipe(
                mergeMap(act =>
                    merge(...[of(action4(act.stateProp)), of(action5(act.stateProp))])
                )
            );
            return merge(somethingUninteresting$, compoundActions$);
        })
    );

Action3 有一个史诗：

const action3Epic$ = (action$: Observable<IAction3>, state$: Observable<IState>) => {
    console.log("Action 3 is really happening!")
    return action$.pipe(
       withLatestFromState(state$),
       switchMap(([_action, { stateProp }]) => {
          console.log("API call is happening!");
          return api.doSomething().pipe(
             map(statePropFromResponse => action3Success(statePropFromResponse)
          );
       })
    );
}

结果是我看到“行动 3 真的发生了！”的日志。但绝不会“正在发生 API 调用！”。在调度程序中，我看到 Action1、Action2、Action4 和 Action5 已处理，但从未处理 Action3。

标签： typescriptreduxrxjsredux-observable

解决方案

您需要将act自己包含在合并参数中。

const compoundActions$ = of(action3(stateProp)).pipe(
  mergeMap(act =>
    merge(...[of(act), of(action4(act.stateProp)), of(action5(act.stateProp))])
  )
);

action1 史诗中的 action3 实例 -act在mergeMap回调中 - 永远不会作为 Redux 动作发出，因为它不是由史诗中返回的 observable 发出的（特别是compoundActions$）。

您确实订阅了一个发出该动作（of(action3(stateProp)位）的可观察对象，但您只使用它来创建其他 2 个动作，这是由compoundActions$.

ps

不相关但希望有帮助：您可以简化创建可观察对象的方式。

merge(...[of(action4(act.stateProp)), of(action5(act.stateProp))]

可以简化为

from([action4(act.stateProp), action5(act.stateProp)])

就此而言 - 我不确定您是否只是在简化 SO 示例的现有代码 - 如果您需要做的只是按顺序发出动作 3、4 和 5，那么您可以这样做：

const compoundActions$ = from([
  action3(stateProp),
  action4(stateProp),
  action5(stateProp),
]);

推荐阅读