Remove middleware array option

Author: EskiMojo14

packages/toolkit/src/configureStore.ts

@@ -53,7 +53,7 @@ export interface ConfigureStoreOptions<
    * @example `middleware: (gDM) => gDM().concat(logger, apiMiddleware, yourCustomMiddleware)`
    * @see https://redux-toolkit.js.org/api/getDefaultMiddleware#intended-usage
    */
-  middleware?: ((getDefaultMiddleware: GetDefaultMiddleware<S>) => M) | M
+  middleware?: (getDefaultMiddleware: GetDefaultMiddleware<S>) => M
 
   /**
    * Whether to enable Redux DevTools integration. Defaults to `true`.
@@ -121,7 +121,7 @@ export function configureStore<
 
   const {
     reducer = undefined,
-    middleware = getDefaultMiddleware(),
+    middleware,
     devTools = true,
     preloadedState = undefined,
     enhancers = undefined,
@@ -139,15 +139,21 @@ export function configureStore<
     )
   }
 
-  let finalMiddleware = middleware
-  if (typeof finalMiddleware === 'function') {
-    finalMiddleware = finalMiddleware(getDefaultMiddleware)
+  if (!IS_PRODUCTION && middleware && typeof middleware !== 'function') {
+    throw new Error('"middleware" field must be a callback')
+  }
+
+  let finalMiddleware: Tuple<Middlewares<S>>
+  if (typeof middleware === 'function') {
+    finalMiddleware = middleware(getDefaultMiddleware)
 
     if (!IS_PRODUCTION && !Array.isArray(finalMiddleware)) {
       throw new Error(
         'when using a middleware builder function, an array of middleware must be returned'
       )
     }
+  } else {
+    finalMiddleware = getDefaultMiddleware()
   }
   if (
     !IS_PRODUCTION &&

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

@@ -110,7 +110,7 @@ describe('configureStore', async () => {
   describe('given no middleware', () => {
     it('calls createStore without any middleware', () => {
       expect(
-        configureStore({ middleware: new Tuple(), reducer })
+        configureStore({ middleware: () => new Tuple(), reducer })
       ).toBeInstanceOf(Object)
       expect(redux.applyMiddleware).toHaveBeenCalledWith()
       expect(mockDevtoolsCompose).toHaveBeenCalled() // @remap-prod-remove-line-line
@@ -122,6 +122,15 @@ describe('configureStore', async () => {
     })
   })
 
+  describe('given an array of middleware', () => {
+    it('throws an error requiring a callback', () => {
+      // @ts-expect-error
+      expect(() => configureStore({ middleware: [], reducer })).toThrow(
+        '"middleware" field must be a callback'
+      )
+    })
+  })
+
   describe('given undefined middleware', () => {
     it('calls createStore with default middleware', () => {
       expect(configureStore({ middleware: undefined, reducer })).toBeInstanceOf(
@@ -162,20 +171,12 @@ describe('configureStore', async () => {
     })
   })
 
-  describe('given custom middleware that contains non-functions', () => {
-    it('throws an error', () => {
-      expect(() =>
-        configureStore({ middleware: [true] as any, reducer })
-      ).toThrow('each middleware provided to configureStore must be a function')
-    })
-  })
-
   describe('given custom middleware', () => {
     it('calls createStore with custom middleware and without default middleware', () => {
       const thank: Redux.Middleware = (_store) => (next) => (action) =>
         next(action)
       expect(
-        configureStore({ middleware: new Tuple(thank), reducer })
+        configureStore({ middleware: () => new Tuple(thank), reducer })
       ).toBeInstanceOf(Object)
       expect(redux.applyMiddleware).toHaveBeenCalledWith(thank)
       expect(mockDevtoolsCompose).toHaveBeenCalled() // @remap-prod-remove-line-line
@@ -330,7 +331,7 @@ describe('configureStore', async () => {
     it("doesn't warn when middleware enhancer is excluded if no middlewares provided", () => {
       const store = configureStore({
         reducer,
-        middleware: new Tuple(),
+        middleware: () => new Tuple(),
         enhancers: () => new Tuple(dummyEnhancer),
       })
 

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

@@ -74,19 +74,19 @@ const _anyMiddleware: any = () => () => () => {}
 
   configureStore({
     reducer: () => 0,
-    middleware: new Tuple(middleware),
+    middleware: () => new Tuple(middleware),
   })
 
   configureStore({
     reducer: () => 0,
     // @ts-expect-error
-    middleware: [middleware],
+    middleware: () => [middleware],
   })
 
   configureStore({
     reducer: () => 0,
     // @ts-expect-error
-    middleware: new Tuple('not middleware'),
+    middleware: () => new Tuple('not middleware'),
   })
 }
 
@@ -520,7 +520,7 @@ const _anyMiddleware: any = () => () => () => {}
   {
     const store = configureStore({
       reducer: reducerA,
-      middleware: new Tuple(),
+      middleware: () => new Tuple(),
     })
     // @ts-expect-error
     store.dispatch(thunkA())
@@ -533,7 +533,7 @@ const _anyMiddleware: any = () => () => () => {}
   {
     const store = configureStore({
       reducer: reducerA,
-      middleware: new Tuple(thunk as ThunkMiddleware<StateA>),
+      middleware: () => new Tuple(thunk as ThunkMiddleware<StateA>),
     })
     store.dispatch(thunkA())
     // @ts-expect-error
@@ -545,9 +545,8 @@ const _anyMiddleware: any = () => () => () => {}
   {
     const store = configureStore({
       reducer: reducerA,
-      middleware: new Tuple(
-        0 as unknown as Middleware<(a: StateA) => boolean, StateA>
-      ),
+      middleware: () =>
+        new Tuple(0 as unknown as Middleware<(a: StateA) => boolean, StateA>),
     })
     const result: boolean = store.dispatch(5)
     // @ts-expect-error
@@ -566,7 +565,7 @@ const _anyMiddleware: any = () => () => () => {}
     >
     const store = configureStore({
       reducer: reducerA,
-      middleware,
+      middleware: () => middleware,
     })
 
     const result: 'A' = store.dispatch('a')

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

@@ -147,17 +147,18 @@ describe('getDefaultMiddleware', () => {
   it('allows passing options to immutableCheck', () => {
     let immutableCheckWasCalled = false
 
-    const middleware = getDefaultMiddleware({
-      thunk: false,
-      immutableCheck: {
-        isImmutable: () => {
-          immutableCheckWasCalled = true
-          return true
+    const middleware = () =>
+      getDefaultMiddleware({
+        thunk: false,
+        immutableCheck: {
+          isImmutable: () => {
+            immutableCheckWasCalled = true
+            return true
+          },
         },
-      },
-      serializableCheck: false,
-      actionCreatorCheck: false,
-    })
+        serializableCheck: false,
+        actionCreatorCheck: false,
+      })
 
     const reducer = () => ({})
 
@@ -172,17 +173,18 @@ describe('getDefaultMiddleware', () => {
   it('allows passing options to serializableCheck', () => {
     let serializableCheckWasCalled = false
 
-    const middleware = getDefaultMiddleware({
-      thunk: false,
-      immutableCheck: false,
-      serializableCheck: {
-        isSerializable: () => {
-          serializableCheckWasCalled = true
-          return true
+    const middleware = () =>
+      getDefaultMiddleware({
+        thunk: false,
+        immutableCheck: false,
+        serializableCheck: {
+          isSerializable: () => {
+            serializableCheckWasCalled = true
+            return true
+          },
         },
-      },
-      actionCreatorCheck: false,
-    })
+        actionCreatorCheck: false,
+      })
 
     const reducer = () => ({})
 
@@ -200,17 +202,18 @@ describe('getDefaultMiddleware', () => {
 it('allows passing options to actionCreatorCheck', () => {
   let actionCreatorCheckWasCalled = false
 
-  const middleware = getDefaultMiddleware({
-    thunk: false,
-    immutableCheck: false,
-    serializableCheck: false,
-    actionCreatorCheck: {
-      isActionCreator: (action: unknown): action is Function => {
-        actionCreatorCheckWasCalled = true
-        return false
+  const middleware = () =>
+    getDefaultMiddleware({
+      thunk: false,
+      immutableCheck: false,
+      serializableCheck: false,
+      actionCreatorCheck: {
+        isActionCreator: (action: unknown): action is Function => {
+          actionCreatorCheckWasCalled = true
+          return false
+        },
       },
-    },
-  })
+    })
 
   const reducer = () => ({})