Hold epic in Redux Observable until action is received

2
votes

I'm new to rxjs and redux-observables

I have two epics:

export const appInit = action$ =>
  action$.ofType(actions.appInitRequest)
  .take(1)
  .switchMap(() => actions.fetchData())

and

export const navigation = ($action, {getState}) =>
  $action.ofType(actions.locationChange)
  .do(console.log)

App Init fires action to fetch data, Is it possible to hold the navigation epic till the fetch data complete? so if navigation action received and fetch data didn't complete we'll wait till fetch data complete (dispatch action.fetchDataSuccess) and than continue the navigation epic flow?

I tried the following code but than every request after the fetchDataSuccess waits for new fetchDataSuccess

export const navigation = ($action, {getState}) =>
  $action.ofType(actions.locationChange)
    .switchMap(({payload: {pathname}}) =>
      $action.ofType(action.fetchDataSuccess)
      .take(1)
1
reduxrxjsredux-observable

1 Answers

1
votes

Try to use withLatestFrom:

export const navigation = ($action, {getState}) =>
  $action.ofType(actions.locationChange)
    .withLatestFrom(appInit)
    .filter(([locationChangeEvent, appInitEvent]) => {
      return /* check that app inited successfully */
    })
    .map(([locationChangeEvent]) => locationChangeEvent)
    .do(console.log)