javascript - Fire multiple actions and wait for them to resolve RxJSRedux Observables - Stack Overflow

admin管理员组

文章数量:1402775

I have an action that I want to use to initialise my app, I want to create an epic for this action and then fire multiple other actions off the back of this, wait for them to all plete and there fire another action. I had a look at other questions and it's pretty similar to this one

I've tried this approach and for me, it doesn't work, it fires the APP_INIT action then but then fails to fire any of the other actions in the sequence. Is anyone able to help?

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('plete'))
        )
      )
    )
  );
}

I have an action that I want to use to initialise my app, I want to create an epic for this action and then fire multiple other actions off the back of this, wait for them to all plete and there fire another action. I had a look at other questions and it's pretty similar to this one

I've tried this approach and for me, it doesn't work, it fires the APP_INIT action then but then fails to fire any of the other actions in the sequence. Is anyone able to help?

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('plete'))
        )
      )
    )
  );
}

• javascript
• redux
• rxjs
• rxjs6
• redux-observable

Share Improve this question Follow edited Feb 11, 2019 at 1:28 woolm110 asked Feb 10, 2019 at 21:42 woolm110woolm110 1,2041919 silver badges2929 bronze badges 2

• You say INIT action but in your example you have APP_INIT – martin Commented Feb 10, 2019 at 21:47
• Just a typo, i'll update. The APP_INIT action is firing and I can see this in Redux Dev tools, it's just not doing anything after that – woolm110 Commented Feb 10, 2019 at 21:47

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

Turns out my code was pretty much okay in the first instance, the main cause was that I was importing concat from rxjs/operators when I should have been importing from rxjs directly, it took me hours to realise but it now works.

Full code below for anyone that it might help.

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()))
        )
      )
    )
  );
}

bineLatest is what you want which will only emit when all observables have emitted.

const { bineLatest, of } = rxjs;
const { delay } = rxjs.operators;

bineLatest(
  of(1),
  of(2).pipe(delay(2000)),
  of(3).pipe(delay(1000))
).subscribe(([a,b,c]) => {
  console.log(`${a} ${b} ${c}`); // Will take 2 seconds as that is when all have emitted
});

<script src="https://cdnjs.cloudflare./ajax/libs/rxjs/6.4.0/rxjs.umd.min.js"></script>

本文标签： javascriptFire multiple actions and wait for them to resolve RxJSRedux ObservablesStack Overflow