feat: Add the ability to type StoreEnhancers

fix #299
fix #583
fix #699
fix #2241

Author: fostyfost

packages/toolkit/src/configureStore.ts

@@ -20,7 +20,11 @@ import type {
   CurriedGetDefaultMiddleware,
 } from './getDefaultMiddleware'
 import { curryGetDefaultMiddleware } from './getDefaultMiddleware'
-import type { NoInfer, ExtractDispatchExtensions } from './tsHelpers'
+import type {
+  NoInfer,
+  ExtractDispatchExtensions,
+  ExtractStoreExtensions,
+} from './tsHelpers'
 
 const IS_PRODUCTION = process.env.NODE_ENV === 'production'
 
@@ -29,9 +33,7 @@ const IS_PRODUCTION = process.env.NODE_ENV === 'production'
  *
  * @public
  */
-export type ConfigureEnhancersCallback = (
-  defaultEnhancers: readonly StoreEnhancer[]
-) => StoreEnhancer[]
+export type ConfigureEnhancersCallback<E extends Enhancers = Enhancers> = (defaultEnhancers: E) => E
 
 /**
  * Options for `configureStore()`.
@@ -41,7 +43,8 @@ export type ConfigureEnhancersCallback = (
 export interface ConfigureStoreOptions<
   S = any,
   A extends Action = AnyAction,
-  M extends Middlewares<S> = Middlewares<S>
+  M extends Middlewares<S> = Middlewares<S>,
+  E extends Enhancers = Enhancers
 > {
   /**
    * A single reducer function that will be used as the root reducer, or an
@@ -52,7 +55,7 @@ export interface ConfigureStoreOptions<
   /**
    * An array of Redux middleware to install. If not supplied, defaults to
    * the set of middleware returned by `getDefaultMiddleware()`.
-   * 
+   *
    * @example `middleware: (gDM) => gDM().concat(logger, apiMiddleware, yourCustomMiddleware)`
    * @see https://redux-toolkit.js.org/api/getDefaultMiddleware#intended-usage
    */
@@ -92,43 +95,47 @@ export interface ConfigureStoreOptions<
    * and should return a new array (such as `[applyMiddleware, offline]`).
    * If you only need to add middleware, you can use the `middleware` parameter instead.
    */
-  enhancers?: StoreEnhancer[] | ConfigureEnhancersCallback
+  enhancers?: E | ConfigureEnhancersCallback<E>
 }
 
 type Middlewares<S> = ReadonlyArray<Middleware<{}, S>>
 
+type Enhancers = ReadonlyArray<StoreEnhancer>
+
 /**
  * A Redux store returned by `configureStore()`. Supports dispatching
  * side-effectful _thunks_ in addition to plain actions.
  *
  * @public
  */
-export interface EnhancedStore<
+export type EnhancedStore<
   S = any,
   A extends Action = AnyAction,
-  M extends Middlewares<S> = Middlewares<S>
-> extends Store<S, A> {
-  /**
-   * The `dispatch` method of your store, enhanced by all its middlewares.
-   *
-   * @inheritdoc
-   */
-  dispatch: ExtractDispatchExtensions<M> & Dispatch<A>
-}
+  M extends Middlewares<S> = Middlewares<S>,
+  E extends Enhancers = Enhancers
+> = Store<S, A> & {
+    /**
+     * The `dispatch` method of your store, enhanced by all its middlewares.
+     *
+     * @inheritdoc
+     */
+    dispatch: ExtractDispatchExtensions<M> & Dispatch<A>
+  } & ExtractStoreExtensions<E>
 
 /**
  * A friendly abstraction over the standard Redux `createStore()` function.
  *
- * @param config The store configuration.
+ * @param options The store configuration.
  * @returns A configured Redux store.
  *
  * @public
  */
 export function configureStore<
   S = any,
   A extends Action = AnyAction,
-  M extends Middlewares<S> = [ThunkMiddlewareFor<S>]
->(options: ConfigureStoreOptions<S, A, M>): EnhancedStore<S, A, M> {
+  M extends Middlewares<S> = [ThunkMiddlewareFor<S>],
+  E extends Enhancers = []
+>(options: ConfigureStoreOptions<S, A, M>): EnhancedStore<S, A, M, E> {
   const curriedGetDefaultMiddleware = curryGetDefaultMiddleware<S>()
 
   const {
@@ -182,7 +189,7 @@ export function configureStore<
     })
   }
 
-  let storeEnhancers: StoreEnhancer[] = [middlewareEnhancer]
+  let storeEnhancers: ReadonlyArray<StoreEnhancer> = [middlewareEnhancer]
 
   if (Array.isArray(enhancers)) {
     storeEnhancers = [middlewareEnhancer, ...enhancers]

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

@@ -6,9 +6,11 @@ import type {
   Reducer,
   Store,
   Action,
+  StoreEnhancer
 } from 'redux'
 import { applyMiddleware } from 'redux'
-import type { PayloadAction, MiddlewareArray } from '@reduxjs/toolkit'
+import type { PayloadAction } from '@reduxjs/toolkit'
+import type { ThunkMiddlewareFor } from '@reduxjs/toolkit'
 import {
   configureStore,
   getDefaultMiddleware,
@@ -150,6 +152,24 @@ const _anyMiddleware: any = () => () => () => {}
     // @ts-expect-error
     enhancers: ['not a store enhancer'],
   })
+
+  type SomePropertyStoreEnhancer = StoreEnhancer<{ someProperty: string }>
+
+  const somePropertyStoreEnhancer: SomePropertyStoreEnhancer = next => {
+    return (reducer, preloadedState) => {
+      return {
+        ...next(reducer, preloadedState),
+        someProperty: 'some value',
+      }
+    }
+  }
+
+  const store = configureStore<any, AnyAction, [ThunkMiddlewareFor<any>], [SomePropertyStoreEnhancer]>({
+    reducer: () => 0,
+    enhancers: [somePropertyStoreEnhancer],
+  })
+
+  const someProperty: string = store.someProperty
 }
 
 /**

packages/toolkit/src/tsHelpers.ts

@@ -1,4 +1,4 @@
-import type { Middleware } from 'redux'
+import type { Middleware, StoreEnhancer } from 'redux'
 import type { MiddlewareArray } from './utils'
 
 /**
@@ -66,6 +66,15 @@ export type IsUnknownOrNonInferrable<T, True, False> = AtLeastTS35<
   IsEmptyObj<T, True, IsUnknown<T, True, False>>
 >
 
+/**
+ * Convert a Union type `(A|B)` to an intersection type `(A&B)`
+ */
+export type UnionToIntersection<U> = (
+  U extends any ? (k: U) => void : never
+) extends (k: infer I) => void
+  ? I
+  : never
+
 // Appears to have a convenient side effect of ignoring `never` even if that's not what you specified
 export type ExcludeFromTuple<T, E, Acc extends unknown[] = []> = T extends [
   infer Head,
@@ -80,7 +89,7 @@ type ExtractDispatchFromMiddlewareTuple<
 > = MiddlewareTuple extends [infer Head, ...infer Tail]
   ? ExtractDispatchFromMiddlewareTuple<
       Tail,
-      Acc & (Head extends Middleware<infer D, any> ? IsAny<D, {}, D> : {})
+      Acc & (Head extends Middleware<infer D> ? IsAny<D, {}, D> : {})
     >
   : Acc
 
@@ -92,14 +101,9 @@ export type ExtractDispatchExtensions<M> = M extends MiddlewareArray<
   ? ExtractDispatchFromMiddlewareTuple<[...M], {}>
   : never
 
-/**
- * Convert a Union type `(A|B)` to an intersection type `(A&B)`
- */
-export type UnionToIntersection<U> = (
-  U extends any ? (k: U) => void : never
-) extends (k: infer I) => void
-  ? I
-  : never
+export type ExtractStoreExtensions<
+  E extends ReadonlyArray<StoreEnhancer>
+> = UnionToIntersection<E[number] extends StoreEnhancer<infer Ext> ? Ext : {}>
 
 /**
  * Helper type. Passes T out again, but boxes it in a way that it cannot