Update enhancer docs

Author: ben.durrant

docs/api/autoBatchEnhancer.mdx

@@ -48,14 +48,9 @@ const counterSlice = createSlice({
 })
 const { incrementBatched, decrementUnbatched } = counterSlice.actions
 
+// includes batch enhancer by default, as of RTK 2.0
 const store = configureStore({
   reducer: counterSlice.reducer,
-  // highlight-start
-  enhancers: (getDefaultEnhancers) => {
-    // Add the autobatch enhancer to the store setup
-    return getDefaultEnhancers().concat(autoBatchEnhancer())
-  },
-  // highlight-end
 })
 ```
 
@@ -74,6 +69,25 @@ type AutoBatchOptions =
 export type autoBatchEnhancer = (options?: AutoBatchOptions) => StoreEnhancer
 ```
 
+:::tip
+As of RTK 2.0, the `autoBatchEnhancer` is included by default when calling `configureStore`.
+
+This means to configure it, you should instead pass an callback that receives `getDefaultEnhancers` and calls it with your desired settings.
+
+```ts title="Configuring autoBatchEnhancer with getDefaultEnhancers"
+import { configureStore } from '@reduxjs/toolkit'
+
+const store = configureStore({
+  reducer: () => 0,
+  enhancers: (getDefaultEnhancers) =>
+    getDefaultEnhancers({
+      autoBatch: { type: 'tick' },
+    }),
+})
+```
+
+:::
+
 Creates a new instance of the autobatch store enhancer.
 
 Any action that is tagged with `action.meta[SHOULD_AUTOBATCH] = true` will be treated as "low-priority", and a notification callback will be queued. The enhancer will delay notifying subscribers until either:
@@ -140,4 +154,4 @@ This allows Redux users to selectively tag certain actions for effective batchin
 
 ### RTK Query and Batching
 
-RTK Query already marks several of its key internal action types as batchable. If you add the `autoBatchEnhancer` to the store setup, it will improve the overall UI performance, especially when rendering large lists of components that use the RTKQ query hooks.
+RTK Query already marks several of its key internal action types as batchable. By adding the `autoBatchEnhancer` to the store setup, it improves the overall UI performance, especially when rendering large lists of components that use the RTKQ query hooks.

docs/api/configureStore.mdx

@@ -77,7 +77,7 @@ If it is an object of slice reducers, like `{users : usersReducer, posts : posts
 
 ### `middleware`
 
-An optional array of Redux middleware functions
+An optional array of Redux middleware functions, or a callback to customise the array of middleware.
 
 If this option is provided, it should contain all the middleware functions you
 want added to the store. `configureStore` will automatically pass those to `applyMiddleware`.
@@ -118,17 +118,58 @@ An optional array of Redux store enhancers, or a callback function to customize
 
 If defined as an array, these will be passed to [the Redux `compose` function](https://redux.js.org/api/compose), and the combined enhancer will be passed to `createStore`.
 
-This should _not_ include `applyMiddleware()` or the Redux DevTools Extension `composeWithDevTools`, as those are already handled by `configureStore`.
+:::tip Dev Tools
+This should _not_ include the Redux DevTools Extension `composeWithDevTools`, as this is already handled by `configureStore`.
 
-Example: `enhancers: [offline]` will result in a final setup of `[applyMiddleware, offline, devToolsExtension]`.
+Example: `enhancers: [offline]` will result in a final setup of `[offline, devToolsExtension]`.
+:::
 
-If defined as a callback function, it will be called with the existing array of enhancers _without_ the DevTools Extension (currently `[applyMiddleware]`),
-and should return a new array of enhancers. This is primarily useful for cases where a store enhancer needs to be added
-in front of `applyMiddleware`, such as `redux-first-router` or `redux-offline`.
+If not provided, `configureStore` will call `getDefaultEnhancers` and use the array of enhancers it returns (including `applyMiddleware` with specified middleware).
+
+Where you wish to add onto or customize the default enhancers, you may pass a callback function that will receive `getDefaultEnhancers` as its argument, and should return an enhancer array.
 
 Example: `enhancers: (defaultEnhancers) => defaultEnhancers.prepend(offline)` will result in a final setup
 of `[offline, applyMiddleware, devToolsExtension]`.
 
+For more details on how the `enhancer` parameter works and the list of enhancers that are added by default, see the [`getDefaultEnhancers` docs page](./getDefaultEnhancers).
+
+:::caution Middleware
+
+In order to use any [middleware](#middleware) specified, you _need_ to use the `getDefaultEnhancers` callback, which will include the built `applyMiddleware` enhancer.
+
+If you provide an array, this `applyMiddleware` enhancer will _not_ be used.
+
+`configureStore` will warn in console if any middleware are provided (or left as default) but not included in the final list of enhancers.
+
+```ts no-transpile
+// warns - middleware left as default but not included in final enhancers
+configureStore({
+  reducer,
+  enhancers: [offline],
+})
+// warns - middleware customised but not included in final enhancers
+configureStore({
+  reducer,
+  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger)
+  enhancers: [offline],
+})
+
+// fine - default enhancers included
+configureStore({
+  reducer,
+  enhancers: (getDefaultEnhancers) => getDefaultEnhancers().concat(offline),
+})
+
+// also allowed
+configureStore({
+  reducer,
+  middleware: [],
+  enhancers: [offline],
+})
+```
+
+:::
+
 ## Usage
 
 ### Basic Example

docs/api/getDefaultEnhancers.mdx

@@ -0,0 +1,6 @@
+---
+id: getDefaultEnhancers
+title: getDefaultEnhancers
+sidebar_label: getDefaultEnhancers
+hide_title: true
+---

website/sidebars.json

@@ -44,6 +44,7 @@
             "api/actionCreatorMiddleware",
             "api/createListenerMiddleware",
             "api/createDynamicMiddleware",
+            "api/getDefaultEnhancers",
             "api/autoBatchEnhancer"
           ]
         },