From f03bfbffed8a6490b4bc6b81c5ada271dd0e0943 Mon Sep 17 00:00:00 2001
From: Mark Erikson <mark@isquaredsoftware.com>
Date: Sat, 29 May 2021 22:32:16 -0400
Subject: [PATCH 1/3] Remove dead prepare script

---
 package.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 14c78b26a8..6fb3d90ad6 100644
--- a/package.json
+++ b/package.json
@@ -86,7 +86,6 @@
     "format": "prettier --write \"(src|examples)/**/*.{ts,tsx}\" \"**/*.md\"",
     "format:check": "prettier --list-different \"(src|examples)/**/*.{ts,tsx}\" \"docs/*/**.md\"",
     "lint": "eslint src examples",
-    "prepare": "true",
     "test": "jest --runInBand",
     "type-tests": "yarn tsc -p src/tests && yarn tsc -p src/query/tests"
   },
@@ -125,4 +124,4 @@
     "doc": "docs",
     "example": "example"
   }
-}
\ No newline at end of file
+}

From 0620d7899f9b3685bf0d8ce3d02276cd9011656e Mon Sep 17 00:00:00 2001
From: Mark Erikson <mark@isquaredsoftware.com>
Date: Sat, 29 May 2021 22:32:46 -0400
Subject: [PATCH 2/3] Work around Docusaurus bug to show headers again

---
 docs/api/configureStore.mdx                   |  2 +
 docs/api/createAction.mdx                     | 14 +++---
 docs/api/createAsyncThunk.mdx                 | 44 ++++++++--------
 docs/api/createEntityAdapter.mdx              | 50 ++++++++++---------
 docs/api/createReducer.mdx                    | 36 ++++++-------
 docs/api/createSelector.mdx                   |  6 ++-
 docs/api/createSlice.mdx                      | 40 ++++++++-------
 docs/api/getDefaultMiddleware.mdx             | 16 +++---
 docs/api/immutabilityMiddleware.mdx           | 28 ++++++-----
 docs/api/matching-utilities.mdx               | 22 +++++---
 docs/api/otherExports.mdx                     |  4 +-
 docs/api/serializabilityMiddleware.mdx        | 10 ++--
 docs/introduction/getting-started.md          |  2 +
 docs/rtk-query/api/ApiProvider.mdx            |  2 +
 docs/rtk-query/api/createApi.mdx              |  2 +
 .../api/created-api/cache-management.mdx      |  2 +
 .../api/created-api/code-splitting.mdx        |  2 +
 docs/rtk-query/api/created-api/endpoints.mdx  |  2 +
 docs/rtk-query/api/created-api/hooks.mdx      |  2 +
 docs/rtk-query/api/created-api/overview.mdx   |  2 +
 .../api/created-api/redux-integration.mdx     |  6 ++-
 docs/rtk-query/api/fetchBaseQuery.mdx         |  4 +-
 docs/rtk-query/api/setupListeners.mdx         |  2 +
 docs/rtk-query/comparison.md                  |  2 +
 docs/rtk-query/overview.md                    |  2 +
 docs/rtk-query/usage-with-typescript.mdx      |  2 +
 docs/rtk-query/usage/cached-data.mdx          |  2 +
 docs/rtk-query/usage/code-generation.mdx      |  9 +++-
 docs/rtk-query/usage/code-splitting.mdx       |  6 ++-
 docs/rtk-query/usage/conditional-fetching.mdx |  2 +
 .../usage/customizing-create-api.mdx          |  2 +
 docs/rtk-query/usage/customizing-queries.mdx  |  2 +
 docs/rtk-query/usage/error-handling.mdx       | 14 ++++--
 docs/rtk-query/usage/examples.mdx             |  2 +
 .../usage/migrating-to-rtk-query.mdx          |  2 +
 docs/rtk-query/usage/mutations.mdx            |  2 +
 docs/rtk-query/usage/optimistic-updates.mdx   |  2 +
 docs/rtk-query/usage/pagination.mdx           |  2 +
 docs/rtk-query/usage/polling.mdx              |  2 +
 docs/rtk-query/usage/prefetching.mdx          |  2 +
 docs/rtk-query/usage/queries.mdx              |  2 +
 docs/rtk-query/usage/streaming-updates.mdx    |  2 +
 docs/tutorials/overview.md                    |  2 +
 docs/tutorials/quick-start.md                 |  2 +
 docs/tutorials/rtk-query.mdx                  |  2 +
 docs/tutorials/typescript.md                  |  2 +
 docs/usage/immer-reducers.md                  |  2 +
 docs/usage/usage-guide.md                     |  2 +
 docs/usage/usage-with-typescript.md           |  2 +
 49 files changed, 243 insertions(+), 132 deletions(-)

diff --git a/docs/api/configureStore.mdx b/docs/api/configureStore.mdx
index cdb3a9c556..fb0e40a70a 100644
--- a/docs/api/configureStore.mdx
+++ b/docs/api/configureStore.mdx
@@ -5,6 +5,8 @@ sidebar_label: configureStore
 hide_title: true
 ---
 
+&nbsp;
+
 # `configureStore`
 
 A friendly abstraction over the standard Redux `createStore` function that adds good defaults
diff --git a/docs/api/createAction.mdx b/docs/api/createAction.mdx
index e5de5886a9..b700e2f21b 100644
--- a/docs/api/createAction.mdx
+++ b/docs/api/createAction.mdx
@@ -5,6 +5,8 @@ sidebar_label: createAction
 hide_title: true
 ---
 
+&nbsp;
+
 # `createAction`
 
 A helper function for defining a Redux [action](https://redux.js.org/basics/actions) type and creator.
@@ -21,7 +23,7 @@ const INCREMENT = 'counter/increment'
 function increment(amount: number) {
   return {
     type: INCREMENT,
-    payload: amount
+    payload: amount,
   }
 }
 
@@ -63,8 +65,8 @@ const addTodo = createAction('todos/add', function prepare(text: string) {
     payload: {
       text,
       id: nanoid(),
-      createdAt: new Date().toISOString()
-    }
+      createdAt: new Date().toISOString(),
+    },
   }
 })
 
@@ -95,7 +97,7 @@ import { createAction, createReducer } from '@reduxjs/toolkit'
 const increment = createAction<number>('counter/increment')
 const decrement = createAction<number>('counter/decrement')
 
-const counterReducer = createReducer(0, builder => {
+const counterReducer = createReducer(0, (builder) => {
   builder.addCase(increment, (state, action) => state + action.payload)
   builder.addCase(decrement, (state, action) => state - action.payload)
 })
@@ -133,7 +135,7 @@ const counterReducer = createReducer(0, {
   [increment]: (state, action) => state + action.payload,
 
   // You would need to use the action type explicitly instead.
-  [INCREMENT]: (state, action) => state + action.payload
+  [INCREMENT]: (state, action) => state + action.payload,
 })
 ```
 
@@ -178,7 +180,7 @@ const increment = createAction<number>('INCREMENT')
 export const epic = (actions$: Observable<Action>) =>
   actions$.pipe(
     filter(increment.match),
-    map(action => {
+    map((action) => {
       // action.payload can be safely used as number here (and will also be correctly inferred by TypeScript)
       // ...
     })
diff --git a/docs/api/createAsyncThunk.mdx b/docs/api/createAsyncThunk.mdx
index e4c8a34a43..3e84c65fcb 100644
--- a/docs/api/createAsyncThunk.mdx
+++ b/docs/api/createAsyncThunk.mdx
@@ -5,6 +5,8 @@ sidebar_label: createAsyncThunk
 hide_title: true
 ---
 
+&nbsp;
+
 # `createAsyncThunk`
 
 ## Overview
@@ -42,8 +44,8 @@ const usersSlice = createSlice({
     [fetchUserById.fulfilled]: (state, action) => {
       // Add user to the state array
       state.entities.push(action.payload)
-    }
-  }
+    },
+  },
 })
 
 // Later, dispatch the thunk as needed in the app
@@ -193,10 +195,10 @@ To handle these actions in your reducers, reference the action creators in `crea
 
 ```js {2,6,14,23}
 const reducer1 = createReducer(initialState, {
-  [fetchUserById.fulfilled]: (state, action) => {}
+  [fetchUserById.fulfilled]: (state, action) => {},
 })
 
-const reducer2 = createReducer(initialState, builder => {
+const reducer2 = createReducer(initialState, (builder) => {
   builder.addCase(fetchUserById.fulfilled, (state, action) => {})
 })
 
@@ -205,17 +207,17 @@ const reducer3 = createSlice({
   initialState,
   reducers: {},
   extraReducers: {
-    [fetchUserById.fulfilled]: (state, action) => {}
-  }
+    [fetchUserById.fulfilled]: (state, action) => {},
+  },
 })
 
 const reducer4 = createSlice({
   name: 'users',
   initialState,
   reducers: {},
-  extraReducers: builder => {
+  extraReducers: (builder) => {
     builder.addCase(fetchUserById.fulfilled, (state, action) => {})
-  }
+  },
 })
 ```
 
@@ -244,8 +246,8 @@ import { unwrapResult } from '@reduxjs/toolkit'
 const onClick = () => {
   dispatch(fetchUserById(userId))
     .then(unwrapResult)
-    .then(originalPromiseResult => {})
-    .catch(rejectedValueOrSerializedError => {})
+    .then((originalPromiseResult) => {})
+    .catch((rejectedValueOrSerializedError) => {})
 }
 ```
 
@@ -310,7 +312,7 @@ const fetchUserById = createAsyncThunk(
         // Already fetched or in progress, don't need to re-fetch
         return false
       }
-    }
+    },
   }
 )
 ```
@@ -372,7 +374,7 @@ const fetchUserById = createAsyncThunk(
   'users/fetchById',
   async (userId: string, thunkAPI) => {
     const response = await fetch(`https://reqres.in/api/users/${userId}`, {
-      signal: thunkAPI.signal
+      signal: thunkAPI.signal,
     })
     return await response.json()
   }
@@ -426,7 +428,7 @@ const fetchUserById = createAsyncThunk(
       source.cancel()
     })
     const response = await axios.get(`https://reqres.in/api/users/${userId}`, {
-      cancelToken: source.token
+      cancelToken: source.token,
     })
     return response.data
   }
@@ -459,7 +461,7 @@ const usersSlice = createSlice({
     entities: [],
     loading: 'idle',
     currentRequestId: undefined,
-    error: null
+    error: null,
   },
   reducers: {},
   extraReducers: {
@@ -484,15 +486,15 @@ const usersSlice = createSlice({
         state.error = action.error
         state.currentRequestId = undefined
       }
-    }
-  }
+    },
+  },
 })
 
 const UsersComponent = () => {
-  const { users, loading, error } = useSelector(state => state.users)
+  const { users, loading, error } = useSelector((state) => state.users)
   const dispatch = useDispatch()
 
-  const fetchOneUser = async userId => {
+  const fetchOneUser = async (userId) => {
     try {
       const resultAction = await dispatch(fetchUserById(userId))
       const user = unwrapResult(resultAction)
@@ -577,14 +579,14 @@ interface UsersState {
 
 const initialState = {
   entities: {},
-  error: null
+  error: null,
 } as UsersState
 
 const usersSlice = createSlice({
   name: 'users',
   initialState,
   reducers: {},
-  extraReducers: builder => {
+  extraReducers: (builder) => {
     // The `builder` callback form is used here because it provides correctly typed reducers from the action creators
     builder.addCase(updateUser.fulfilled, (state, { payload }) => {
       state.entities[payload.id] = payload
@@ -597,7 +599,7 @@ const usersSlice = createSlice({
         state.error = action.error.message
       }
     })
-  }
+  },
 })
 
 export default usersSlice.reducer
diff --git a/docs/api/createEntityAdapter.mdx b/docs/api/createEntityAdapter.mdx
index 0a7b96eb4e..72eade56eb 100644
--- a/docs/api/createEntityAdapter.mdx
+++ b/docs/api/createEntityAdapter.mdx
@@ -5,6 +5,8 @@ sidebar_label: createEntityAdapter
 hide_title: true
 ---
 
+&nbsp;
+
 # `createEntityAdapter`
 
 ## Overview
@@ -39,16 +41,16 @@ Sample usage:
 import {
   createEntityAdapter,
   createSlice,
-  configureStore
+  configureStore,
 } from '@reduxjs/toolkit'
 
 type Book = { bookId: string; title: string }
 
 const booksAdapter = createEntityAdapter<Book>({
   // Assume IDs are stored in a field other than `book.id`
-  selectId: book => book.bookId,
+  selectId: (book) => book.bookId,
   // Keep the "all IDs" array sorted based on book titles
-  sortComparer: (a, b) => a.title.localeCompare(b.title)
+  sortComparer: (a, b) => a.title.localeCompare(b.title),
 })
 
 const booksSlice = createSlice({
@@ -61,14 +63,14 @@ const booksSlice = createSlice({
     booksReceived(state, action) {
       // Or, call them as "mutating" helpers in a case reducer
       booksAdapter.setAll(state, action.payload.books)
-    }
-  }
+    },
+  },
 })
 
 const store = configureStore({
   reducer: {
-    books: booksSlice.reducer
-  }
+    books: booksSlice.reducer,
+  },
 })
 
 type RootState = ReturnType<typeof store.getState>
@@ -78,7 +80,7 @@ console.log(store.getState().books)
 
 // Can create a set of memoized selectors based on the location of this entity state
 const booksSelectors = booksAdapter.getSelectors<RootState>(
-  state => state.books
+  (state) => state.books
 )
 
 // And then use the selectors to retrieve values
@@ -243,14 +245,14 @@ It accepts an optional object as an argument. The fields in that object will be
 const booksSlice = createSlice({
   name: 'books',
   initialState: booksAdapter.getInitialState({
-    loading: 'idle'
+    loading: 'idle',
   }),
   reducers: {
     booksLoadingStarted(state, action) {
       // Can update the additional state field
       state.loading = 'pending'
-    }
-  }
+    },
+  },
 })
 ```
 
@@ -276,12 +278,12 @@ For example, the entity state for a `Book` type might be kept in the Redux state
 ```js
 const store = configureStore({
   reducer: {
-    books: booksReducer
-  }
+    books: booksReducer,
+  },
 })
 
 const simpleSelectors = booksAdapter.getSelectors()
-const globalizedSelectors = booksAdapter.getSelectors(state => state.books)
+const globalizedSelectors = booksAdapter.getSelectors((state) => state.books)
 
 // Need to manually pass the correct entity state object in to this selector
 const bookIds = simpleSelectors.selectIds(store.getState().books)
@@ -306,19 +308,19 @@ Exercising several of the CRUD methods and selectors:
 import {
   createEntityAdapter,
   createSlice,
-  configureStore
+  configureStore,
 } from '@reduxjs/toolkit'
 
 // Since we don't provide `selectId`, it defaults to assuming `entity.id` is the right field
 const booksAdapter = createEntityAdapter({
   // Keep the "all IDs" array sorted based on book titles
-  sortComparer: (a, b) => a.title.localeCompare(b.title)
+  sortComparer: (a, b) => a.title.localeCompare(b.title),
 })
 
 const booksSlice = createSlice({
   name: 'books',
   initialState: booksAdapter.getInitialState({
-    loading: 'idle'
+    loading: 'idle',
   }),
   reducers: {
     // Can pass adapter functions directly as case reducers.  Because we're passing this
@@ -336,28 +338,28 @@ const booksSlice = createSlice({
         state.loading = 'idle'
       }
     },
-    bookUpdated: booksAdapter.updateOne
-  }
+    bookUpdated: booksAdapter.updateOne,
+  },
 })
 
 const {
   bookAdded,
   booksLoading,
   booksReceived,
-  bookUpdated
+  bookUpdated,
 } = booksSlice.actions
 
 const store = configureStore({
   reducer: {
-    books: booksSlice.reducer
-  }
+    books: booksSlice.reducer,
+  },
 })
 
 // Check the initial state:
 console.log(store.getState().books)
 // {ids: [], entities: {}, loading: 'idle' }
 
-const booksSelectors = booksAdapter.getSelectors(state => state.books)
+const booksSelectors = booksAdapter.getSelectors((state) => state.books)
 
 store.dispatch(bookAdded({ id: 'a', title: 'First' }))
 console.log(store.getState().books)
@@ -371,7 +373,7 @@ console.log(store.getState().books)
 store.dispatch(
   booksReceived([
     { id: 'b', title: 'Book 3' },
-    { id: 'c', title: 'Book 2' }
+    { id: 'c', title: 'Book 2' },
   ])
 )
 
diff --git a/docs/api/createReducer.mdx b/docs/api/createReducer.mdx
index 89811916c1..eb5821671e 100644
--- a/docs/api/createReducer.mdx
+++ b/docs/api/createReducer.mdx
@@ -5,6 +5,8 @@ sidebar_label: createReducer
 hide_title: true
 ---
 
+&nbsp;
+
 # `createReducer()`
 
 ## Overview
@@ -54,7 +56,7 @@ const incrementByAmount = createAction<number>('counter/incrementByAmount')
 
 const initialState = { value: 0 } as CounterState
 
-const counterReducer = createReducer(initialState, builder => {
+const counterReducer = createReducer(initialState, (builder) => {
   builder
     .addCase(increment, (state, action) => {
       state.value++
@@ -128,7 +130,7 @@ so we recommend the "builder callback" notation in most cases.
 The most readable approach to define matcher cases and default cases is by using the `builder.addMatcher` and `builder.addDefaultCase` methods described above, but it is also possible to use these with the object notation by passing an array of `{matcher, reducer}` objects as the third argument, and a default case reducer as the fourth argument:
 
 ```js
-const isStringPayloadAction = action => typeof action.payload === 'string'
+const isStringPayloadAction = (action) => typeof action.payload === 'string'
 
 const lengthOfAllStringsReducer = createReducer(
   // initial state
@@ -143,11 +145,11 @@ const lengthOfAllStringsReducer = createReducer(
       matcher: isStringPayloadAction,
       reducer(state, action) {
         state.strLen += action.payload.length
-      }
-    }
+      },
+    },
   ],
   // default reducer
-  state => {
+  (state) => {
     state.nonStringActions++
   }
 )
@@ -168,7 +170,7 @@ interface Todo {
 const addTodo = createAction<Todo>('todos/add')
 const toggleTodo = createAction<number>('todos/toggle')
 
-const todosReducer = createReducer([] as Todo[], builder => {
+const todosReducer = createReducer([] as Todo[], (builder) => {
   builder
     .addCase(addTodo, (state, action) => {
       const todo = action.payload
@@ -180,7 +182,7 @@ const todosReducer = createReducer([] as Todo[], builder => {
       return [
         ...state.slice(0, index),
         { ...todo, completed: !todo.completed },
-        ...state.slice(index + 1)
+        ...state.slice(index + 1),
       ]
     })
 })
@@ -201,7 +203,7 @@ interface Todo {
 const addTodo = createAction<Todo>('todos/add')
 const toggleTodo = createAction<number>('todos/toggle')
 
-const todosReducer = createReducer([] as Todo[], builder => {
+const todosReducer = createReducer([] as Todo[], (builder) => {
   builder
     .addCase(addTodo, (state, action) => {
       // This push() operation gets translated into the same
@@ -231,7 +233,7 @@ interface Todo {
 
 const toggleTodo = createAction<number>('todos/toggle')
 
-const todosReducer = createReducer([] as Todo[], builder => {
+const todosReducer = createReducer([] as Todo[], (builder) => {
   builder.addCase(toggleTodo, (state, action) => {
     const index = action.payload
     const todo = state[index]
@@ -265,16 +267,16 @@ The executing reducers form a pipeline, and each of them will receive the output
 ```ts
 import { createReducer } from '@reduxjs/toolkit'
 
-const reducer = createReducer(0, builder => {
+const reducer = createReducer(0, (builder) => {
   builder
-    .addCase('increment', state => state + 1)
+    .addCase('increment', (state) => state + 1)
     .addMatcher(
-      action => action.startsWith('i'),
-      state => state * 5
+      (action) => action.startsWith('i'),
+      (state) => state * 5
     )
     .addMatcher(
-      action => action.endsWith('t'),
-      state => state + 2
+      (action) => action.endsWith('t'),
+      (state) => state + 2
     )
 })
 
@@ -302,7 +304,7 @@ const slice = createSlice({
       console.log('before', current(state))
       state.push(action.payload)
       console.log('after', current(state))
-    }
-  }
+    },
+  },
 })
 ```
diff --git a/docs/api/createSelector.mdx b/docs/api/createSelector.mdx
index a97e3e70ba..ec88f8fd3d 100644
--- a/docs/api/createSelector.mdx
+++ b/docs/api/createSelector.mdx
@@ -5,6 +5,8 @@ sidebar_label: createSelector
 hide_title: true
 ---
 
+&nbsp;
+
 # `createSelector`
 
 The `createSelector` utility from the [Reselect library](https://github.com/reduxjs/reselect), re-exported for ease of use.
@@ -37,10 +39,10 @@ Example:
 
 ```js
 const selectSelf = (state: State) => state
-const unsafeSelector = createSelector(selectSelf, state => state.value)
+const unsafeSelector = createSelector(selectSelf, (state) => state.value)
 const draftSafeSelector = createDraftSafeSelector(
   selectSelf,
-  state => state.value
+  (state) => state.value
 )
 
 // in your reducer:
diff --git a/docs/api/createSlice.mdx b/docs/api/createSlice.mdx
index 97ae8d59a0..c5777e185e 100644
--- a/docs/api/createSlice.mdx
+++ b/docs/api/createSlice.mdx
@@ -5,6 +5,8 @@ sidebar_label: createSlice
 hide_title: true
 ---
 
+&nbsp;
+
 # `createSlice`
 
 A function that accepts an initial state, an object full of reducer functions, and a "slice name",
@@ -36,8 +38,8 @@ const counterSlice = createSlice({
     },
     incrementByAmount(state, action: PayloadAction<number>) {
       state.value += action.payload
-    }
-  }
+    },
+  },
 })
 
 export const { increment, decrement, incrementByAmount } = counterSlice.actions
@@ -93,8 +95,8 @@ const counterSlice = createSlice({
   name: 'counter',
   initialState: 0,
   reducers: {
-    increment: state => state + 1
-  }
+    increment: (state) => state + 1,
+  },
 })
 // Will handle the action type `'counter/increment'`
 ```
@@ -123,9 +125,9 @@ const todosSlice = createSlice({
       prepare: (text: string) => {
         const id = nanoid()
         return { payload: { id, text } }
-      }
-    }
-  }
+      },
+    },
+  },
 })
 ```
 
@@ -175,8 +177,8 @@ createSlice({
     [incrementBy]: (state, action) => {
       return state + action.payload
     },
-    'some/other/action': (state, action) => {}
-  }
+    'some/other/action': (state, action) => {},
+  },
 })
 ```
 
@@ -227,22 +229,22 @@ const counter = createSlice({
   name: 'counter',
   initialState: 0 as number,
   reducers: {
-    increment: state => state + 1,
-    decrement: state => state - 1,
+    increment: (state) => state + 1,
+    decrement: (state) => state - 1,
     multiply: {
       reducer: (state, action: PayloadAction<number>) => state * action.payload,
-      prepare: (value?: number) => ({ payload: value || 2 }) // fallback if the payload is a falsy value
-    }
+      prepare: (value?: number) => ({ payload: value || 2 }), // fallback if the payload is a falsy value
+    },
   },
   // "builder callback API", recommended for TypeScript users
-  extraReducers: builder => {
+  extraReducers: (builder) => {
     builder.addCase(incrementBy, (state, action) => {
       return state + action.payload
     })
     builder.addCase(decrementBy, (state, action) => {
       return state - action.payload
     })
-  }
+  },
 })
 
 const user = createSlice({
@@ -251,7 +253,7 @@ const user = createSlice({
   reducers: {
     setUserName: (state, action) => {
       state.name = action.payload // mutate the state all you want with immer
-    }
+    },
   },
   // "map object API"
   extraReducers: {
@@ -261,13 +263,13 @@ const user = createSlice({
       action /* action will be inferred as "any", as the map notation does not contain type information */
     ) => {
       state.age += 1
-    }
-  }
+    },
+  },
 })
 
 const reducer = combineReducers({
   counter: counter.reducer,
-  user: user.reducer
+  user: user.reducer,
 })
 
 const store = createStore(reducer)
diff --git a/docs/api/getDefaultMiddleware.mdx b/docs/api/getDefaultMiddleware.mdx
index f7d0d14a92..9a3ade5ffd 100644
--- a/docs/api/getDefaultMiddleware.mdx
+++ b/docs/api/getDefaultMiddleware.mdx
@@ -5,6 +5,8 @@ sidebar_label: getDefaultMiddleware
 hide_title: true
 ---
 
+&nbsp;
+
 # `getDefaultMiddleware`
 
 Returns an array containing the default list of middleware.
@@ -15,7 +17,7 @@ By default, [`configureStore`](./configureStore.mdx) adds some middleware to the
 
 ```js
 const store = configureStore({
-  reducer: rootReducer
+  reducer: rootReducer,
 })
 
 // Store has middleware added, because the middleware list was not customized
@@ -26,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: [thunk, logger],
 })
 
 // Store specifically has the thunk and logger middleware applied
@@ -54,7 +56,7 @@ import rootReducer from './reducer'
 
 const store = configureStore({
   reducer: rootReducer,
-  middleware: getDefaultMiddleware => getDefaultMiddleware().concat(logger)
+  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger),
 })
 
 // Store has all of the default middleware added, _plus_ the logger middleware
@@ -149,13 +151,13 @@ import { myCustomApiService } from './api'
 
 const store = configureStore({
   reducer: rootReducer,
-  middleware: getDefaultMiddleware =>
+  middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware({
       thunk: {
-        extraArgument: myCustomApiService
+        extraArgument: myCustomApiService,
       },
-      serializableCheck: false
-    })
+      serializableCheck: false,
+    }),
 })
 ```
 
diff --git a/docs/api/immutabilityMiddleware.mdx b/docs/api/immutabilityMiddleware.mdx
index a4a6bb1847..299632b9ba 100644
--- a/docs/api/immutabilityMiddleware.mdx
+++ b/docs/api/immutabilityMiddleware.mdx
@@ -5,6 +5,8 @@ sidebar_label: Immutability Middleware
 hide_title: true
 ---
 
+&nbsp;
+
 # Immutability Middleware
 
 A port of the [`redux-immutable-state-invariant`](https://github.com/leoasis/redux-immutable-state-invariant) middleware, customized for use with Redux Toolkit. Any detected mutations will be thrown as errors.
@@ -61,10 +63,10 @@ export const exampleSlice = createSlice({
     ignoredPath: 'single level',
     ignoredNested: {
       one: 'one',
-      two: 'two'
-    }
+      two: 'two',
+    },
   },
-  reducers: {}
+  reducers: {},
 })
 
 export default exampleSlice.reducer
@@ -73,19 +75,19 @@ export default exampleSlice.reducer
 
 import {
   configureStore,
-  createImmutableStateInvariantMiddleware
+  createImmutableStateInvariantMiddleware,
 } from '@reduxjs/toolkit'
 
 import exampleSliceReducer from './exampleSlice'
 
 const immutableInvariantMiddleware = createImmutableStateInvariantMiddleware({
-  ignoredPaths: ['ignoredPath', 'ignoredNested.one', 'ignoredNested.two']
+  ignoredPaths: ['ignoredPath', 'ignoredNested.one', 'ignoredNested.two'],
 })
 
 const store = configureStore({
   reducer: exampleSliceReducer,
   // Note that this will replace all default middleware
-  middleware: [immutableInvariantMiddleware]
+  middleware: [immutableInvariantMiddleware],
 })
 ```
 
@@ -103,10 +105,10 @@ export const exampleSlice = createSlice({
     ignoredPath: 'single level',
     ignoredNested: {
       one: 'one',
-      two: 'two'
-    }
+      two: 'two',
+    },
   },
-  reducers: {}
+  reducers: {},
 })
 
 export default exampleSlice.reducer
@@ -119,12 +121,12 @@ import exampleSliceReducer from './exampleSlice'
 const store = configureStore({
   reducer: exampleSliceReducer,
   // Note that this will replace all default middleware
-  middleware: getDefaultMiddleware =>
+  middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware({
       immutableCheck: {
-        ignoredPaths: ['ignoredPath', 'ignoredNested.one', 'ignoredNested.two']
-      }
-    })
+        ignoredPaths: ['ignoredPath', 'ignoredNested.one', 'ignoredNested.two'],
+      },
+    }),
 })
 ```
 
diff --git a/docs/api/matching-utilities.mdx b/docs/api/matching-utilities.mdx
index e975311d2c..576a7cd72f 100644
--- a/docs/api/matching-utilities.mdx
+++ b/docs/api/matching-utilities.mdx
@@ -5,6 +5,8 @@ sidebar_label: Matching Utilities
 hide_title: true
 ---
 
+&nbsp;
+
 # Matching Utilities
 
 Redux Toolkit exports several type-safe action matching utilities that you can leverage when checking for specific kinds of actions. These are primarily useful for the `builder.addMatcher()` cases in `createSlice` and `createReducer`, as well as when writing custom middleware.
@@ -141,7 +143,7 @@ First, let's examine an unnecessarily complex example:
 import {
   createAsyncThunk,
   createReducer,
-  PayloadAction
+  PayloadAction,
 } from '@reduxjs/toolkit'
 
 interface Data {
@@ -176,7 +178,7 @@ interface ExampleState {
 
 const initialState = {
   isSpecial: false,
-  isInteresting: false
+  isInteresting: false,
 } as ExampleState
 
 export const isSpecialAndInterestingThunk = createAsyncThunk(
@@ -184,13 +186,13 @@ export const isSpecialAndInterestingThunk = createAsyncThunk(
   () => {
     return {
       isSpecial: true,
-      isInteresting: true
+      isInteresting: true,
     }
   }
 )
 
 // This has unnecessary complexity
-const loadingReducer = createReducer(initialState, builder => {
+const loadingReducer = createReducer(initialState, (builder) => {
   builder.addCase(isSpecialAndInterestingThunk.fulfilled, (state, action) => {
     if (isSpecial(action)) {
       state.isSpecial = true
@@ -211,10 +213,10 @@ import {
   initialState,
   isSpecial,
   isInteresting,
-  Data
+  Data,
 } from '@virtual/matchers' // This is a fake pkg that provides the types shown above
 
-const loadingReducer = createReducer(initialState, builder => {
+const loadingReducer = createReducer(initialState, (builder) => {
   builder
     .addMatcher(
       isAllOf(isSpecialAndInterestingThunk.fulfilled, isSpecial),
@@ -267,7 +269,13 @@ function someFunction(action: PayloadAction<Data>) {
 
 <iframe
   src="https://codesandbox.io/embed/redux-toolkit-matchers-example-e765q?fontsize=14&hidenavigation=1&module=%2Fsrc%2Ffeatures%2Fcounter%2FcounterSlice.ts&theme=dark&runonclick=1"
-  style={{width:'100%', height:'500px', border:0, borderRadius: 4, overflow:'hidden'}}
+  style={{
+    width: '100%',
+    height: '500px',
+    border: 0,
+    borderRadius: 4,
+    overflow: 'hidden',
+  }}
   title="redux-toolkit-matchers-example"
   allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
diff --git a/docs/api/otherExports.mdx b/docs/api/otherExports.mdx
index 411066d1f8..a282c751c5 100644
--- a/docs/api/otherExports.mdx
+++ b/docs/api/otherExports.mdx
@@ -5,6 +5,8 @@ sidebar_label: Other Exports
 hide_title: true
 ---
 
+&nbsp;
+
 # Other Exports
 
 Redux Toolkit exports some of its internal utilities, and re-exports additional functions from other dependencies as well.
@@ -44,7 +46,7 @@ const addTodo = createAction<Todo>('addTodo')
 
 const initialState = [] as Todo[]
 
-const todosReducer = createReducer(initialState, builder => {
+const todosReducer = createReducer(initialState, (builder) => {
   builder.addCase(addTodo, (state, action) => {
     state.push(action.payload)
     console.log(current(state))
diff --git a/docs/api/serializabilityMiddleware.mdx b/docs/api/serializabilityMiddleware.mdx
index 38693c315b..5514b39387 100644
--- a/docs/api/serializabilityMiddleware.mdx
+++ b/docs/api/serializabilityMiddleware.mdx
@@ -5,6 +5,8 @@ sidebar_label: Serializability Middleware
 hide_title: true
 ---
 
+&nbsp;
+
 # Serializability Middleware
 
 A custom middleware that detects if any non-serializable values have been included in state or dispatched actions, modeled after `redux-immutable-state-invariant`. Any detected non-serializable values will be logged to the console.
@@ -69,7 +71,7 @@ Example:
 ```ts
 // file: reducer.ts noEmit
 
-export default function(state = {}, action: any) {
+export default function (state = {}, action: any) {
   return state
 }
 
@@ -79,7 +81,7 @@ import { Iterable } from 'immutable'
 import {
   configureStore,
   createSerializableStateInvariantMiddleware,
-  isPlain
+  isPlain,
 } from '@reduxjs/toolkit'
 import reducer from './reducer'
 
@@ -92,12 +94,12 @@ const getEntries = (value: any) =>
 
 const serializableMiddleware = createSerializableStateInvariantMiddleware({
   isSerializable,
-  getEntries
+  getEntries,
 })
 
 const store = configureStore({
   reducer,
-  middleware: [serializableMiddleware]
+  middleware: [serializableMiddleware],
 })
 ```
 
diff --git a/docs/introduction/getting-started.md b/docs/introduction/getting-started.md
index c21e650eaa..f0b677490c 100644
--- a/docs/introduction/getting-started.md
+++ b/docs/introduction/getting-started.md
@@ -5,6 +5,8 @@ sidebar_label: Getting Started
 hide_title: true
 ---
 
+&nbsp;
+
 # Getting Started with Redux Toolkit
 
 ## Purpose
diff --git a/docs/rtk-query/api/ApiProvider.mdx b/docs/rtk-query/api/ApiProvider.mdx
index 4b092f9a39..558191f094 100644
--- a/docs/rtk-query/api/ApiProvider.mdx
+++ b/docs/rtk-query/api/ApiProvider.mdx
@@ -5,6 +5,8 @@ sidebar_label: ApiProvider
 hide_title: true
 ---
 
+&nbsp;
+
 # `ApiProvider`
 
 [summary](docblock://query/react/ApiProvider.tsx?token=ApiProvider)
diff --git a/docs/rtk-query/api/createApi.mdx b/docs/rtk-query/api/createApi.mdx
index 805d9ae786..40b747b7bd 100644
--- a/docs/rtk-query/api/createApi.mdx
+++ b/docs/rtk-query/api/createApi.mdx
@@ -5,6 +5,8 @@ sidebar_label: createApi
 hide_title: true
 ---
 
+&nbsp;
+
 # `createApi`
 
 `createApi` is the core of RTK Query's functionality. It allows you to define a set of endpoints describe how to retrieve data from a series of endpoints, including configuration of how to fetch and transform that data. It generates [an "API slice" structure](./created-api/overview.mdx) that contains Redux logic (and optionally React hooks) that encapsulate the data fetching and caching process for you.
diff --git a/docs/rtk-query/api/created-api/cache-management.mdx b/docs/rtk-query/api/created-api/cache-management.mdx
index 6f1cf7f400..d9075c83bd 100644
--- a/docs/rtk-query/api/created-api/cache-management.mdx
+++ b/docs/rtk-query/api/created-api/cache-management.mdx
@@ -5,6 +5,8 @@ sidebar_label: Cache Management
 hide_title: true
 ---
 
+&nbsp;
+
 # API Slices: Cache Management Utilities
 
 The API slice object includes cache management utilities that are used for implementing [optimistic updates](../../usage/optimistic-updates.mdx). These are included in a `util` field inside the slice object.
diff --git a/docs/rtk-query/api/created-api/code-splitting.mdx b/docs/rtk-query/api/created-api/code-splitting.mdx
index 690c478942..b5ecba8aba 100644
--- a/docs/rtk-query/api/created-api/code-splitting.mdx
+++ b/docs/rtk-query/api/created-api/code-splitting.mdx
@@ -5,6 +5,8 @@ sidebar_label: Code Splitting
 hide_title: true
 ---
 
+&nbsp;
+
 # API Slices: Code Splitting and Generation
 
 Each API slice allows [additional endpoint definitions to be injected at runtime](../../usage/code-splitting.mdx) after the initial API slice has been defined. This can be beneficial for apps that may have _many_ endpoints.
diff --git a/docs/rtk-query/api/created-api/endpoints.mdx b/docs/rtk-query/api/created-api/endpoints.mdx
index 863d41fdc1..411025e113 100644
--- a/docs/rtk-query/api/created-api/endpoints.mdx
+++ b/docs/rtk-query/api/created-api/endpoints.mdx
@@ -5,6 +5,8 @@ sidebar_label: Endpoints
 hide_title: true
 ---
 
+&nbsp;
+
 # API Slices: Endpoints
 
 The API slice object will have an `endpoints` field inside. This section maps the endpoint names you provided to `createApi` to the core Redux logic (thunks and selectors) used to trigger data fetches and read cached data for that endpoint. If you're using the React-specific version of `createApi`, each endpoint definition will also contain the auto-generated React hooks for that endpoint.
diff --git a/docs/rtk-query/api/created-api/hooks.mdx b/docs/rtk-query/api/created-api/hooks.mdx
index 21f57c2c63..1499f5721a 100644
--- a/docs/rtk-query/api/created-api/hooks.mdx
+++ b/docs/rtk-query/api/created-api/hooks.mdx
@@ -5,6 +5,8 @@ sidebar_label: React Hooks
 hide_title: true
 ---
 
+&nbsp;
+
 # API Slices: React Hooks
 
 ## Hooks Overview
diff --git a/docs/rtk-query/api/created-api/overview.mdx b/docs/rtk-query/api/created-api/overview.mdx
index 2899ae3119..424c1a51aa 100644
--- a/docs/rtk-query/api/created-api/overview.mdx
+++ b/docs/rtk-query/api/created-api/overview.mdx
@@ -5,6 +5,8 @@ sidebar_label: API Slice Overview
 hide_title: true
 ---
 
+&nbsp;
+
 # Generated API Slices
 
 ## API Slice Overview
diff --git a/docs/rtk-query/api/created-api/redux-integration.mdx b/docs/rtk-query/api/created-api/redux-integration.mdx
index 1d853345d5..7289e86fd9 100644
--- a/docs/rtk-query/api/created-api/redux-integration.mdx
+++ b/docs/rtk-query/api/created-api/redux-integration.mdx
@@ -5,11 +5,13 @@ sidebar_label: Redux Integration
 hide_title: true
 ---
 
+&nbsp;
+
 # API Slices: Redux Integration
 
 Internally, `createApi` will call [the Redux Toolkit `createSlice` API](https://redux-toolkit.js.org/api/createSlice) to generate a slice reducer and corresponding action creators with the appropriate logic for caching fetched data. It also automatically generates a custom Redux middleware that manages subscription counts and cache lifetimes.
 
-The generated slice reducer and the middleware both need to be added to your Redux store setup in `configureStore` in order to work correctly:
+The generated slice reducer and the middleware both need to be added to your Redux store setup in `configureStore` in order to work correctly: test
 
 ```ts title="src/store.ts"
 // file: src/services/pokemon.ts noEmit
@@ -17,7 +19,7 @@ import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query'
 
 export const pokemonApi = createApi({
   baseQuery: fetchBaseQuery({ baseUrl: '/' }),
-  endpoints: () => ({})
+  endpoints: () => ({}),
 })
 
 // file: src/store.ts
diff --git a/docs/rtk-query/api/fetchBaseQuery.mdx b/docs/rtk-query/api/fetchBaseQuery.mdx
index bfed0896a4..b86bcee460 100644
--- a/docs/rtk-query/api/fetchBaseQuery.mdx
+++ b/docs/rtk-query/api/fetchBaseQuery.mdx
@@ -6,6 +6,8 @@ hide_title: true
 hide_table_of_contents: false
 ---
 
+&nbsp;
+
 # `fetchBaseQuery`
 
 This is a very small wrapper around [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) that aims to simplify requests. It is not a full-blown replacement for `axios`, `superagent`, or any other more heavy-weight library, but it will cover the large majority of your needs.
@@ -71,7 +73,7 @@ The most common use case for `prepareHeaders` would be to automatically include
 
 ```ts title="Setting a token from a redux store value
 // file: store.ts noEmit
-export type RootState = { auth: { token : string } };
+export type RootState = { auth: { token: string } }
 
 // file: baseQuery.ts
 import { fetchBaseQuery } from '@reduxjs/toolkit/query'
diff --git a/docs/rtk-query/api/setupListeners.mdx b/docs/rtk-query/api/setupListeners.mdx
index a323f0e900..500a0b5ecc 100644
--- a/docs/rtk-query/api/setupListeners.mdx
+++ b/docs/rtk-query/api/setupListeners.mdx
@@ -6,6 +6,8 @@ hide_title: true
 hide_table_of_contents: false
 ---
 
+&nbsp;
+
 # `setupListeners`
 
 A utility used to enable `refetchOnMount` and `refetchOnReconnect` behaviors. It requires the `dispatch` method from your store. Calling `setupListeners(store.dispatch)` will configure listeners with the recommended defaults, but you have the option of providing a callback for more granular control.
diff --git a/docs/rtk-query/comparison.md b/docs/rtk-query/comparison.md
index f62b35a846..5ca704ec02 100644
--- a/docs/rtk-query/comparison.md
+++ b/docs/rtk-query/comparison.md
@@ -5,6 +5,8 @@ sidebar_label: Comparison with Other Tools
 hide_title: true
 ---
 
+&nbsp;
+
 # Comparison with Other Tools
 
 **RTK Query takes inspiration from many other data fetching libraries in the ecosystem**. Much like [the Redux core library was inspired by tools like Flux and Elm](https://redux.js.org/understanding/history-and-design/prior-art), RTK Query builds on API design patterns and feature concepts popularized by libraries like React Query, SWR, Apollo, and Urql. RTK Query has been written from scratch, but tries to use the best concepts from those libraries and other data fetching tools, with an eye towards leveraging the unique strengths and capabilities of Redux.
diff --git a/docs/rtk-query/overview.md b/docs/rtk-query/overview.md
index 14c30b56bf..f8c4c33e52 100644
--- a/docs/rtk-query/overview.md
+++ b/docs/rtk-query/overview.md
@@ -5,6 +5,8 @@ sidebar_label: RTK Query Overview
 hide_title: true
 ---
 
+&nbsp;
+
 # RTK Query Overview
 
 **RTK Query** is a powerful data fetching and caching tool. It is designed to simplify common cases for loading data in a web application, **eliminating the need to hand-write data fetching & caching logic yourself**.
diff --git a/docs/rtk-query/usage-with-typescript.mdx b/docs/rtk-query/usage-with-typescript.mdx
index 3220a9b9c6..ef258ab2d2 100644
--- a/docs/rtk-query/usage-with-typescript.mdx
+++ b/docs/rtk-query/usage-with-typescript.mdx
@@ -5,6 +5,8 @@ sidebar_label: Usage With TypeScript
 hide_title: true
 ---
 
+&nbsp;
+
 # Usage With TypeScript
 
 :::tip What You'll Learn
diff --git a/docs/rtk-query/usage/cached-data.mdx b/docs/rtk-query/usage/cached-data.mdx
index 5180aa8719..87cafc17ad 100644
--- a/docs/rtk-query/usage/cached-data.mdx
+++ b/docs/rtk-query/usage/cached-data.mdx
@@ -5,6 +5,8 @@ sidebar_label: Cached Data
 hide_title: true
 ---
 
+&nbsp;
+
 # Cached Data
 
 A key feature of RTK Query is it's management of cached data. When data is fetched from the server, RTK Query will store the data in the Redux store as a 'cache'. When an additional request is performed for the same data, RTK Query will provide the existing cached data rather than sending an additional request to the server.
diff --git a/docs/rtk-query/usage/code-generation.mdx b/docs/rtk-query/usage/code-generation.mdx
index 81ac55f2c0..c7d2e073b7 100644
--- a/docs/rtk-query/usage/code-generation.mdx
+++ b/docs/rtk-query/usage/code-generation.mdx
@@ -5,6 +5,8 @@ sidebar_label: Code Generation
 hide_title: true
 ---
 
+&nbsp;
+
 # Code Generation
 
 ## OpenAPI
@@ -48,10 +50,13 @@ export const api = generatedApi.enhanceEndpoints({
     },
     // alternate notation: callback that gets passed in `endpoint` - you can freely modify the object here
     addPet: (endpoint) => {
-      endpoint.invalidatesTags = (result) => result ? [{ type: 'Pet', id: result.id }] : []
+      endpoint.invalidatesTags = (result) =>
+        result ? [{ type: 'Pet', id: result.id }] : []
     },
     updatePet: {
-      invalidatesTags: (result, error, arg) => [{ type: 'Pet', id: arg.pet.id }],
+      invalidatesTags: (result, error, arg) => [
+        { type: 'Pet', id: arg.pet.id },
+      ],
     },
     deletePet: {
       invalidatesTags: (result, error, arg) => [{ type: 'Pet', id: arg.petId }],
diff --git a/docs/rtk-query/usage/code-splitting.mdx b/docs/rtk-query/usage/code-splitting.mdx
index 25ab1485b8..a5bf551677 100644
--- a/docs/rtk-query/usage/code-splitting.mdx
+++ b/docs/rtk-query/usage/code-splitting.mdx
@@ -5,6 +5,8 @@ sidebar_label: Code Splitting
 hide_title: true
 ---
 
+&nbsp;
+
 # Code Splitting
 
 RTK Query makes it possible to trim down your initial bundle size by allowing you to inject additional endpoints after you've setup your initial service definition. This can be very beneficial for larger applications that may have _many_ endpoints.
@@ -47,9 +49,9 @@ const extendedApi = emptySplitApi.injectEndpoints({
     }),
   }),
   overrideExisting: false,
-});
+})
 
-export const { useExampleQuery } = extendedApi;
+export const { useExampleQuery } = extendedApi
 ```
 
 :::tip
diff --git a/docs/rtk-query/usage/conditional-fetching.mdx b/docs/rtk-query/usage/conditional-fetching.mdx
index 3eb114f77f..6e95b23537 100644
--- a/docs/rtk-query/usage/conditional-fetching.mdx
+++ b/docs/rtk-query/usage/conditional-fetching.mdx
@@ -5,6 +5,8 @@ sidebar_label: Conditional Fetching
 hide_title: true
 ---
 
+&nbsp;
+
 # Conditional Fetching
 
 If you want to prevent a query from automatically running, you can use the `skip` parameter in a hook.
diff --git a/docs/rtk-query/usage/customizing-create-api.mdx b/docs/rtk-query/usage/customizing-create-api.mdx
index 24b1b62cf7..cd1e4a621e 100644
--- a/docs/rtk-query/usage/customizing-create-api.mdx
+++ b/docs/rtk-query/usage/customizing-create-api.mdx
@@ -5,6 +5,8 @@ sidebar_label: Customizing createApi
 hide_title: true
 ---
 
+&nbsp;
+
 # Customizing `createApi`
 
 Currently, RTK Query includes two variants of `createApi`:
diff --git a/docs/rtk-query/usage/customizing-queries.mdx b/docs/rtk-query/usage/customizing-queries.mdx
index bfa386bfeb..7fa2068d31 100644
--- a/docs/rtk-query/usage/customizing-queries.mdx
+++ b/docs/rtk-query/usage/customizing-queries.mdx
@@ -5,6 +5,8 @@ sidebar_label: Customizing Queries
 hide_title: true
 ---
 
+&nbsp;
+
 # Customizing queries
 
 RTK Query is agnostic as to how your requests resolve. You can use any library you like to handle requests, or no library at all. RTK Query provides reasonable defaults expected to cover the majority of use cases, while also allowing room for customization to alter query handling to fit specific needs.
diff --git a/docs/rtk-query/usage/error-handling.mdx b/docs/rtk-query/usage/error-handling.mdx
index 6c2144d51c..10690a1ffd 100644
--- a/docs/rtk-query/usage/error-handling.mdx
+++ b/docs/rtk-query/usage/error-handling.mdx
@@ -5,6 +5,8 @@ sidebar_label: Error Handling
 hide_title: true
 ---
 
+&nbsp;
+
 # `Error Handling`
 
 If your query or mutation happens to throw an error when using [fetchBaseQuery](../api/fetchBaseQuery), it will be returned in the `error` property of the respective hook.
@@ -72,15 +74,19 @@ Redux-Toolkit released [matching utilities](https://redux-toolkit.js.org/api/mat
 :::
 
 ```ts title="Error catching middleware example"
-import { MiddlewareAPI, isRejectedWithValue, Middleware } from '@reduxjs/toolkit'
+import {
+  MiddlewareAPI,
+  isRejectedWithValue,
+  Middleware,
+} from '@reduxjs/toolkit'
 import { toast } from 'your-cool-library'
 
 /**
  * Log a warning and show a toast!
  */
-export const rtkQueryErrorLogger: Middleware = (api: MiddlewareAPI) => (next) => (
-  action
-) => {
+export const rtkQueryErrorLogger: Middleware = (api: MiddlewareAPI) => (
+  next
+) => (action) => {
   // RTK Query uses `createAsyncThunk` from redux-toolkit under the hood, so we're able to utilize these use matchers!
   if (isRejectedWithValue(action)) {
     console.warn('We got a rejected action!')
diff --git a/docs/rtk-query/usage/examples.mdx b/docs/rtk-query/usage/examples.mdx
index eab7972c65..b0b085c281 100644
--- a/docs/rtk-query/usage/examples.mdx
+++ b/docs/rtk-query/usage/examples.mdx
@@ -5,6 +5,8 @@ sidebar_label: Examples
 hide_title: true
 ---
 
+&nbsp;
+
 # RTK Query Examples
 
 ## Examples Overview
diff --git a/docs/rtk-query/usage/migrating-to-rtk-query.mdx b/docs/rtk-query/usage/migrating-to-rtk-query.mdx
index c38dea1850..ea428f7aea 100644
--- a/docs/rtk-query/usage/migrating-to-rtk-query.mdx
+++ b/docs/rtk-query/usage/migrating-to-rtk-query.mdx
@@ -5,6 +5,8 @@ sidebar_label: Migrating to RTK Query
 hide_title: true
 ---
 
+&nbsp;
+
 # Migrating to RTK Query
 
 ## Overview
diff --git a/docs/rtk-query/usage/mutations.mdx b/docs/rtk-query/usage/mutations.mdx
index 670d5f5732..8e75a3aecf 100644
--- a/docs/rtk-query/usage/mutations.mdx
+++ b/docs/rtk-query/usage/mutations.mdx
@@ -5,6 +5,8 @@ sidebar_label: Mutations
 hide_title: true
 ---
 
+&nbsp;
+
 # Mutations
 
 Unlike `useQuery`, `useMutation` returns a tuple. The first item in the tuple is the `trigger` function and the second element contains an object with `status`, `error`, and `data`.
diff --git a/docs/rtk-query/usage/optimistic-updates.mdx b/docs/rtk-query/usage/optimistic-updates.mdx
index ce87e61e41..3c15b6618c 100644
--- a/docs/rtk-query/usage/optimistic-updates.mdx
+++ b/docs/rtk-query/usage/optimistic-updates.mdx
@@ -5,6 +5,8 @@ sidebar_label: Optimistic Updates
 hide_title: true
 ---
 
+&nbsp;
+
 # Optimistic Updates
 
 When you're performing an update on some data that _already exists_ in the cache via [`useMutation`](./mutations), RTK Query gives you a few tools to implement an optimistic update. This can be a useful pattern for when you want to give the user the impression that their changes are immediate.
diff --git a/docs/rtk-query/usage/pagination.mdx b/docs/rtk-query/usage/pagination.mdx
index f9129990c5..c21010aa76 100644
--- a/docs/rtk-query/usage/pagination.mdx
+++ b/docs/rtk-query/usage/pagination.mdx
@@ -5,6 +5,8 @@ sidebar_label: Pagination
 hide_title: true
 ---
 
+&nbsp;
+
 # Pagination
 
 RTK Query makes it straightforward to integrate with a standard index-based pagination API. This is the most common form of pagination that you'll need to implement.
diff --git a/docs/rtk-query/usage/polling.mdx b/docs/rtk-query/usage/polling.mdx
index f49479c91a..ce34b2d228 100644
--- a/docs/rtk-query/usage/polling.mdx
+++ b/docs/rtk-query/usage/polling.mdx
@@ -5,6 +5,8 @@ sidebar_label: Polling
 hide_title: true
 ---
 
+&nbsp;
+
 # Polling
 
 Polling gives you the ability to have a 'real-time' effect by causing a query to run at a specified interval. To enable polling for a query, pass a `pollingInterval` to the `useQuery` hook or action creator with an interval in milliseconds:
diff --git a/docs/rtk-query/usage/prefetching.mdx b/docs/rtk-query/usage/prefetching.mdx
index 2b9f31accd..d7219a11a8 100644
--- a/docs/rtk-query/usage/prefetching.mdx
+++ b/docs/rtk-query/usage/prefetching.mdx
@@ -5,6 +5,8 @@ sidebar_label: Prefetching
 hide_title: true
 ---
 
+&nbsp;
+
 # Prefetching
 
 The goal of prefetching is to make data fetch _before_ the user navigates to a page or attempts to load some known content.
diff --git a/docs/rtk-query/usage/queries.mdx b/docs/rtk-query/usage/queries.mdx
index 7e86d3493b..52f7ac2f65 100644
--- a/docs/rtk-query/usage/queries.mdx
+++ b/docs/rtk-query/usage/queries.mdx
@@ -5,6 +5,8 @@ sidebar_label: Queries
 hide_title: true
 ---
 
+&nbsp;
+
 # Queries
 
 This is the most basic feature of RTK Query. A query operation can be performed with any data fetching library of your choice, but the general recommendation is that you only use queries for requests that retrieve data. For anything that alters data on the server or will possibly invalidate the cache, you should use a [Mutation](./mutations).
diff --git a/docs/rtk-query/usage/streaming-updates.mdx b/docs/rtk-query/usage/streaming-updates.mdx
index f35a96f20d..222e9bfaa4 100644
--- a/docs/rtk-query/usage/streaming-updates.mdx
+++ b/docs/rtk-query/usage/streaming-updates.mdx
@@ -5,6 +5,8 @@ sidebar_label: Streaming Updates
 hide_title: true
 ---
 
+&nbsp;
+
 # Streaming Updates
 
 RTK Query gives you the ability to receive **streaming updates** for persistent queries. This enables a query to react to an ongoing connection to the server (typically using WebSockets), updating the cached data as updates to the query are received from the server when they occur.
diff --git a/docs/tutorials/overview.md b/docs/tutorials/overview.md
index 8f1b82a7bb..1a0702db1c 100644
--- a/docs/tutorials/overview.md
+++ b/docs/tutorials/overview.md
@@ -6,6 +6,8 @@ sidebar_label: Tutorials Overview
 hide_title: true
 ---
 
+&nbsp;
+
 # Tutorials Overview
 
 **The Redux core docs site at https://redux.js.org contains the primary tutorials for learning Redux**, including how to use Redux Toolkit and React-Redux together.
diff --git a/docs/tutorials/quick-start.md b/docs/tutorials/quick-start.md
index 56676f4387..424e122fcd 100644
--- a/docs/tutorials/quick-start.md
+++ b/docs/tutorials/quick-start.md
@@ -5,6 +5,8 @@ sidebar_label: Quick Start
 hide_title: true
 ---
 
+&nbsp;
+
 # Redux Toolkit Quick Start
 
 :::tip What You'll Learn
diff --git a/docs/tutorials/rtk-query.mdx b/docs/tutorials/rtk-query.mdx
index 9dab879c77..3807293ad2 100644
--- a/docs/tutorials/rtk-query.mdx
+++ b/docs/tutorials/rtk-query.mdx
@@ -5,6 +5,8 @@ sidebar_label: RTK Query Quick Start
 hide_title: true
 ---
 
+&nbsp;
+
 # RTK Query Quick Start
 
 :::tip What You'll Learn
diff --git a/docs/tutorials/typescript.md b/docs/tutorials/typescript.md
index 01189439b7..bb1f715b72 100644
--- a/docs/tutorials/typescript.md
+++ b/docs/tutorials/typescript.md
@@ -5,6 +5,8 @@ sidebar_label: TypeScript Quick Start
 hide_title: true
 ---
 
+&nbsp;
+
 # Redux Toolkit TypeScript Quick Start
 
 :::tip What You'll Learn
diff --git a/docs/usage/immer-reducers.md b/docs/usage/immer-reducers.md
index bac9555fc9..b71ec09d08 100644
--- a/docs/usage/immer-reducers.md
+++ b/docs/usage/immer-reducers.md
@@ -5,6 +5,8 @@ sidebar_label: Writing Reducers with Immer
 hide_title: true
 ---
 
+&nbsp;
+
 # Writing Reducers with Immer
 
 Redux Toolkit's [`createReducer`](../api/createReducer.mdx) and [`createSlice`](../api/createSlice.mdx) automatically use [Immer](https://immerjs.github.io/immer/) internally to let you write simpler immutable update logic using "mutating" syntax. This helps simplify most reducer implementations.
diff --git a/docs/usage/usage-guide.md b/docs/usage/usage-guide.md
index adcb67d24f..60c86682ba 100644
--- a/docs/usage/usage-guide.md
+++ b/docs/usage/usage-guide.md
@@ -5,6 +5,8 @@ sidebar_label: Usage Guide
 hide_title: true
 ---
 
+&nbsp;
+
 # Usage Guide
 
 The Redux core library is deliberately unopinionated. It lets you decide how you want to handle everything, like store setup, what your state contains, and how you want to build your reducers.
diff --git a/docs/usage/usage-with-typescript.md b/docs/usage/usage-with-typescript.md
index 20d539f37a..937d760c0f 100644
--- a/docs/usage/usage-with-typescript.md
+++ b/docs/usage/usage-with-typescript.md
@@ -5,6 +5,8 @@ sidebar_label: Usage With TypeScript
 hide_title: true
 ---
 
+&nbsp;
+
 # Usage With TypeScript
 
 :::tip What You'll Learn

From 47be32591b933856267668dc0be472ac7a34f526 Mon Sep 17 00:00:00 2001
From: Mark Erikson <mark@isquaredsoftware.com>
Date: Sat, 29 May 2021 22:41:46 -0400
Subject: [PATCH 3/3] Add "Learn Modern Redux" embeds

---
 docs/introduction/getting-started.md | 36 +++++++++++++++++++++++-----
 docs/tutorials/overview.md           | 14 +++++++++++
 2 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/docs/introduction/getting-started.md b/docs/introduction/getting-started.md
index f0b677490c..cee43d9f85 100644
--- a/docs/introduction/getting-started.md
+++ b/docs/introduction/getting-started.md
@@ -5,6 +5,9 @@ sidebar_label: Getting Started
 hide_title: true
 ---
 
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css'
+
 &nbsp;
 
 # Getting Started with Redux Toolkit
@@ -29,15 +32,13 @@ you make your Redux code better.
 
 ### Using Create React App
 
-The recommended way to start new apps with React and Redux Toolkit is by using the [official Redux+JS template](https://github.com/reduxjs/cra-template-redux) for [Create React App](https://github.com/facebook/create-react-app), which takes advantage of React Redux's integration with React components.
+The recommended way to start new apps with React and Redux is by using the [official Redux+JS template](https://github.com/reduxjs/cra-template-redux) or [Redux+TS template](https://github.com/reduxjs/cra-template-redux-typescript) for [Create React App](https://github.com/facebook/create-react-app), which takes advantage of **[Redux Toolkit](https://redux-toolkit.js.org/)** and React Redux's integration with React components.
 
-```sh
+```bash
+# Redux + Plain JS template
 npx create-react-app my-app --template redux
-```
-
-We also have [a Redux+TS template for CRA as well](https://github.com/reduxjs/cra-template-redux-typescript):
 
-```sh
+# Redux + TypeScript template
 npx create-react-app my-app --template redux-typescript
 ```
 
@@ -93,6 +94,29 @@ RTK Query includes these APIs:
 - [`<ApiProvider />`](../rtk-query/api/ApiProvider.mdx): Can be used as a `Provider` if you **do not already have a Redux store**.
 - [`setupListeners()`](../rtk-query/api/setupListeners.mdx): A utility used to enable `refetchOnMount` and `refetchOnReconnect` behaviors.
 
+## Learn Redux
+
+We have a variety of resources available to help you learn Redux.
+
+### Redux Essentials Tutorial
+
+The [**Redux Essentials tutorial**](https://redux.js.org/tutorials/essentials/part-1-overview-concepts) is a "top-down" tutorial that teaches "how to use Redux the right way", using our latest recommended APIs and best practices. We recommend starting there.
+
+### Redux Fundamentals Tutorial
+
+The [**Redux Fundamentals tutorial**](https://redux.js.org/tutorials/fundamentals/part-1-overview) is a "bottom-up" tutorial that teaches "how Redux works" from first principles and without any abstractions, and why standard Redux usage patterns exist.
+
+### Learn Modern Redux Livestream
+
+Redux maintainer Mark Erikson appeared on the "Learn with Jason" show to explain how we recommend using Redux today. The show includes a live-coded example app that shows how to use Redux Toolkit and React-Redux hooks with Typescript, as well as the new RTK Query data fetching APIs.
+
+See [the "Learn Modern Redux" show notes page](https://www.learnwithjason.dev/let-s-learn-modern-redux) for a transcript and links to the example app source.
+
+<LiteYouTubeEmbed 
+    id="9zySeP5vH9c"
+    title="Learn Modern Redux - Redux Toolkit, React-Redux Hooks, and RTK Query"
+/>
+
 ## Help and Discussion
 
 The **[#redux channel](https://discord.gg/0ZcbPKXt5bZ6au5t)** of the **[Reactiflux Discord community](http://www.reactiflux.com)** is our official resource for all questions related to learning and using Redux. Reactiflux is a great place to hang out, ask questions, and learn - come join us!
diff --git a/docs/tutorials/overview.md b/docs/tutorials/overview.md
index 1a0702db1c..197e48677b 100644
--- a/docs/tutorials/overview.md
+++ b/docs/tutorials/overview.md
@@ -6,6 +6,9 @@ sidebar_label: Tutorials Overview
 hide_title: true
 ---
 
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css'
+
 &nbsp;
 
 # Tutorials Overview
@@ -42,6 +45,17 @@ The [**Redux Fundamentals tutorial**](https://redux.js.org/tutorials/fundamental
 
 Since Redux Toolkit is an abstraction layer that wraps around the Redux core, it's helpful to know what RTK's APIs are actually doing for you under the hood. **If you want to understand how Redux really works and why RTK is the recommended approach, read the Redux Fundamentals tutorial.**
 
+## Learn Modern Redux Livestream
+
+Redux maintainer Mark Erikson appeared on the "Learn with Jason" show to explain how we recommend using Redux today. The show includes a live-coded example app that shows how to use Redux Toolkit and React-Redux hooks with Typescript, as well as the new RTK Query data fetching APIs.
+
+See [the "Learn Modern Redux" show notes page](https://www.learnwithjason.dev/let-s-learn-modern-redux) for a transcript and links to the example app source.
+
+<LiteYouTubeEmbed 
+    id="9zySeP5vH9c"
+    title="Learn Modern Redux - Redux Toolkit, React-Redux Hooks, and RTK Query"
+/>
+
 ## Using Redux Toolkit
 
 The RTK [**Usage Guide** docs page](../usage/usage-guide.md) explains the standard usage patterns for each of RTK's APIs. The [API Reference](../api/configureStore.mdx) section describes each API function and has additional usage examples.