触发多个动作并等待它们解析 RxJS / Redux Observables

woo*_*110 2 javascript rxjs redux redux-observable rxjs6

我有一个动作,我想用它来初始化我的应用程序,我想为这个动作创建一个史诗,然后在这个动作的后面触发多个其他动作,等待它们全部完成,然后再触发另一个动作。我看了一下别人的质疑,这是非常类似于这样一个

我已经尝试过这种方法,但对我来说,它不起作用,它会触发该APP_INIT动作,但随后无法触发序列中的任何其他动作。有人可以帮忙吗?

import { of } from 'rxjs';
import { mergeMap, zip, concat, mapTo } from 'rxjs/operators';
import { ofType } from 'redux-observable';
import { firstAction, secondAction } from 'actions';

export default function appInit (action$) {
  return (
    action$.pipe(
      ofType('APP_INIT'),
      mergeMap(() =>
        concat(
          of(firstAction()),
          of(secondAction()),
          zip(
            action$.ofType('ACTION_ONE_COMPLETE'),
            action$.ofType('ACTION_TWO_COMPLETE')
          ).mapTo(() => console.log('complete'))
        )
      )
    )
  );
}
Run Code Online (Sandbox Code Playgroud)

woo*_*110 6

原来我的代码在第一个实例中非常好,主要原因是我concatrxjs/operators我应该rxjs直接导入的时候导入,我花了几个小时才意识到但现在可以工作了。

下面的完整代码适用于任何可能有帮助的人。

import { of, concat, zip } from 'rxjs';
import { mergeMap, map, take } from 'rxjs/operators';
import { ofType } from 'redux-observable';

import { appInitialisationComplete, APP_INITIALISATION } from 'client/actions/app/app';
import { actionOne, ACTION_ONE_COMPLETE } from 'client/actions/action-one/action-one';
import { actioTwo, ACTION_TWO_COMPLETE } from 'client/actions/action-two/action-two';

/**
 * appInitialisationEpic
 * @param  {Object} action$
 * @return {Object}
 */
export default function appInitialisationEpic (action$) {
  return (
    action$.pipe(
      ofType(APP_INITIALISATION),
      mergeMap(() =>
        concat(
          of(actionOne()),
          of(actioTwo()),
          zip(
            action$.ofType(ACTION_ONE_COMPLETE).pipe(take(1)),
            action$.ofType(ACTION_TWO_COMPLETE).pipe(take(1))
          )
            .pipe(map(() => appInitialisationComplete()))
        )
      )
    )
  );
}
Run Code Online (Sandbox Code Playgroud)