Merge pull request #3461 from reduxjs/enhancer-callback-2

Author: markerikson

packages/toolkit/src/configureStore.ts

@@ -82,7 +82,7 @@ export interface ConfigureStoreOptions<
    * and should return a Tuple of enhancers (such as `getDefaultEnhancers().concat(offline)`).
    * If you only need to add middleware, you can use the `middleware` parameter instead.
    */
-  enhancers?: ((getDefaultEnhancers: GetDefaultEnhancers<M>) => E) | E
+  enhancers?: (getDefaultEnhancers: GetDefaultEnhancers<M>) => E
 }
 
 export type Middlewares<S> = ReadonlyArray<Middleware<{}, S>>
@@ -172,13 +172,18 @@ export function configureStore<
   const middlewareEnhancer = applyMiddleware(...finalMiddleware)
 
   const getDefaultEnhancers = buildGetDefaultEnhancers<M>(middlewareEnhancer)
+
+  if (!IS_PRODUCTION && enhancers && typeof enhancers !== 'function') {
+    throw new Error('"enhancers" field must be a callback')
+  }
+
   let storeEnhancers =
-    (typeof enhancers === 'function'
+    typeof enhancers === 'function'
       ? enhancers(getDefaultEnhancers)
-      : enhancers) ?? getDefaultEnhancers()
+      : getDefaultEnhancers()
 
   if (!IS_PRODUCTION && !Array.isArray(storeEnhancers)) {
-    throw new Error('enhancers must be an array')
+    throw new Error('"enhancers" callback must return an array')
   }
   if (
     !IS_PRODUCTION &&
@@ -194,7 +199,7 @@ export function configureStore<
     !storeEnhancers.includes(middlewareEnhancer)
   ) {
     console.error(
-      'middlewares were provided, but middleware enhancer was not included in final enhancers'
+      'middlewares were provided, but middleware enhancer was not included in final enhancers - make sure to call `getDefaultEnhancers`'
     )
   }
 

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

@@ -283,16 +283,28 @@ describe('configureStore', async () => {
         undefined,
         expect.any(Function)
       )
+
+      expect(dummyEnhancerCalled).toBe(true)
     })
 
-    it('accepts a callback for customizing enhancers', () => {
-      const store = configureStore({
-        reducer,
-        enhancers: (getDefaultEnhancers) =>
-          getDefaultEnhancers().concat(dummyEnhancer),
+    describe('invalid arguments', () => {
+      test('enhancers is not a callback', () => {
+        expect(() => configureStore({ reducer, enhancers: [] as any })).toThrow(
+          '"enhancers" field must be a callback'
+        )
       })
 
-      expect(dummyEnhancerCalled).toBe(true)
+      test('callback fails to return array', () => {
+        expect(() =>
+          configureStore({ reducer, enhancers: (() => {}) as any })
+        ).toThrow('"enhancers" callback must return an array')
+      })
+
+      test('array contains non-function', () => {
+        expect(() =>
+          configureStore({ reducer, enhancers: (() => ['']) as any })
+        ).toThrow('each enhancer provided to configureStore must be a function')
+      })
     })
 
     const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
@@ -306,20 +318,20 @@ describe('configureStore', async () => {
     it('warns if middleware enhancer is excluded from final array when middlewares are provided', () => {
       const store = configureStore({
         reducer,
-        enhancers: new Tuple(dummyEnhancer),
+        enhancers: () => new Tuple(dummyEnhancer),
       })
 
       expect(dummyEnhancerCalled).toBe(true)
 
       expect(consoleSpy).toHaveBeenCalledWith(
-        'middlewares were provided, but middleware enhancer was not included in final enhancers'
+        'middlewares were provided, but middleware enhancer was not included in final enhancers - make sure to call `getDefaultEnhancers`'
       )
     })
     it("doesn't warn when middleware enhancer is excluded if no middlewares provided", () => {
       const store = configureStore({
         reducer,
         middleware: new Tuple(),
-        enhancers: new Tuple(dummyEnhancer),
+        enhancers: () => new Tuple(dummyEnhancer),
       })
 
       expect(dummyEnhancerCalled).toBe(true)

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

@@ -147,13 +147,13 @@ const _anyMiddleware: any = () => () => () => {}
 
     const store = configureStore({
       reducer: () => 0,
-      enhancers: new Tuple(enhancer),
+      enhancers: () => new Tuple(enhancer),
     })
 
     const store2 = configureStore({
       reducer: () => 0,
       // @ts-expect-error
-      enhancers: [enhancer],
+      enhancers: () => [enhancer],
     })
 
     expectType<Dispatch & ThunkDispatch<number, undefined, AnyAction>>(
@@ -164,7 +164,7 @@ const _anyMiddleware: any = () => () => () => {}
   configureStore({
     reducer: () => 0,
     // @ts-expect-error
-    enhancers: new Tuple('not a store enhancer'),
+    enhancers: () => new Tuple('not a store enhancer'),
   })
 
   {
@@ -192,10 +192,8 @@ const _anyMiddleware: any = () => () => () => {}
 
     const store = configureStore({
       reducer: () => 0,
-      enhancers: new Tuple(
-        somePropertyStoreEnhancer,
-        anotherPropertyStoreEnhancer
-      ),
+      enhancers: () =>
+        new Tuple(somePropertyStoreEnhancer, anotherPropertyStoreEnhancer),
     })
 
     expectType<Dispatch>(store.dispatch)
@@ -254,14 +252,11 @@ const _anyMiddleware: any = () => () => () => {}
 
     const store = configureStore({
       reducer: () => ({ aProperty: 0 }),
-      enhancers: new Tuple(
-        someStateExtendingEnhancer,
-        anotherStateExtendingEnhancer
-      ),
+      enhancers: () =>
+        new Tuple(someStateExtendingEnhancer, anotherStateExtendingEnhancer),
     })
 
     const state = store.getState()
-
     expectType<number>(state.aProperty)
     expectType<string>(state.someProperty)
     expectType<number>(state.anotherProperty)