Refactor internals to track entries by ID and use matchers

Author: markerikson

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

@@ -1,5 +1,6 @@
 import {
   createAction,
+  nanoid,
   PayloadAction,
   Middleware,
   Dispatch,
@@ -16,8 +17,14 @@ interface BaseActionCreator<P, T extends string, M = never, E = never> {
 interface TypedActionCreator<Type extends string> {
   (...args: any[]): Action<Type>
   type: Type
+  match: MatchFunction<any>
 }
 
+type ListenerPredicate<Action extends AnyAction, State = unknown> = (
+  action: Action,
+  state?: State
+) => boolean
+
 type MatchFunction<T> = (v: any) => v is T
 
 export interface HasMatchFunction<T> {
@@ -192,16 +199,14 @@ export function createActionListenerMiddleware<
   D extends Dispatch<AnyAction> = Dispatch
 >() {
   type ListenerEntry = ActionListenerOptions & {
+    id: string
     listener: ActionListener<any, S, D, any>
     unsubscribe: () => void
+    type?: string
+    predicate: ListenerPredicate<any>
   }
 
-  type ListenerEntryWithMatcher = ListenerEntry & {
-    matcher: MatchFunction<any>
-  }
-
-  const listenerMap: Record<string, Set<ListenerEntry> | undefined> = {}
-  const matcherListeners = new Set<ListenerEntryWithMatcher>()
+  const listenerMap = new Map<string, ListenerEntry>()
 
   const middleware: Middleware<
     {
@@ -225,114 +230,59 @@ export function createActionListenerMiddleware<
 
       return
     }
-    // @ts-ignore
-    const listeners = listenerMap[action.type]
-    let matchedMatcherListeners: ListenerEntry[] = []
-
-    if (matcherListeners.size > 0) {
-      matchedMatcherListeners = Array.from(matcherListeners).filter((entry) => {
-        return entry.matcher(action)
-      })
-    }
 
-    if (listeners || matcherListeners.size > 0) {
-      const allListeners = Array.from(listeners ?? []).concat(
-        matchedMatcherListeners
-      )
-      const defaultWhen = 'after'
-      let result: unknown
-      for (const phase of ['before', 'after'] as const) {
-        for (const entry of allListeners) {
-          if (phase !== (entry.when || defaultWhen)) {
-            continue
-          }
-          let stoppedPropagation = false
-          let currentPhase = phase
-          let synchronousListenerFinished = false
-          entry.listener(action, {
-            ...api,
-            stopPropagation() {
-              if (currentPhase === 'before') {
-                if (!synchronousListenerFinished) {
-                  stoppedPropagation = true
-                } else {
-                  throw new Error(
-                    'stopPropagation can only be called synchronously'
-                  )
-                }
+    let stateBefore = api.getState()
+
+    const defaultWhen: When = 'after'
+    let result: unknown
+    for (const phase of ['before', 'after'] as const) {
+      let stateNow = api.getState()
+      for (let entry of listenerMap.values()) {
+        if (
+          (entry.when || defaultWhen) !== phase ||
+          !entry.predicate(action, stateNow)
+        ) {
+          continue
+        }
+
+        let stoppedPropagation = false
+        let currentPhase = phase
+        let synchronousListenerFinished = false
+        entry.listener(action, {
+          ...api,
+          stopPropagation() {
+            if (currentPhase === 'before') {
+              if (!synchronousListenerFinished) {
+                stoppedPropagation = true
               } else {
                 throw new Error(
-                  'stopPropagation can only be called by action listeners with the `when` option set to "before"'
+                  'stopPropagation can only be called synchronously'
                 )
               }
-            },
-            unsubscribe: entry.unsubscribe,
-          })
-          synchronousListenerFinished = true
-          if (stoppedPropagation) {
-            return action
-          }
-        }
-        if (phase === 'before') {
-          result = next(action)
-        } else {
-          return result
+            } else {
+              throw new Error(
+                'stopPropagation can only be called by action listeners with the `when` option set to "before"'
+              )
+            }
+          },
+          unsubscribe: entry.unsubscribe,
+        })
+        synchronousListenerFinished = true
+        if (stoppedPropagation) {
+          return action
         }
       }
+      if (phase === 'before') {
+        result = next(action)
+      } else {
+        return result
+      }
     }
     return next(action)
   }
 
   type Unsubscribe = () => void
 
-  function addStringListener<T extends string, O extends ActionListenerOptions>(
-    type: T,
-    listener: ActionListener<Action<T>, S, D, O>,
-    options?: O
-  ): Unsubscribe {
-    const listeners = getListenerMap(type)
-    let entry = findListenerEntry(listeners, listener)
-
-    if (!entry) {
-      entry = {
-        ...options,
-        listener,
-        unsubscribe: () => listeners.delete(entry!),
-      }
-
-      listeners.add(entry)
-    }
-
-    return entry.unsubscribe
-  }
-
-  function addMatcherListener<
-    MA extends AnyAction,
-    M extends MatchFunction<MA>,
-    O extends ActionListenerOptions
-  >(
-    matcher: M,
-    listener: ActionListener<MA, S, D, O>,
-    options?: O
-  ): Unsubscribe {
-    let entry = findListenerEntry(matcherListeners, listener) as
-      | ListenerEntryWithMatcher
-      | undefined
-
-    if (!entry) {
-      entry = {
-        ...options,
-        listener,
-        matcher,
-        unsubscribe: () => matcherListeners.delete(entry!),
-      }
-
-      matcherListeners.add(entry)
-    }
-
-    return entry.unsubscribe
-  }
-
   type GuardedType<T> = T extends (x: any) => x is infer T ? T : never
 
   function addListener<
@@ -358,28 +308,55 @@ export function createActionListenerMiddleware<
     matcher: M,
     listener: ActionListener<GuardedType<M>, S, D, O>,
     options?: O
+  ): Unsubscribe // eslint-disable-next-line no-redeclare
+  function addListener<
+    MA extends AnyAction,
+    M extends ListenerPredicate<MA>,
+    O extends ActionListenerOptions
+  >(
+    matcher: M,
+    listener: ActionListener<AnyAction, S, D, O>,
+    options?: O
   ): Unsubscribe
   // eslint-disable-next-line no-redeclare
   function addListener(
     typeOrActionCreator: string | TypedActionCreator<any>,
     listener: ActionListener<AnyAction, S, D, any>,
     options?: ActionListenerOptions
   ): Unsubscribe {
-    if (typeof typeOrActionCreator === 'string') {
-      return addStringListener(typeOrActionCreator, listener, options)
-    } else if (typeof typeOrActionCreator.type === 'string') {
-      return addStringListener(typeOrActionCreator.type, listener, options)
-    } else {
-      const matcher = typeOrActionCreator as unknown as MatchFunction<any>
-      return addMatcherListener(matcher, listener, options)
-    }
-  }
+    let predicate: ListenerPredicate<any>
+    let type: string | undefined
 
-  function getListenerMap(type: string) {
-    if (!listenerMap[type]) {
-      listenerMap[type] = new Set()
+    let entry = findListenerEntry(
+      (existingEntry) => existingEntry.listener === listener
+    )
+
+    if (!entry) {
+      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>
+      }
+
+      const id = nanoid()
+      const unsubscribe = () => listenerMap.delete(id)
+      entry = {
+        ...options,
+        id,
+        listener,
+        type,
+        predicate,
+        unsubscribe,
+      }
+
+      listenerMap.set(id, entry)
     }
-    return listenerMap[type]!
+
+    return entry.unsubscribe
   }
 
   function removeListener<C extends TypedActionCreator<any>>(
@@ -401,31 +378,28 @@ export function createActionListenerMiddleware<
         ? typeOrActionCreator
         : typeOrActionCreator.type
 
-    const listeners = listenerMap[type]
-
-    if (!listeners) {
-      return false
-    }
-
-    let entry = findListenerEntry(listeners, listener)
+    let entry = findListenerEntry(
+      (entry) => entry.type === type && entry.listener === listener
+    )
 
     if (!entry) {
       return false
     }
 
-    listeners.delete(entry)
+    listenerMap.delete(entry.id)
     return true
   }
 
   function findListenerEntry(
-    entries: Set<ListenerEntry>,
-    listener: Function
+    comparator: (entry: ListenerEntry) => boolean
   ): ListenerEntry | undefined {
-    for (const entry of entries) {
-      if (entry.listener === listener) {
+    for (const entry of listenerMap.values()) {
+      if (comparator(entry)) {
         return entry
       }
     }
+
+    return undefined
   }
 
   return Object.assign(