Add a condition method that enables async workflows

Author: markerikson

packages/action-listener-middleware/src/index.ts

@@ -27,6 +27,11 @@ type ListenerPredicate<Action extends AnyAction, State> = (
   originalState?: State
 ) => boolean
 
+type ConditionFunction<Action extends AnyAction, State> = (
+  predicate: ListenerPredicate<Action, State> | (() => boolean),
+  timeout?: number
+) => Promise<boolean>
+
 type MatchFunction<T> = (v: any) => v is T
 
 export interface HasMatchFunction<T> {
@@ -73,6 +78,7 @@ export interface ActionListenerMiddlewareAPI<
 > extends MiddlewareAPI<D, S> {
   getOriginalState: () => S
   unsubscribe(): void
+  condition: ConditionFunction<AnyAction, S>
   currentPhase: MiddlewarePhase
   // TODO Figure out how to pass this through the other types correctly
   extra: unknown
@@ -281,6 +287,8 @@ export function createActionListenerMiddleware<
           entry.listener(action, {
             ...api,
             getOriginalState,
+            // eslint-disable-next-line @typescript-eslint/no-use-before-define
+            condition,
             currentPhase,
             extra,
             unsubscribe: entry.unsubscribe,
@@ -428,6 +436,41 @@ export function createActionListenerMiddleware<
     return undefined
   }
 
+  const condition: ConditionFunction<AnyAction, S> = async (
+    predicate,
+    timeout
+  ) => {
+    let unsubscribe: Unsubscribe = () => {}
+
+    const conditionSucceededPromise = new Promise<boolean>(
+      (resolve, reject) => {
+        unsubscribe = addListener(predicate, (action, listenerApi) => {
+          // One-shot listener that cleans up as soon as the predicate resolves
+          listenerApi.unsubscribe()
+          resolve(true)
+        })
+      }
+    )
+
+    if (timeout === undefined) {
+      return conditionSucceededPromise
+    }
+
+    const timedOutPromise = new Promise<boolean>((resolve, reject) => {
+      setTimeout(() => {
+        resolve(false)
+      }, timeout)
+    })
+
+    const result = await Promise.race([
+      conditionSucceededPromise,
+      timedOutPromise,
+    ])
+
+    unsubscribe()
+    return result
+  }
+
   return Object.assign(
     middleware,
     { addListener, removeListener },

packages/action-listener-middleware/src/tests/listenerMiddleware.test.ts

@@ -16,6 +16,7 @@ import {
 const middlewareApi = {
   getState: expect.any(Function),
   getOriginalState: expect.any(Function),
+  condition: expect.any(Function),
   extra: undefined,
   dispatch: expect.any(Function),
   currentPhase: expect.stringMatching(/beforeReducer|afterReducer/),
@@ -45,6 +46,10 @@ describe('createActionListenerMiddleware', () => {
   })
   const { increment } = counterSlice.actions
 
+  function delay(ms: number) {
+    return new Promise((resolve) => setTimeout(resolve, ms))
+  }
+
   let reducer: jest.Mock
   let middleware: ReturnType<typeof createActionListenerMiddleware>
 
@@ -469,4 +474,87 @@ describe('createActionListenerMiddleware', () => {
     store.dispatch(testAction1('a'))
     expect(listener.mock.calls).toEqual([[testAction1('a'), middlewareApi]])
   })
+
+  test('condition method resolves promise when the predicate succeeds', async () => {
+    const store = configureStore({
+      reducer: counterSlice.reducer,
+      middleware: (gDM) => gDM().prepend(middleware),
+    })
+
+    let finalCount = 0
+    let listenerStarted = false
+
+    middleware.addListener(
+      // @ts-expect-error
+      (action, currentState: CounterState) => {
+        return increment.match(action) && currentState.value === 0
+      },
+      async (action, listenerApi) => {
+        listenerStarted = true
+        const result = await listenerApi.condition(
+          // @ts-expect-error
+          (action, currentState: CounterState) => {
+            return currentState.value === 3
+          }
+        )
+
+        expect(result).toBe(true)
+        const latestState = listenerApi.getState() as CounterState
+        finalCount = latestState.value
+      },
+      { when: 'beforeReducer' }
+    )
+
+    store.dispatch(increment())
+    expect(listenerStarted).toBe(true)
+    await delay(50)
+    store.dispatch(increment())
+    store.dispatch(increment())
+
+    await delay(50)
+
+    expect(finalCount).toBe(3)
+  })
+
+  test('condition method resolves promise when there is a timeout', async () => {
+    const store = configureStore({
+      reducer: counterSlice.reducer,
+      middleware: (gDM) => gDM().prepend(middleware),
+    })
+
+    let finalCount = 0
+    let listenerStarted = false
+
+    middleware.addListener(
+      // @ts-expect-error
+      (action, currentState: CounterState) => {
+        return increment.match(action) && currentState.value === 0
+      },
+      async (action, listenerApi) => {
+        listenerStarted = true
+        const result = await listenerApi.condition(
+          // @ts-expect-error
+          (action, currentState: CounterState) => {
+            return currentState.value === 3
+          },
+          50
+        )
+
+        expect(result).toBe(false)
+        const latestState = listenerApi.getState() as CounterState
+        finalCount = latestState.value
+      },
+      { when: 'beforeReducer' }
+    )
+
+    store.dispatch(increment())
+    expect(listenerStarted).toBe(true)
+
+    store.dispatch(increment())
+
+    await delay(150)
+    store.dispatch(increment())
+
+    expect(finalCount).toBe(2)
+  })
 })