createDynamicMiddleware bike shedding

packages/toolkit/src/dynamicMiddleware/index.ts

@@ -2,10 +2,10 @@ import type {
   Middleware,
   Dispatch as ReduxDispatch,
   UnknownAction,
-  MiddlewareAPI,
 } from 'redux'
 import { compose } from 'redux'
 import { createAction, isAction } from '../createAction'
+import { isAllOf } from '../matchers'
 import { nanoid } from '../nanoid'
 import { find } from '../utils'
 import type {
@@ -27,33 +27,32 @@ const createMiddlewareEntry = <
   applied: new Map(),
 })
 
+const matchInstance =
+  (instanceId: string) =>
+  (action: any): action is { meta: { instanceId: string } } =>
+    action?.meta?.instanceId === instanceId
+
 export const createDynamicMiddleware = <
   State = any,
   Dispatch extends ReduxDispatch<UnknownAction> = ReduxDispatch<UnknownAction>
 >(): DynamicMiddlewareInstance<State, Dispatch> => {
   const instanceId = nanoid()
   const middlewareMap = new Map<string, MiddlewareEntry<State, Dispatch>>()
 
-  const insertEntry = (entry: MiddlewareEntry<State, Dispatch>) => {
-    middlewareMap.set(entry.id, entry)
-  }
-
-  const withMiddleware = (() => {
-    const withMiddleware = createAction(
+  const withMiddleware = Object.assign(
+    createAction(
       'dynamicMiddleware/add',
       (...middlewares: Middleware<any, State, Dispatch>[]) => ({
         payload: middlewares,
         meta: {
           instanceId,
         },
       })
-    )
-    // @ts-ignore
-    withMiddleware.withTypes = () => withMiddleware
-    return withMiddleware as WithMiddleware<State, Dispatch>
-  })()
+    ),
+    { withTypes: () => withMiddleware }
+  ) as WithMiddleware<State, Dispatch>
 
-  const addMiddleware = (() => {
+  const addMiddleware = Object.assign(
     function addMiddleware(...middlewares: Middleware<any, State, Dispatch>[]) {
       middlewares.forEach((middleware) => {
         let entry = find(
@@ -63,16 +62,13 @@ export const createDynamicMiddleware = <
         if (!entry) {
           entry = createMiddlewareEntry(middleware)
         }
-        insertEntry(entry)
+        middlewareMap.set(entry.id, entry)
       })
-    }
-    addMiddleware.withTypes = () => addMiddleware
-    return addMiddleware as AddMiddleware<State, Dispatch>
-  })()
+    },
+    { withTypes: () => addMiddleware }
+  ) as AddMiddleware<State, Dispatch>
 
-  const getFinalMiddleware = (
-    api: MiddlewareAPI<Dispatch, State>
-  ): ReturnType<Middleware<any, State, Dispatch>> => {
+  const getFinalMiddleware: Middleware<{}, State, Dispatch> = (api) => {
     const appliedMiddleware = Array.from(middlewareMap.values()).map(
       (entry) => {
         let applied = entry.applied.get(api)
@@ -86,13 +82,15 @@ export const createDynamicMiddleware = <
     return compose(...appliedMiddleware)
   }
 
+  const isWithMiddleware = isAllOf(
+    isAction,
+    withMiddleware,
+    matchInstance(instanceId)
+  )
+
   const middleware: DynamicMiddleware<State, Dispatch> =
     (api) => (next) => (action) => {
-      if (
-        isAction(action) &&
-        withMiddleware.match(action) &&
-        action.meta.instanceId === instanceId
-      ) {
+      if (isWithMiddleware(action)) {
         addMiddleware(...action.payload)
         return api.dispatch
       }
@@ -103,5 +101,6 @@ export const createDynamicMiddleware = <
     middleware,
     addMiddleware,
     withMiddleware,
+    instanceId,
   }
 }

packages/toolkit/src/dynamicMiddleware/react/index.ts

@@ -84,9 +84,7 @@ export const createDynamicMiddleware = <
       Middlewares extends Middleware<any, State, Dispatch>[]
     >(...middlewares: Middlewares) {
       instance.addMiddleware(...middlewares)
-      return function useDispatchWithMiddleware() {
-        return useDispatch()
-      }
+      return useDispatch
     }
     createDispatchWithMiddlewareHook.withTypes = () =>
       createDispatchWithMiddlewareHook

packages/toolkit/src/dynamicMiddleware/tests/index.test.ts

@@ -4,34 +4,35 @@ import { configureStore } from '../../configureStore'
 import type { BaseActionCreator, PayloadAction } from '../../createAction'
 import { isAction } from '../../createAction'
 import { createAction } from '../../createAction'
+import { isAllOf } from '../../matchers'
+
+const probeType = 'probeableMW/probe'
 
 export interface ProbeMiddleware
-  extends BaseActionCreator<number, 'probeableMW/probe'> {
-  <Id extends number>(id: Id): PayloadAction<Id, 'probeableMW/probe'>
+  extends BaseActionCreator<number, typeof probeType> {
+  <Id extends number>(id: Id): PayloadAction<Id, typeof probeType>
 }
 
-export const probeMiddleware = createAction<number>(
-  'probeableMW/probe'
-) as ProbeMiddleware
+export const probeMiddleware = createAction(probeType) as ProbeMiddleware
+
+const matchId =
+  <Id extends number>(id: Id) =>
+  (action: any): action is PayloadAction<Id> =>
+    action.payload === id
 
-export const makeProbeableMiddleware =
-  <Id extends number>(
-    id: Id
-  ): Middleware<{
-    (action: PayloadAction<Id, 'probeableMW/probe'>): Id
-  }> =>
-  (api) =>
-  (next) =>
-  (action) => {
-    if (
-      isAction(action) &&
-      probeMiddleware.match(action) &&
-      action.payload === id
-    ) {
+export const makeProbeableMiddleware = <Id extends number>(
+  id: Id
+): Middleware<{
+  (action: PayloadAction<Id, typeof probeType>): Id
+}> => {
+  const isMiddlewareAction = isAllOf(isAction, probeMiddleware, matchId(id))
+  return (api) => (next) => (action) => {
+    if (isMiddlewareAction(action)) {
       return id
     }
     return next(action)
   }
+}
 
 const staticMiddleware = makeProbeableMiddleware(1)
 

packages/toolkit/src/dynamicMiddleware/types.ts

@@ -89,4 +89,5 @@ export type DynamicMiddlewareInstance<
   middleware: DynamicMiddleware<State, Dispatch>
   addMiddleware: AddMiddleware<State, Dispatch>
   withMiddleware: WithMiddleware<State, Dispatch>
+  instanceId: string
 }