feat(action-listener-middleware): add take

Author: FaberVitale

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

@@ -46,6 +46,34 @@ interface ConditionFunction<State> {
 
 type MatchFunction<T> = (v: any) => v is T
 
+type TakePatternOutputWithoutTimeout<
+  State,
+  Predicate extends AnyActionListenerPredicate<State>
+> = Predicate extends MatchFunction<infer Action>
+  ? Promise<[Action, State, State]>
+  : Promise<[AnyAction, State, State]>
+
+type TakePatternOutputWithTimeout<
+  State,
+  Predicate extends AnyActionListenerPredicate<State>
+> = Predicate extends MatchFunction<infer Action>
+  ? Promise<[Action, State, State] | null>
+  : Promise<[AnyAction, State, State] | null>
+
+interface TakePattern<State> {
+  <Predicate extends AnyActionListenerPredicate<State>>(
+    predicate: Predicate
+  ): TakePatternOutputWithoutTimeout<State, Predicate>
+  <Predicate extends AnyActionListenerPredicate<State>>(
+    predicate: Predicate,
+    timeout: number
+  ): TakePatternOutputWithTimeout<State, Predicate>;
+  <Predicate extends AnyActionListenerPredicate<State>>(
+    predicate: Predicate,
+    timeout?: number | undefined
+  ): Promise<[AnyAction, State, State] | null>;
+}
+
 export interface HasMatchFunction<T> {
   match: MatchFunction<T>
 }
@@ -93,6 +121,7 @@ export interface ActionListenerMiddlewareAPI<S, D extends Dispatch<AnyAction>>
   unsubscribe(): void
   subscribe(): void
   condition: ConditionFunction<S>
+  take: TakePattern<S>
   currentPhase: MiddlewarePhase
   // TODO Figure out how to pass this through the other types correctly
   extra: unknown
@@ -246,6 +275,49 @@ type FallbackAddListenerOptions = (
 ) &
   ActionListenerOptions & { listener: ActionListener<any, any, any> }
 
+function createTakePattern<S>(
+  addListener: AddListenerOverloads<Unsubscribe, S,Dispatch<AnyAction>>
+): TakePattern<S> {
+  async function take<P extends AnyActionListenerPredicate<S>>(
+    predicate: P,
+    timeout: number | undefined
+  ) {
+    let unsubscribe: Unsubscribe = () => {}
+
+    const tuplePromise = new Promise<[AnyAction, S, S]>((resolve) => {
+      unsubscribe = addListener({
+        predicate: predicate as any,
+        listener: (action, listenerApi): void => {
+          // One-shot listener that cleans up as soon as the predicate resolves
+          listenerApi.unsubscribe()
+          resolve([
+            action,
+            listenerApi.getState(),
+            listenerApi.getOriginalState(),
+          ])
+        },
+      })
+    })
+
+    if (timeout === undefined) {
+      return tuplePromise
+    }
+
+    const timedOutPromise = new Promise<null>((resolve, reject) => {
+      setTimeout(() => {
+        resolve(null)
+      }, timeout)
+    })
+
+    const result = await Promise.race([tuplePromise, timedOutPromise])
+
+    unsubscribe()
+    return result
+  }
+
+  return take as TakePattern<S>
+}
+
 /** Accepts the possible options for creating a listener, and returns a formatted listener entry */
 export const createListenerEntry: TypedCreateListenerEntry<unknown> = (
   options: FallbackAddListenerOptions
@@ -466,39 +538,9 @@ export function createActionListenerMiddleware<
     return true
   }
 
-  const condition: ConditionFunction<S> = async (predicate, timeout) => {
-    let unsubscribe: Unsubscribe = () => {}
-
-    const conditionSucceededPromise = new Promise<boolean>(
-      (resolve, reject) => {
-        unsubscribe = addListener({
-          predicate,
-          listener: (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
+  const take = createTakePattern(addListener)
+  const condition: ConditionFunction<S> = (predicate, timeout) => {
+    return take(predicate, timeout).then(Boolean)
   }
 
   const middleware: Middleware<
@@ -558,6 +600,7 @@ export function createActionListenerMiddleware<
             ...api,
             getOriginalState,
             condition,
+            take,
             currentPhase,
             extra,
             unsubscribe: entry.unsubscribe,

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

@@ -26,6 +26,7 @@ const middlewareApi = {
   getOriginalState: expect.any(Function),
   condition: expect.any(Function),
   extra: undefined,
+  take: expect.any(Function),
   dispatch: expect.any(Function),
   currentPhase: expect.stringMatching(/beforeReducer|afterReducer/),
   unsubscribe: expect.any(Function),
@@ -648,6 +649,68 @@ describe('createActionListenerMiddleware', () => {
     expect(onError).toBeCalledWith(listenerError)
   })
 
+  test('take resolves to the tuple [A, CurrentState, PreviousState] when the predicate matches the action', (done) => {
+    const store = configureStore({
+      reducer: counterSlice.reducer,
+      middleware: (gDM) => gDM().prepend(middleware),
+    })
+
+    middleware.addListener({
+      predicate: incrementByAmount.match,
+      listener: async (_, listenerApi) => {
+        const stateBefore = listenerApi.getState()
+        const result = await listenerApi.take(increment.match)
+
+        expect(result).toEqual([
+          increment(),
+          listenerApi.getState(),
+          stateBefore,
+        ])
+        done()
+      },
+    })
+    store.dispatch(incrementByAmount(1))
+    store.dispatch(increment())
+  })
+
+  test('take resolves to null if the timeout exipires', async () => {
+    const store = configureStore({
+      reducer: counterSlice.reducer,
+      middleware: (gDM) => gDM().prepend(middleware),
+    })
+
+    middleware.addListener({
+      predicate: incrementByAmount.match,
+      listener: async (_, listenerApi) => {
+        const result = await listenerApi.take(increment.match, 50)
+
+        expect(result).toBe(null)
+      },
+    })
+    store.dispatch(incrementByAmount(1))
+    await delay(200)
+  })
+
+  test("take resolves to [A, CurrentState, PreviousState] if the timeout is provided but doesn't expires", (done) => {
+    const store = configureStore({
+      reducer: counterSlice.reducer,
+      middleware: (gDM) => gDM().prepend(middleware),
+    })
+
+    middleware.addListener({
+      predicate: incrementByAmount.match,
+      listener: async (_, listenerApi) => {
+        const stateBefore = listenerApi.getState()
+        const result = await listenerApi.take(increment.match, 50)
+
+        expect(result).toEqual([increment(), listenerApi.getState(), stateBefore])
+        done()
+      },
+    })
+    store.dispatch(incrementByAmount(1))
+    store.dispatch(increment())
+  })
+
   test('condition method resolves promise when the predicate succeeds', async () => {
     const store = configureStore({
       reducer: counterSlice.reducer,