僅當另一個史詩未運行時，我如何才能僅使 redux-observable 史詩繼續

Question

我基本上希望有史詩：

1. Epic A - 當 REQUEST_A 進入時，發出動作 EPIC_A_STARTED，在一段時間后（異步動作）發出動作 EPIC_A_END
2. Epic B - 當 REQUEST_B 進來時，如果 Epic A 還沒有開始繼續，否則等到 EPIC_A_END 完成。

理想情況下，兩個史詩在運行時都會等待它們的替代完成，因此一次只發生一個。

感覺就像我需要一個計數器在 EPIC_A_STARTED 發生時增加並在 EPIC_A_COMPLETED 發生時減少，但我不確定如何繼續。

如果我們能有一個像這樣的偽代碼這樣的操作符就好了：

// Operator we are trying to write
const waitForActionsToComplete = (startAction, endAction) => {
   // Not sure how to structure this so that it waits for there to be equal of both actions passing through
}


// Epic A
const EPIC_A_FILTER = (action$, state$) =>
  action$.pipe(
    of(actions.REQUEST_A),
    waitForActionsToComplete(actions.EPIC_B_START, actions.EPIC_B_END),
    mergeMap(() => { type: actions.EPIC_A_START }));

const EPIC_A_PROCESS = (action$, state$) =>
  action$.pipe(
    of(actions.EPIC_A_START),
    ...async task,
    mergeMap(() => { type: actions.EPIC_A_END }));


// Epic B
const EPIC_B_FILTER = (action$, state$) =>
  action$.pipe(
    of(actions.REQUEST_B),
    waitForActionsToComplete(actions.EPIC_A_START, actions.EPIC_A_END),
    mergeMap(() => { type: actions.EPIC_B_START }));

const EPIC_B_PROCESS = (action$, state$) =>
  action$.pipe(
    of(actions.EPIC_B_START),
    ...async task,
    mergeMap(() => { type: actions.EPIC_B_END }));

Answer 1

您可以使用scan對請求開始操作進行排隊，並且僅在史詩結束操作后出列。 我寫了一些偽代碼：

action$.pipe(
    of(actions.REQUEST_A, actions.REQUEST_B, actions.EPIC_A_END, actions.EPIC_B_END),
    scan(({queue}, current) => {
      if (current is epic end action)
        if (queue is not empty) {
          return { queue: queue.slice(1), triggerEpic: EPIC_A_START or EPIC_B_START depending on queue[0]  }
        }
        else {
          return { queue, triggerEpic: null };
        }
      }
      else {
        if (queue is not empty) {     
          return { queue: [...queue, current], triggerEpic: null };
        }
        else {
          return { queue: [], triggerEpic: EPIC_A_START or EPIC_B_START depending on current }; 
        } 
      } 
    }, { queue: [], triggerEpic: null }),
    filter(x => x.triggerEpic !== null),
    map(x => x.triggerEpic)
)