Failing attempt to improve listener typings

Author: markerikson

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

@@ -21,9 +21,10 @@ interface TypedActionCreator<Type extends string> {
   match: MatchFunction<any>
 }
 
-type ListenerPredicate<Action extends AnyAction, State = unknown> = (
+type ListenerPredicate<Action extends AnyAction, State> = (
   action: Action,
-  state?: State
+  currentState?: State,
+  originalState?: State
 ) => boolean
 
 type MatchFunction<T> = (v: any) => v is T
@@ -38,6 +39,16 @@ export const hasMatchFunction = <T>(
   return v && typeof (v as HasMatchFunction<T>).match === 'function'
 }
 
+export const isActionCreator = (
+  item: Function
+): item is TypedActionCreator<any> => {
+  return (
+    typeof item === 'function' &&
+    typeof (item as any).type === 'string' &&
+    hasMatchFunction(item as any)
+  )
+}
+
 /** @public */
 export type Matcher<T> = HasMatchFunction<T> | MatchFunction<T>
 
@@ -208,7 +219,7 @@ const actualMiddlewarePhases = ['beforeReducer', 'afterReducer'] as const
  * @alpha
  */
 export function createActionListenerMiddleware<
-  S,
+  S = any,
   // TODO Carry through the thunk extra arg somehow?
   D extends Dispatch<AnyAction> = ThunkDispatch<S, unknown, AnyAction>,
   ExtraArgument = unknown
@@ -218,7 +229,7 @@ export function createActionListenerMiddleware<
     listener: ActionListener<any, S, D, any>
     unsubscribe: () => void
     type?: string
-    predicate: ListenerPredicate<any>
+    predicate: ListenerPredicate<any, any>
   }
 
   const listenerMap = new Map<string, ListenerEntry>()
@@ -256,11 +267,12 @@ export function createActionListenerMiddleware<
     const getOriginalState = () => originalState
 
     for (const currentPhase of actualMiddlewarePhases) {
-      let stateNow = api.getState()
+      let currentState = api.getState()
       for (let entry of listenerMap.values()) {
         const runThisPhase =
           entry.when === 'both' || entry.when === currentPhase
-        const runListener = runThisPhase && entry.predicate(action, stateNow)
+        const runListener =
+          runThisPhase && entry.predicate(action, currentState, originalState)
         if (!runListener) {
           continue
         }
@@ -306,30 +318,33 @@ export function createActionListenerMiddleware<
   // eslint-disable-next-line no-redeclare
   function addListener<
     MA extends AnyAction,
-    M extends ListenerPredicate<MA>,
+    M extends MatchFunction<MA>,
     O extends ActionListenerOptions
   >(
     matcher: M,
-    listener: ActionListener<AnyAction, S, D, O>,
+    listener: ActionListener<GuardedType<M>, S, D, O>,
     options?: O
   ): Unsubscribe
   // eslint-disable-next-line no-redeclare
   function addListener<
     MA extends AnyAction,
-    M extends MatchFunction<MA>,
+    M extends ListenerPredicate<MA, S>,
     O extends ActionListenerOptions
   >(
     matcher: M,
-    listener: ActionListener<GuardedType<M>, S, D, O>,
+    listener: ActionListener<AnyAction, S, D, O>,
     options?: O
   ): Unsubscribe
   // eslint-disable-next-line no-redeclare
   function addListener(
-    typeOrActionCreator: string | TypedActionCreator<any>,
+    typeOrActionCreator:
+      | string
+      | TypedActionCreator<any>
+      | ListenerPredicate<any, any>,
     listener: ActionListener<AnyAction, S, D, any>,
     options?: ActionListenerOptions
   ): Unsubscribe {
-    let predicate: ListenerPredicate<any>
+    let predicate: ListenerPredicate<any, any>
     let type: string | undefined
 
     let entry = findListenerEntry(
@@ -340,11 +355,16 @@ export function createActionListenerMiddleware<
       if (typeof typeOrActionCreator === 'string') {
         type = typeOrActionCreator
         predicate = (action: any) => action.type === type
-      } else if (typeof typeOrActionCreator.type === 'string') {
-        type = typeOrActionCreator.type
-        predicate = typeOrActionCreator.match
       } else {
-        predicate = typeOrActionCreator as unknown as ListenerPredicate<any>
+        if (isActionCreator(typeOrActionCreator)) {
+          type = typeOrActionCreator.type
+          predicate = typeOrActionCreator.match
+        } else {
+          predicate = typeOrActionCreator as unknown as ListenerPredicate<
+            any,
+            any
+          >
+        }
       }
 
       const id = nanoid()

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

@@ -26,16 +26,20 @@ const noop = () => {}
 
 describe('createActionListenerMiddleware', () => {
   let store = configureStore({
-    reducer: () => ({}),
+    reducer: () => 42,
     middleware: (gDM) => gDM().prepend(createActionListenerMiddleware()),
   })
 
+  interface CounterState {
+    value: number
+  }
+
   const counterSlice = createSlice({
     name: 'counter',
-    initialState: 0,
+    initialState: { value: 0 } as CounterState,
     reducers: {
       increment(state) {
-        return state + 1
+        state.value += 1
       },
     },
   })
@@ -175,22 +179,38 @@ describe('createActionListenerMiddleware', () => {
       middleware: (gDM) => gDM().prepend(middleware),
     })
 
-    let listenerCalls = 0
+    let listener1Calls = 0
 
     middleware.addListener(
-      (action, state) => {
-        return state > 1
+      // TODO Can't figure out how to get `any` or a real state type instead of `unknown` here
+      // @ts-expect-error
+      (action: AnyAction, state: CounterState) => {
+        return state.value > 1
+      },
+      (action, listenerApi) => {
+        listener1Calls++
+      }
+    )
+
+    let listener2Calls = 0
+
+    middleware.addListener(
+      // @ts-expect-error
+      (action, state: CounterState, prevState: CounterState) => {
+        return state.value > 1 && prevState.value % 2 === 0
       },
       (action, listenerApi) => {
-        listenerCalls++
+        listener2Calls++
       }
     )
 
     store.dispatch(increment())
     store.dispatch(increment())
     store.dispatch(increment())
+    store.dispatch(increment())
 
-    expect(listenerCalls).toBe(2)
+    expect(listener1Calls).toBe(3)
+    expect(listener2Calls).toBe(1)
   })
 
   test('subscribing with the same listener will not make it trigger twice (like EventTarget.addEventListener())', () => {
@@ -284,11 +304,11 @@ describe('createActionListenerMiddleware', () => {
     expect(listener.mock.calls).toEqual([[testAction1('a'), middlewareApi]])
   })
 
-  const unforwaredActions: [string, AnyAction][] = [
+  const unforwardedActions: [string, AnyAction][] = [
     ['addListenerAction', addListenerAction(testAction1, noop)],
     ['removeListenerAction', removeListenerAction(testAction1, noop)],
   ]
-  test.each(unforwaredActions)(
+  test.each(unforwardedActions)(
     '"%s" is not forwarded to the reducer',
     (_, action) => {
       reducer.mockClear()