Rewrite MiddlewareArray and gDM for better Dispatch inference

.github/workflows/tests.yml

@@ -96,7 +96,7 @@ jobs:
       fail-fast: false
       matrix:
         node: ['14.x']
-        ts: ['3.9', '4.0', '4.1', '4.2', '4.3', '4.4', '4.5', 'next']
+        ts: ['4.1', '4.2', '4.3', '4.4', '4.5', 'next']
     steps:
       - name: Checkout repo
         uses: actions/checkout@v2

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

@@ -52,8 +52,11 @@ describe('fork', () => {
     },
   })
   const { increment, decrement, incrementByAmount } = counterSlice.actions
-  let middleware: ReturnType<typeof createActionListenerMiddleware>
-  let store: EnhancedStore<CounterSlice>
+  let middleware = createActionListenerMiddleware()
+  let store = configureStore({
+    reducer: counterSlice.reducer,
+    middleware: (gDM) => gDM().prepend(middleware),
+  })
 
   beforeEach(() => {
     middleware = createActionListenerMiddleware()

packages/toolkit/src/configureStore.ts

@@ -20,7 +20,7 @@ import type {
   CurriedGetDefaultMiddleware,
 } from './getDefaultMiddleware'
 import { curryGetDefaultMiddleware } from './getDefaultMiddleware'
-import type { DispatchForMiddlewares, NoInfer } from './tsHelpers'
+import type { NoInfer, ExtractDispatchExtensions } from './tsHelpers'
 
 const IS_PRODUCTION = process.env.NODE_ENV === 'production'
 
@@ -110,7 +110,7 @@ export interface EnhancedStore<
    *
    * @inheritdoc
    */
-  dispatch: Dispatch<A> & DispatchForMiddlewares<M>
+  dispatch: ExtractDispatchExtensions<M> & Dispatch<A>
 }
 
 /**
@@ -160,7 +160,7 @@ export function configureStore<
   }
   if (
     !IS_PRODUCTION &&
-    finalMiddleware.some((item) => typeof item !== 'function')
+    finalMiddleware.some((item: any) => typeof item !== 'function')
   ) {
     throw new Error(
       'each middleware provided to configureStore must be a function'

packages/toolkit/src/getDefaultMiddleware.ts

@@ -8,6 +8,7 @@ import { createImmutableStateInvariantMiddleware } from './immutableStateInvaria
 
 import type { SerializableStateInvariantMiddlewareOptions } from './serializableStateInvariantMiddleware'
 import { createSerializableStateInvariantMiddleware } from './serializableStateInvariantMiddleware'
+import type { ExcludeFromTuple } from './tsHelpers'
 import { MiddlewareArray } from './utils'
 
 function isBoolean(x: any): x is boolean {
@@ -33,9 +34,7 @@ export type ThunkMiddlewareFor<
   ? never
   : O extends { thunk: { extraArgument: infer E } }
   ? ThunkMiddleware<S, AnyAction, E>
-  :
-      | ThunkMiddleware<S, AnyAction, null> //The ThunkMiddleware with a `null` ExtraArgument is here to provide backwards-compatibility.
-      | ThunkMiddleware<S, AnyAction>
+  : ThunkMiddleware<S, AnyAction>
 
 export type CurriedGetDefaultMiddleware<S = any> = <
   O extends Partial<GetDefaultMiddlewareOptions> = {
@@ -45,7 +44,7 @@ export type CurriedGetDefaultMiddleware<S = any> = <
   }
 >(
   options?: O
-) => MiddlewareArray<Middleware<{}, S> | ThunkMiddlewareFor<S, O>>
+) => MiddlewareArray<ExcludeFromTuple<[ThunkMiddlewareFor<S, O>], never>>
 
 export function curryGetDefaultMiddleware<
   S = any
@@ -76,14 +75,14 @@ export function getDefaultMiddleware<
   }
 >(
   options: O = {} as O
-): MiddlewareArray<Middleware<{}, S> | ThunkMiddlewareFor<S, O>> {
+): MiddlewareArray<ExcludeFromTuple<[ThunkMiddlewareFor<S, O>], never>> {
   const {
     thunk = true,
     immutableCheck = true,
     serializableCheck = true,
   } = options
 
-  let middlewareArray: Middleware<{}, S>[] = new MiddlewareArray()
+  let middlewareArray = new MiddlewareArray<Middleware[]>()
 
   if (thunk) {
     if (isBoolean(thunk)) {

packages/toolkit/src/tests/MiddlewareArray.typetest.ts

@@ -1,6 +1,5 @@
-import { getDefaultMiddleware } from '@reduxjs/toolkit'
+import { getDefaultMiddleware, configureStore } from '@reduxjs/toolkit'
 import type { Middleware } from 'redux'
-import type { DispatchForMiddlewares } from '@internal/tsHelpers'
 
 declare const expectType: <T>(t: T) => T
 
@@ -12,103 +11,108 @@ declare const middleware2: Middleware<{
   (_: number): string
 }>
 
-declare const getDispatch: <M extends Array<Middleware>>(
-  m: M
-) => DispatchForMiddlewares<M>
-
 type ThunkReturn = Promise<'thunk'>
 declare const thunkCreator: () => () => ThunkReturn
 
 {
-  const defaultMiddleware = getDefaultMiddleware()
-
   // prepend single element
   {
-    const concatenated = defaultMiddleware.prepend(middleware1)
-    const dispatch = getDispatch(concatenated)
-    expectType<number>(dispatch('foo'))
-    expectType<ThunkReturn>(dispatch(thunkCreator()))
+    const store = configureStore({
+      reducer: () => 0,
+      middleware: (gDM) => gDM().prepend(middleware1),
+    })
+    expectType<number>(store.dispatch('foo'))
+    expectType<ThunkReturn>(store.dispatch(thunkCreator()))
 
     // @ts-expect-error
-    expectType<string>(dispatch('foo'))
+    expectType<string>(store.dispatch('foo'))
   }
 
-  // prepepend multiple (rest)
+  // prepend multiple (rest)
   {
-    const concatenated = defaultMiddleware.prepend(middleware1, middleware2)
-    const dispatch = getDispatch(concatenated)
-    expectType<number>(dispatch('foo'))
-    expectType<string>(dispatch(5))
-    expectType<ThunkReturn>(dispatch(thunkCreator()))
+    const store = configureStore({
+      reducer: () => 0,
+      middleware: (gDM) => gDM().prepend(middleware1, middleware2),
+    })
+    expectType<number>(store.dispatch('foo'))
+    expectType<string>(store.dispatch(5))
+    expectType<ThunkReturn>(store.dispatch(thunkCreator()))
 
     // @ts-expect-error
-    expectType<string>(dispatch('foo'))
+    expectType<string>(store.dispatch('foo'))
   }
 
   // prepend multiple (array notation)
   {
-    const concatenated = defaultMiddleware.prepend([
-      middleware1,
-      middleware2,
-    ] as const)
-    const dispatch = getDispatch(concatenated)
-    expectType<number>(dispatch('foo'))
-    expectType<string>(dispatch(5))
-    expectType<ThunkReturn>(dispatch(thunkCreator()))
+    const store = configureStore({
+      reducer: () => 0,
+      middleware: (gDM) => gDM().prepend([middleware1, middleware2] as const),
+    })
+
+    expectType<number>(store.dispatch('foo'))
+    expectType<string>(store.dispatch(5))
+    expectType<ThunkReturn>(store.dispatch(thunkCreator()))
 
     // @ts-expect-error
-    expectType<string>(dispatch('foo'))
+    expectType<string>(store.dispatch('foo'))
   }
 
   // concat single element
   {
-    const concatenated = defaultMiddleware.concat(middleware1)
-    const dispatch = getDispatch(concatenated)
-    expectType<number>(dispatch('foo'))
-    expectType<ThunkReturn>(dispatch(thunkCreator()))
+    const store = configureStore({
+      reducer: () => 0,
+      middleware: (gDM) => gDM().concat(middleware1),
+    })
+
+    expectType<number>(store.dispatch('foo'))
+    expectType<ThunkReturn>(store.dispatch(thunkCreator()))
 
     // @ts-expect-error
-    expectType<string>(dispatch('foo'))
+    expectType<string>(store.dispatch('foo'))
   }
 
-  // prepepend multiple (rest)
+  // prepend multiple (rest)
   {
-    const concatenated = defaultMiddleware.concat(middleware1, middleware2)
-    const dispatch = getDispatch(concatenated)
-    expectType<number>(dispatch('foo'))
-    expectType<string>(dispatch(5))
-    expectType<ThunkReturn>(dispatch(thunkCreator()))
+    const store = configureStore({
+      reducer: () => 0,
+      middleware: (gDM) => gDM().concat(middleware1, middleware2),
+    })
+
+    expectType<number>(store.dispatch('foo'))
+    expectType<string>(store.dispatch(5))
+    expectType<ThunkReturn>(store.dispatch(thunkCreator()))
 
     // @ts-expect-error
-    expectType<string>(dispatch('foo'))
+    expectType<string>(store.dispatch('foo'))
   }
 
   // concat multiple (array notation)
   {
-    const concatenated = defaultMiddleware.concat([
-      middleware1,
-      middleware2,
-    ] as const)
-    const dispatch = getDispatch(concatenated)
-    expectType<number>(dispatch('foo'))
-    expectType<string>(dispatch(5))
-    expectType<ThunkReturn>(dispatch(thunkCreator()))
+    const store = configureStore({
+      reducer: () => 0,
+      middleware: (gDM) => gDM().concat([middleware1, middleware2] as const),
+    })
+
+    expectType<number>(store.dispatch('foo'))
+    expectType<string>(store.dispatch(5))
+    expectType<ThunkReturn>(store.dispatch(thunkCreator()))
 
     // @ts-expect-error
-    expectType<string>(dispatch('foo'))
+    expectType<string>(store.dispatch('foo'))
   }
 
   // concat and prepend
   {
-    const concatenated = defaultMiddleware
-      .concat(middleware1)
-      .prepend(middleware2)
-    const dispatch = getDispatch(concatenated)
-    expectType<number>(dispatch('foo'))
-    expectType<string>(dispatch(5))
-    expectType<ThunkReturn>(dispatch(thunkCreator()))
+    const store = configureStore({
+      reducer: () => 0,
+      middleware: (gDM) => gDM().concat(middleware1).prepend(middleware2),
+    })
+
+    expectType<number>(store.dispatch('foo'))
+    expectType<string>(store.dispatch(5))
+    expectType<ThunkReturn>(store.dispatch(thunkCreator()))
 
     // @ts-expect-error
-    expectType<string>(dispatch('foo'))
+    expectType<string>(store.dispatch('foo'))
   }
 }