Merge branch 'v2.0-integration' into v2.0-docs

Author: EskiMojo14

docs/api/actionCreatorMiddleware.mdx

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

docs/api/configureStore.mdx

@@ -92,6 +92,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 Tuple
+Typescript users are required to use a `Tuple` instance (if not using a `getDefaultMiddleware` result, which is already a `Tuple`), for better inference.
+
+```ts no-transpile
+import { configureStore, Tuple } from '@reduxjs/toolkit'
+
+configureStore({
+  reducer: rootReducer,
+  middleware: new Tuple(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).
@@ -121,8 +137,7 @@ If defined as an array, these will be passed to [the Redux `compose` function](h
 :::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 `[offline, devToolsExtension]`.
-:::
+Example: `enhancers: new Tuple(offline)` will result in a final setup of `[offline, devToolsExtension]`.
 
 If not provided, `configureStore` will call `getDefaultEnhancers` and use the array of enhancers it returns (including `applyMiddleware` with specified middleware).
 
@@ -135,8 +150,6 @@ For more details on how the `enhancer` parameter works and the list of enhancers
 
 :::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.
@@ -170,8 +183,23 @@ configureStore({
 
 :::
 
-## Usage
+:::note Tuple
+Typescript users are required to use a `Tuple` instance (if not using a `getDefaultEnhancer` result, which is already a `Tuple`), for better inference.
+
+import { configureStore, Tuple } from '@reduxjs/toolkit'
+
+configureStore({
+reducer: rootReducer,
+enhancers: new Tuple(offline),
+})
+
+````
 
+Javascript-only users are free to use a plain array if preferred.
+
+:::
+
+## Usage
 ### Basic Example
 
 ```ts
@@ -187,7 +215,7 @@ import rootReducer from './reducers'
 
 const store = configureStore({ reducer: rootReducer })
 // The store now has redux-thunk added and the Redux DevTools Extension is turned on
-```
+````
 
 ### Full 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 Tuple(thunk, logger),
 })
 
 // Store specifically has the thunk and logger middleware applied
@@ -55,7 +55,7 @@ const store = configureStore({
 // Store has all of the default middleware added, _plus_ the logger middleware
 ```
 
-It is preferable to use the chainable `.concat(...)` and `.prepend(...)` methods of the returned `MiddlewareArray` instead of the array spread operator, as the latter can lose valuable type information under some circumstances.
+It is preferable to use the chainable `.concat(...)` and `.prepend(...)` methods of the returned `Tuple` instead of the array spread operator, as the latter can lose valuable type information under some circumstances.
 
 ## Included Default Middleware
 

docs/api/immutabilityMiddleware.mdx

@@ -74,6 +74,7 @@ export default exampleSlice.reducer
 import {
   configureStore,
   createImmutableStateInvariantMiddleware,
+  Tuple,
 } 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 Tuple(immutableInvariantMiddleware),
 })
 ```
 

docs/api/serializabilityMiddleware.mdx

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

docs/usage/usage-with-typescript.md

@@ -99,7 +99,7 @@ export default store
 
 The type of the `dispatch` function type will be directly inferred from the `middleware` option. So if you add _correctly typed_ middlewares, `dispatch` should already be correctly typed.
 
-As TypeScript often widens array types when combining arrays using the spread operator, we suggest using the `.concat(...)` and `.prepend(...)` methods of the `MiddlewareArray` returned by `getDefaultMiddleware()`.
+As TypeScript often widens array types when combining arrays using the spread operator, we suggest using the `.concat(...)` and `.prepend(...)` methods of the `Tuple` returned by `getDefaultMiddleware()`.
 
 ```ts
 import { configureStore } from '@reduxjs/toolkit'
@@ -134,25 +134,18 @@ export type AppDispatch = typeof store.dispatch
 export default store
 ```
 
-#### Using `MiddlewareArray` without `getDefaultMiddleware`
+#### Using `Tuple` 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 required to use `Tuple` 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),
-})
+import { configureStore, Tuple } from '@reduxjs/toolkit'
 
 configureStore({
   reducer: rootReducer,
-  middleware: [additionalMiddleware, logger] as const,
+  middleware: new Tuple(additionalMiddleware, logger),
 })
 ```
 

examples/publish-ci/cra4/src/mocks/handlers.ts

@@ -34,7 +34,8 @@ export const handlers = [
   }),
 
   rest.get('/posts/:id', (req, res, ctx) => {
-    const { id } = req.params as { id: string }
+    const { id: idParam } = req.params as { id: string }
+    const id = parseInt(idParam, 10)
     state = adapter.updateOne(state, {
       id,
       changes: { fetched_at: new Date().toUTCString() },

examples/publish-ci/cra5/src/mocks/handlers.ts

@@ -34,7 +34,8 @@ export const handlers = [
   }),
 
   rest.get('/posts/:id', (req, res, ctx) => {
-    const { id } = req.params as { id: string }
+    const { id: idParam } = req.params as { id: string }
+    const id = parseInt(idParam, 10)
     state = adapter.updateOne(state, {
       id,
       changes: { fetched_at: new Date().toUTCString() },

examples/publish-ci/next/src/mocks/handlers.ts

@@ -34,7 +34,8 @@ export const handlers = [
   }),
 
   rest.get('/posts/:id', (req, res, ctx) => {
-    const { id } = req.params as { id: string }
+    const { id: idParam } = req.params as { id: string }
+    const id = parseInt(idParam, 10)
     state = adapter.updateOne(state, {
       id,
       changes: { fetched_at: new Date().toUTCString() },

examples/publish-ci/vite/src/mocks/handlers.ts

@@ -34,7 +34,8 @@ export const handlers = [
   }),
 
   rest.get('/posts/:id', (req, res, ctx) => {
-    const { id } = req.params as { id: string }
+    const { id: idParam } = req.params as { id: string }
+    const id = parseInt(idParam, 10)
     state = adapter.updateOne(state, {
       id,
       changes: { fetched_at: new Date().toUTCString() },