update docs

Author: EskiMojo14

docs/api/actionCreatorMiddleware.mdx

@@ -47,6 +47,7 @@ export default function (state = {}, action: any) {
 import {
   configureStore,
   createActionCreatorInvariantMiddleware,
+  MiddlewareArray,
 } from '@reduxjs/toolkit'
 import reducer from './reducer'
 
@@ -62,6 +63,6 @@ const actionCreatorMiddleware = createActionCreatorInvariantMiddleware({
 
 const store = configureStore({
   reducer,
-  middleware: [actionCreatorMiddleware],
+  middleware: new MiddlewareArray(actionCreatorMiddleware),
 })
 ```

docs/api/configureStore.mdx

@@ -94,6 +94,22 @@ and should return a middleware array.
 For more details on how the `middleware` parameter works and the list of middleware that are added by default, see the
 [`getDefaultMiddleware` docs page](./getDefaultMiddleware.mdx).
 
+:::note MiddlewareArray
+Typescript users are required to use a `MiddlewareArray` instance (if not using a `getDefaultMiddleware` result, which is already a `MiddlewareArray`), for better inference.
+
+```ts no-transpile
+import { configureStore, MiddlewareArray } from '@reduxjs/toolkit'
+
+configureStore({
+  reducer: rootReducer,
+  middleware: new MiddlewareArray(additionalMiddleware, logger),
+})
+```
+
+Javascript-only users are free to use a plain array if preferred.
+
+:::
+
 ### `devTools`
 
 If this is a boolean, it will be used to indicate whether `configureStore` should automatically enable support for [the Redux DevTools browser extension](https://github.com/reduxjs/redux-devtools).
@@ -122,7 +138,7 @@ If defined as an array, these will be passed to [the Redux `compose` function](h
 
 This should _not_ include `applyMiddleware()` or the Redux DevTools Extension `composeWithDevTools`, as those are already handled by `configureStore`.
 
-Example: `enhancers: [offline]` will result in a final setup of `[applyMiddleware, offline, devToolsExtension]`.
+Example: `enhancers: new EnhancerArray(offline)` will result in a final setup of `[applyMiddleware, 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
@@ -131,6 +147,22 @@ in front of `applyMiddleware`, such as `redux-first-router` or `redux-offline`.
 Example: `enhancers: (defaultEnhancers) => defaultEnhancers.prepend(offline)` will result in a final setup
 of `[offline, applyMiddleware, devToolsExtension]`.
 
+:::note EnhancerArray
+Typescript users are required to use a `EnhancerArray` instance (if not using a `getDefaultEnhancer` result, which is already a `EnhancerArray`), for better inference.
+
+```ts no-transpile
+import { configureStore, EnhancerArray } from '@reduxjs/toolkit'
+
+configureStore({
+  reducer: rootReducer,
+  enhancers: new EnhancerArray(offline),
+})
+```
+
+Javascript-only users are free to use a plain array if preferred.
+
+:::
+
 ## Usage
 
 ### Basic Example

docs/api/getDefaultMiddleware.mdx

@@ -28,7 +28,7 @@ If you want to customize the list of middleware, you can supply an array of midd
 ```js
 const store = configureStore({
   reducer: rootReducer,
-  middleware: [thunk, logger],
+  middleware: new MiddlewareArray(thunk, logger),
 })
 
 // Store specifically has the thunk and logger middleware applied

docs/api/immutabilityMiddleware.mdx

@@ -74,6 +74,7 @@ export default exampleSlice.reducer
 import {
   configureStore,
   createImmutableStateInvariantMiddleware,
+  MiddlewareArray,
 } from '@reduxjs/toolkit'
 
 import exampleSliceReducer from './exampleSlice'
@@ -85,7 +86,7 @@ const immutableInvariantMiddleware = createImmutableStateInvariantMiddleware({
 const store = configureStore({
   reducer: exampleSliceReducer,
   // Note that this will replace all default middleware
-  middleware: [immutableInvariantMiddleware],
+  middleware: new MiddlewareArray(immutableInvariantMiddleware),
 })
 ```
 

docs/api/serializabilityMiddleware.mdx

@@ -93,6 +93,7 @@ import {
   configureStore,
   createSerializableStateInvariantMiddleware,
   isPlain,
+  MiddlewareArray,
 } from '@reduxjs/toolkit'
 import reducer from './reducer'
 
@@ -110,7 +111,7 @@ const serializableMiddleware = createSerializableStateInvariantMiddleware({
 
 const store = configureStore({
   reducer,
-  middleware: [serializableMiddleware],
+  middleware: new MiddlewareArray(serializableMiddleware),
 })
 ```
 

docs/usage/usage-with-typescript.md

@@ -136,23 +136,16 @@ export default store
 
 #### Using `MiddlewareArray` without `getDefaultMiddleware`
 
-If you want to skip the usage of `getDefaultMiddleware` altogether, you can still use `MiddlewareArray` for type-safe concatenation of your `middleware` array. This class extends the default JavaScript `Array` type, only with modified typings for `.concat(...)` and the additional `.prepend(...)` method.
+If you want to skip the usage of `getDefaultMiddleware` altogether, you are requred to use `MiddlewareArray` for type-safe creation of your `middleware` array. This class extends the default JavaScript `Array` type, only with modified typings for `.concat(...)` and the additional `.prepend(...)` method.
 
-This is generally not required though, as you will probably not run into any array-type-widening issues as long as you are using `as const` and do not use the spread operator.
-
-So the following two calls would be equivalent:
+For example:
 
 ```ts
 import { configureStore, MiddlewareArray } from '@reduxjs/toolkit'
 
 configureStore({
   reducer: rootReducer,
-  middleware: new MiddlewareArray().concat(additionalMiddleware, logger),
-})
-
-configureStore({
-  reducer: rootReducer,
-  middleware: [additionalMiddleware, logger] as const,
+  middleware: new MiddlewareArray(additionalMiddleware, logger),
 })
 ```