From 181a54af9daf5144278b1ddbc3310a440242f394 Mon Sep 17 00:00:00 2001
From: Prince Raj Roy <princerajroy313@gmail.com>
Date: Tue, 29 Jun 2021 21:06:34 +0530
Subject: [PATCH 1/4] Tutorials Section: Update code blocks with JS/TS toggle

---
 docs/api/createAsyncThunk.mdx                 |   2 +-
 docs/tsconfig.json                            |   1 +
 docs/tutorials/overview.md                    |   4 +-
 .../{quick-start.md => quick-start.mdx}       | 108 +++++++++++++++---
 docs/tutorials/rtk-query.mdx                  |  36 +++++-
 .../{typescript.md => typescript.mdx}         |  52 +++++++--
 docs/usage/usage-with-typescript.md           |   4 +-
 website/package.json                          |   2 +-
 8 files changed, 175 insertions(+), 34 deletions(-)
 rename docs/tutorials/{quick-start.md => quick-start.mdx} (78%)
 rename docs/tutorials/{typescript.md => typescript.mdx} (85%)

diff --git a/docs/api/createAsyncThunk.mdx b/docs/api/createAsyncThunk.mdx
index 068e525d87..ed76bc179e 100644
--- a/docs/api/createAsyncThunk.mdx
+++ b/docs/api/createAsyncThunk.mdx
@@ -19,7 +19,7 @@ It does not generate any reducer functions, since it does not know what data you
 
 :::tip
 
-Redux Toolkit's [**RTK Query data fetching API**](../rtk-query/overview.md) is a purpose built data fetching and caching solution for Redux apps, and can **eliminate the need to write _any_ thunks or reducers to manage data fetching**. We encourage you to try it out and see if it can help simplify the data fetching code in your own apps!
+Redux Toolkit's [**RTK Query data fetching API**](../rtk-query/overview.mdx) is a purpose built data fetching and caching solution for Redux apps, and can **eliminate the need to write _any_ thunks or reducers to manage data fetching**. We encourage you to try it out and see if it can help simplify the data fetching code in your own apps!
 
 :::
 
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
index ac2ce9def6..711b3110b8 100644
--- a/docs/tsconfig.json
+++ b/docs/tsconfig.json
@@ -16,6 +16,7 @@
     "checkJs": true,
     "alwaysStrict": false,
     "baseUrl": "..",
+    "jsx": "preserve",
     "paths": {
       "@reduxjs/toolkit": ["src/index.ts"],
       "@reduxjs/toolkit/query": ["src/query/index.ts"],
diff --git a/docs/tutorials/overview.md b/docs/tutorials/overview.md
index 197e48677b..843c3b7da4 100644
--- a/docs/tutorials/overview.md
+++ b/docs/tutorials/overview.md
@@ -25,11 +25,11 @@ See these linked tutorials to learn how to use Redux Toolkit effectively.
 
 ## Redux Toolkit Quick Starts
 
-The [**Redux Toolkit Quick Start tutorial**](./quick-start.md) briefly shows how to add and use Redux Toolkit in a React application.
+The [**Redux Toolkit Quick Start tutorial**](./quick-start.mdx) briefly shows how to add and use Redux Toolkit in a React application.
 
 **If you just want the fastest way to get a basic example running, read the Quick Start tutorial.**
 
-We also have a [**TypeScript Quick Start tutorial**](./typescript.md) that briefly shows how to set up and use TypeScript with Redux Toolkit and React-Redux.
+We also have a [**TypeScript Quick Start tutorial**](./typescript.mdx) that briefly shows how to set up and use TypeScript with Redux Toolkit and React-Redux.
 
 ## Redux Essentials: A Real-World Example
 
diff --git a/docs/tutorials/quick-start.md b/docs/tutorials/quick-start.mdx
similarity index 78%
rename from docs/tutorials/quick-start.md
rename to docs/tutorials/quick-start.mdx
index a931214196..f2d2f43bc1 100644
--- a/docs/tutorials/quick-start.md
+++ b/docs/tutorials/quick-start.mdx
@@ -49,12 +49,17 @@ npm install @reduxjs/toolkit react-redux
 
 Create a file named `src/app/store.js`. Import the `configureStore` API from Redux Toolkit. We'll start by creating an empty Redux store, and exporting it:
 
-```js title="app/store.js"
+```ts title="app/store.ts"
 import { configureStore } from '@reduxjs/toolkit'
 
-export default configureStore({
+export const store = configureStore({
   reducer: {},
 })
+
+// Infer the `RootState` and `AppDispatch` types from the store itself
+export type RootState = ReturnType<typeof store.getState>
+// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
+export type AppDispatch = typeof store.dispatch
 ```
 
 This creates a Redux store, and also automatically configure the Redux DevTools extension so that you can inspect the store while developing.
@@ -63,13 +68,27 @@ This creates a Redux store, and also automatically configure the Redux DevTools
 
 Once the store is created, we can make it available to our React components by putting a React-Redux `<Provider>` around our application in `src/index.js`. Import the Redux store we just created, put a `<Provider>` around your `<App>`, and pass the store as a prop:
 
-```js title="index.js"
+```ts title="index.tsx"
+// file: App.tsx noEmit
+import React from 'react'
+export default function App() {
+  return <div>...</div>
+}
+
+// file: app/store.ts noEmit
+import { configureStore } from '@reduxjs/toolkit'
+
+export const store = configureStore({
+  reducer: {},
+})
+
+// file: index.tsx
 import React from 'react'
 import ReactDOM from 'react-dom'
 import './index.css'
 import App from './App'
 // highlight-start
-import store from './app/store'
+import { store } from './app/store'
 import { Provider } from 'react-redux'
 // highlight-end
 
@@ -90,14 +109,20 @@ Creating a slice requires a string name to identify the slice, an initial state
 
 Redux requires that [we write all state updates immutably, by making copies of data and updating the copies](https://redux.js.org/tutorials/fundamentals/part-2-concepts-data-flow#immutability). However, Redux Toolkit's `createSlice` and `createReducer` APIs use [Immer](https://immerjs.github.io/immer/) inside to allow us to [write "mutating" update logic that becomes correct immutable updates](https://redux.js.org/tutorials/fundamentals/part-8-modern-redux#immutable-updates-with-immer).
 
-```js title="features/counter/counterSlice.js"
-import { createSlice } from '@reduxjs/toolkit'
+```ts title="features/counter/counterSlice.ts"
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+
+interface CounterState {
+  value: number
+}
+
+const initialState: CounterState = {
+  value: 0,
+}
 
 export const counterSlice = createSlice({
   name: 'counter',
-  initialState: {
-    value: 0,
-  },
+  initialState,
   reducers: {
     increment: (state) => {
       // Redux Toolkit allows us to write "mutating" logic in reducers. It
@@ -109,7 +134,7 @@ export const counterSlice = createSlice({
     decrement: (state) => {
       state.value -= 1
     },
-    incrementByAmount: (state, action) => {
+    incrementByAmount: (state, action: PayloadAction<number>) => {
       state.value += action.payload
     },
   },
@@ -125,7 +150,19 @@ export default counterSlice.reducer
 
 Next, we need to import the reducer function from the counter slice and add it to our store. By defining a field inside the `reducers` parameter, we tell the store to use this slice reducer function to handle all updates to that state.
 
-```js title="app/store.js"
+```ts title="app/store.ts"
+// file: features/counter/counterSlice.ts noEmit
+import { createSlice } from '@reduxjs/toolkit'
+
+const counterSlice = createSlice({
+  name: 'counter',
+  initialState: {},
+  reducers: {},
+})
+
+export default counterSlice.reducer
+
+// file: app/store.ts
 import { configureStore } from '@reduxjs/toolkit'
 // highlight-next-line
 import counterReducer from '../features/counter/counterSlice'
@@ -142,13 +179,56 @@ export default configureStore({
 
 Now we can use the React-Redux hooks to let React components interact with the Redux store. We can read data from the store with `useSelector`, and dispatch actions using `useDispatch`. Create a `src/features/counter/Counter.js` file with a `<Counter>` component inside, then import that component into `App.js` and render it inside of `<App>`.
 
-```jsx title="features/counter/Counter.js"
+```ts title="features/counter/Counter.tsx"
+// file: features/counter/counterSlice.ts noEmit
+import { createSlice } from '@reduxjs/toolkit'
+const counterSlice = createSlice({
+  name: 'counter',
+  initialState: {
+    value: 0,
+  },
+  reducers: {
+    increment: (state) => {},
+    decrement: (state) => {},
+  },
+})
+
+export const { increment, decrement } = counterSlice.actions
+export default counterSlice.reducer
+
+// file: app/store.ts noEmit
+import { configureStore } from '@reduxjs/toolkit'
+import counterReducer from '../features/counter/counterSlice'
+export const store = configureStore({
+  reducer: {
+    counter: counterReducer,
+  },
+})
+export type RootState = ReturnType<typeof store.getState>
+
+// file: index.tsx noEmit
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { Counter } from './features/counter/Counter'
+import { store } from './app/store'
+import { Provider } from 'react-redux'
+
+ReactDOM.render(
+  // highlight-next-line
+  <Provider store={store}>
+    <Counter />
+  </Provider>,
+  document.getElementById('root')
+)
+
+// file: features/counter/Counter.tsx
 import React from 'react'
+import { RootState } from '../../app/store'
 import { useSelector, useDispatch } from 'react-redux'
 import { decrement, increment } from './counterSlice'
 
 export function Counter() {
-  const count = useSelector((state) => state.counter.value)
+  const count = useSelector((state: RootState) => state.counter.value)
   const dispatch = useDispatch()
 
   return (
@@ -208,7 +288,7 @@ The counter example app shown here is also the
 Here's the complete counter application as a running CodeSandbox:
 
 <iframe
-  class="codesandbox"
+  className="codesandbox"
   src="https://codesandbox.io/embed/github/reduxjs/redux-essentials-counter-example/tree/master/?fontsize=14&hidenavigation=1&module=%2Fsrc%2Ffeatures%2Fcounter%2FcounterSlice.js&theme=dark&runonclick=1"
   title="redux-essentials-example"
   allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
diff --git a/docs/tutorials/rtk-query.mdx b/docs/tutorials/rtk-query.mdx
index 3ee5554c69..1a39c4eced 100644
--- a/docs/tutorials/rtk-query.mdx
+++ b/docs/tutorials/rtk-query.mdx
@@ -128,13 +128,27 @@ setupListeners(store.dispatch)
 
 If you haven't already done so, follow the standard pattern for providing the Redux store to the rest of your React application component tree:
 
-```tsx title="src/index.tsx"
+```ts title="src/index.tsx"
+// file: App.tsx noEmit
+import React from 'react'
+export default function App() {
+  return <div>...</div>
+}
+
+// file: app/store.ts noEmit
+import { configureStore } from '@reduxjs/toolkit'
+
+export default configureStore({
+  reducer: {},
+})
+
+// file: index.tsx
 import * as React from 'react'
 import { render } from 'react-dom'
 import { Provider } from 'react-redux'
 
 import App from './App'
-import { store } from './store'
+import store from './app/store'
 
 const rootElement = document.getElementById('root')
 render(
@@ -149,7 +163,23 @@ render(
 
 Once a service has been defined, you can import the hooks to make a request.
 
-```tsx title="src/App.tsx" no-transpile
+```ts title="src/App.tsx"
+// file: services/pokemon.ts noEmit
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
+
+export const pokemonApi = createApi({
+  reducerPath: 'pokemonApi',
+  baseQuery: fetchBaseQuery({ baseUrl: 'https://pokeapi.co/api/v2/' }),
+  endpoints: (builder) => ({
+    getPokemonByName: builder.query({
+      query: (name: string) => `pokemon/${name}`,
+    }),
+  }),
+})
+
+export const { useGetPokemonByNameQuery } = pokemonApi
+
+// file: App.tsx
 import * as React from 'react'
 // highlight-next-line
 import { useGetPokemonByNameQuery } from './services/pokemon'
diff --git a/docs/tutorials/typescript.md b/docs/tutorials/typescript.mdx
similarity index 85%
rename from docs/tutorials/typescript.md
rename to docs/tutorials/typescript.mdx
index e26906bb4f..e458fec4b7 100644
--- a/docs/tutorials/typescript.md
+++ b/docs/tutorials/typescript.mdx
@@ -47,14 +47,9 @@ Since those are types, it's safe to export them directly from your store setup f
 
 ```ts title="app/store.ts"
 import { configureStore } from '@reduxjs/toolkit'
-// ...
 
 export const store = configureStore({
-  reducer: {
-    posts: postsReducer,
-    comments: commentsReducer,
-    users: usersReducer,
-  },
+  reducer: {},
 })
 
 // highlight-start
@@ -75,6 +70,15 @@ While it's possible to import the `RootState` and `AppDispatch` types into each
 Since these are actual variables, not types, it's important to define them in a separate file such as `app/hooks.ts`, not the store setup file. This allows you to import them into any component file that needs to use the hooks, and avoids potential circular import dependency issues.
 
 ```ts title="app/hooks.ts"
+// file: store.ts noEmit
+import { configureStore } from '@reduxjs/toolkit'
+export const store = configureStore({
+  reducer: {},
+})
+export type RootState = ReturnType<typeof store.getState>
+export type AppDispatch = typeof store.dispatch
+
+// file: hooks.ts
 import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
 import type { RootState, AppDispatch } from './store'
 
@@ -96,6 +100,14 @@ All generated actions should be defined using the `PayloadAction<T>` type from R
 You can safely import the `RootState` type from the store file here. It's a circular import, but the TypeScript compiler can correctly handle that for types. This may be needed for use cases like writing selector functions.
 
 ```ts title="features/counter/counterSlice.ts"
+// file: app/store.ts noEmit
+import { configureStore } from '@reduxjs/toolkit'
+const store = configureStore({
+  reducer: {},
+})
+export type RootState = ReturnType<typeof store.getState>
+
+// file: features/counter/counterSlice.ts
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 import type { RootState } from '../../app/store'
 
@@ -144,6 +156,10 @@ The generated action creators will be correctly typed to accept a `payload` argu
 In some cases, [TypeScript may unnecessarily tighten the type of the initial state](https://github.com/reduxjs/redux-toolkit/pull/827). If that happens, you can work around it by casting the initial state using `as`, instead of declaring the type of the variable:
 
 ```ts
+interface CounterState {
+  value: number
+}
+
 // Workaround: cast state instead of declaring variable type
 const initialState = {
   value: 0,
@@ -154,13 +170,27 @@ const initialState = {
 
 In component files, import the pre-typed hooks instead of the standard hooks from React-Redux.
 
-```tsx title="features/counter/Counter.tsx"
-import React, { useState } from 'react'
+```ts title="features/counter/Counter.tsx"
+// file: app/store.ts noEmit
+import { configureStore } from '@reduxjs/toolkit'
+export const store = configureStore({
+  reducer: {},
+})
+export type RootState = ReturnType<typeof store.getState>
+export type AppDispatch = typeof store.dispatch
 
-// highlight-next-line
-import { useAppSelector, useAppDispatch } from 'app/hooks'
+// file: app/hooks.ts noEmit
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
+import type { RootState, AppDispatch } from './store'
 
-import { decrement, increment } from './counterSlice'
+export const useAppDispatch = () => useDispatch<AppDispatch>()
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
+
+// file: features/counter/Counter.tsx
+import React from 'react'
+
+// highlight-next-line
+import { useAppSelector, useAppDispatch } from '../../app/hooks'
 
 export function Counter() {
   // highlight-start
diff --git a/docs/usage/usage-with-typescript.md b/docs/usage/usage-with-typescript.md
index d8e0559c27..009ec6c7b8 100644
--- a/docs/usage/usage-with-typescript.md
+++ b/docs/usage/usage-with-typescript.md
@@ -21,7 +21,7 @@ Redux Toolkit is written in TypeScript, and its API is designed to enable great
 
 This page provides specific details for each of the different APIs included in Redux Toolkit and how to type them correctly with TypeScript.
 
-**See the [TypeScript Quick Start tutorial page](../tutorials/typescript.md) for a brief overview of how to set up and use Redux Toolkit and React Redux to work with TypeScript**.
+**See the [TypeScript Quick Start tutorial page](../tutorials/typescript.mdx) for a brief overview of how to set up and use Redux Toolkit and React Redux to work with TypeScript**.
 
 :::info
 
@@ -31,7 +31,7 @@ If you encounter any problems with the types that are not described on this page
 
 ## `configureStore`
 
-The basics of using `configureStore` are shown in [TypeScript Quick Start tutorial page](../tutorials/typescript.md). Here are some additional details that you might find useful.
+The basics of using `configureStore` are shown in [TypeScript Quick Start tutorial page](../tutorials/typescript.mdx). Here are some additional details that you might find useful.
 
 ### Getting the `State` type
 
diff --git a/website/package.json b/website/package.json
index ea9e0e422d..44fcb25a8d 100644
--- a/website/package.json
+++ b/website/package.json
@@ -14,7 +14,7 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-lite-youtube-embed": "^2.0.3",
-    "remark-typescript-tools": "^1.0.6",
+    "remark-typescript-tools": "^1.0.8",
     "typescript": "^4.2.4"
   },
   "browserslist": {

From 00224c43c3170fe2a6f7be4c06b82598832f586b Mon Sep 17 00:00:00 2001
From: Prince Raj Roy <princerajroy313@gmail.com>
Date: Tue, 29 Jun 2021 21:34:59 +0530
Subject: [PATCH 2/4] Fix filenames

---
 docs/tutorials/quick-start.mdx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/tutorials/quick-start.mdx b/docs/tutorials/quick-start.mdx
index f2d2f43bc1..411ec213c1 100644
--- a/docs/tutorials/quick-start.mdx
+++ b/docs/tutorials/quick-start.mdx
@@ -49,7 +49,7 @@ npm install @reduxjs/toolkit react-redux
 
 Create a file named `src/app/store.js`. Import the `configureStore` API from Redux Toolkit. We'll start by creating an empty Redux store, and exporting it:
 
-```ts title="app/store.ts"
+```ts title="app/store.js"
 import { configureStore } from '@reduxjs/toolkit'
 
 export const store = configureStore({
@@ -68,7 +68,7 @@ This creates a Redux store, and also automatically configure the Redux DevTools
 
 Once the store is created, we can make it available to our React components by putting a React-Redux `<Provider>` around our application in `src/index.js`. Import the Redux store we just created, put a `<Provider>` around your `<App>`, and pass the store as a prop:
 
-```ts title="index.tsx"
+```ts title="index.js"
 // file: App.tsx noEmit
 import React from 'react'
 export default function App() {
@@ -109,7 +109,7 @@ Creating a slice requires a string name to identify the slice, an initial state
 
 Redux requires that [we write all state updates immutably, by making copies of data and updating the copies](https://redux.js.org/tutorials/fundamentals/part-2-concepts-data-flow#immutability). However, Redux Toolkit's `createSlice` and `createReducer` APIs use [Immer](https://immerjs.github.io/immer/) inside to allow us to [write "mutating" update logic that becomes correct immutable updates](https://redux.js.org/tutorials/fundamentals/part-8-modern-redux#immutable-updates-with-immer).
 
-```ts title="features/counter/counterSlice.ts"
+```ts title="features/counter/counterSlice.js"
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 
 interface CounterState {
@@ -150,7 +150,7 @@ export default counterSlice.reducer
 
 Next, we need to import the reducer function from the counter slice and add it to our store. By defining a field inside the `reducers` parameter, we tell the store to use this slice reducer function to handle all updates to that state.
 
-```ts title="app/store.ts"
+```ts title="app/store.js"
 // file: features/counter/counterSlice.ts noEmit
 import { createSlice } from '@reduxjs/toolkit'
 
@@ -179,7 +179,7 @@ export default configureStore({
 
 Now we can use the React-Redux hooks to let React components interact with the Redux store. We can read data from the store with `useSelector`, and dispatch actions using `useDispatch`. Create a `src/features/counter/Counter.js` file with a `<Counter>` component inside, then import that component into `App.js` and render it inside of `<App>`.
 
-```ts title="features/counter/Counter.tsx"
+```ts title="features/counter/Counter.js"
 // file: features/counter/counterSlice.ts noEmit
 import { createSlice } from '@reduxjs/toolkit'
 const counterSlice = createSlice({

From 8edf02c51190e7c243440c16360164d9f7e27b63 Mon Sep 17 00:00:00 2001
From: Prince Raj Roy <princerajroy313@gmail.com>
Date: Tue, 29 Jun 2021 22:02:39 +0530
Subject: [PATCH 3/4] Fix broken link

---
 docs/api/createAsyncThunk.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/api/createAsyncThunk.mdx b/docs/api/createAsyncThunk.mdx
index ed76bc179e..068e525d87 100644
--- a/docs/api/createAsyncThunk.mdx
+++ b/docs/api/createAsyncThunk.mdx
@@ -19,7 +19,7 @@ It does not generate any reducer functions, since it does not know what data you
 
 :::tip
 
-Redux Toolkit's [**RTK Query data fetching API**](../rtk-query/overview.mdx) is a purpose built data fetching and caching solution for Redux apps, and can **eliminate the need to write _any_ thunks or reducers to manage data fetching**. We encourage you to try it out and see if it can help simplify the data fetching code in your own apps!
+Redux Toolkit's [**RTK Query data fetching API**](../rtk-query/overview.md) is a purpose built data fetching and caching solution for Redux apps, and can **eliminate the need to write _any_ thunks or reducers to manage data fetching**. We encourage you to try it out and see if it can help simplify the data fetching code in your own apps!
 
 :::
 

From cccb19a4cc09673a45e9d476c4f9d9bb928c2d5f Mon Sep 17 00:00:00 2001
From: Prince Raj Roy <princerajroy313@gmail.com>
Date: Wed, 30 Jun 2021 11:12:42 +0530
Subject: [PATCH 4/4] Restore TS Quick Start to previous version

---
 docs/tutorials/overview.md                    |  2 +-
 .../{typescript.mdx => typescript.md}         | 52 ++++---------------
 docs/usage/usage-with-typescript.md           |  4 +-
 website/package.json                          |  2 +-
 4 files changed, 15 insertions(+), 45 deletions(-)
 rename docs/tutorials/{typescript.mdx => typescript.md} (85%)

diff --git a/docs/tutorials/overview.md b/docs/tutorials/overview.md
index 843c3b7da4..55b8622906 100644
--- a/docs/tutorials/overview.md
+++ b/docs/tutorials/overview.md
@@ -29,7 +29,7 @@ The [**Redux Toolkit Quick Start tutorial**](./quick-start.mdx) briefly shows ho
 
 **If you just want the fastest way to get a basic example running, read the Quick Start tutorial.**
 
-We also have a [**TypeScript Quick Start tutorial**](./typescript.mdx) that briefly shows how to set up and use TypeScript with Redux Toolkit and React-Redux.
+We also have a [**TypeScript Quick Start tutorial**](./typescript.md) that briefly shows how to set up and use TypeScript with Redux Toolkit and React-Redux.
 
 ## Redux Essentials: A Real-World Example
 
diff --git a/docs/tutorials/typescript.mdx b/docs/tutorials/typescript.md
similarity index 85%
rename from docs/tutorials/typescript.mdx
rename to docs/tutorials/typescript.md
index e458fec4b7..e26906bb4f 100644
--- a/docs/tutorials/typescript.mdx
+++ b/docs/tutorials/typescript.md
@@ -47,9 +47,14 @@ Since those are types, it's safe to export them directly from your store setup f
 
 ```ts title="app/store.ts"
 import { configureStore } from '@reduxjs/toolkit'
+// ...
 
 export const store = configureStore({
-  reducer: {},
+  reducer: {
+    posts: postsReducer,
+    comments: commentsReducer,
+    users: usersReducer,
+  },
 })
 
 // highlight-start
@@ -70,15 +75,6 @@ While it's possible to import the `RootState` and `AppDispatch` types into each
 Since these are actual variables, not types, it's important to define them in a separate file such as `app/hooks.ts`, not the store setup file. This allows you to import them into any component file that needs to use the hooks, and avoids potential circular import dependency issues.
 
 ```ts title="app/hooks.ts"
-// file: store.ts noEmit
-import { configureStore } from '@reduxjs/toolkit'
-export const store = configureStore({
-  reducer: {},
-})
-export type RootState = ReturnType<typeof store.getState>
-export type AppDispatch = typeof store.dispatch
-
-// file: hooks.ts
 import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
 import type { RootState, AppDispatch } from './store'
 
@@ -100,14 +96,6 @@ All generated actions should be defined using the `PayloadAction<T>` type from R
 You can safely import the `RootState` type from the store file here. It's a circular import, but the TypeScript compiler can correctly handle that for types. This may be needed for use cases like writing selector functions.
 
 ```ts title="features/counter/counterSlice.ts"
-// file: app/store.ts noEmit
-import { configureStore } from '@reduxjs/toolkit'
-const store = configureStore({
-  reducer: {},
-})
-export type RootState = ReturnType<typeof store.getState>
-
-// file: features/counter/counterSlice.ts
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 import type { RootState } from '../../app/store'
 
@@ -156,10 +144,6 @@ The generated action creators will be correctly typed to accept a `payload` argu
 In some cases, [TypeScript may unnecessarily tighten the type of the initial state](https://github.com/reduxjs/redux-toolkit/pull/827). If that happens, you can work around it by casting the initial state using `as`, instead of declaring the type of the variable:
 
 ```ts
-interface CounterState {
-  value: number
-}
-
 // Workaround: cast state instead of declaring variable type
 const initialState = {
   value: 0,
@@ -170,27 +154,13 @@ const initialState = {
 
 In component files, import the pre-typed hooks instead of the standard hooks from React-Redux.
 
-```ts title="features/counter/Counter.tsx"
-// file: app/store.ts noEmit
-import { configureStore } from '@reduxjs/toolkit'
-export const store = configureStore({
-  reducer: {},
-})
-export type RootState = ReturnType<typeof store.getState>
-export type AppDispatch = typeof store.dispatch
-
-// file: app/hooks.ts noEmit
-import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
-import type { RootState, AppDispatch } from './store'
-
-export const useAppDispatch = () => useDispatch<AppDispatch>()
-export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
-
-// file: features/counter/Counter.tsx
-import React from 'react'
+```tsx title="features/counter/Counter.tsx"
+import React, { useState } from 'react'
 
 // highlight-next-line
-import { useAppSelector, useAppDispatch } from '../../app/hooks'
+import { useAppSelector, useAppDispatch } from 'app/hooks'
+
+import { decrement, increment } from './counterSlice'
 
 export function Counter() {
   // highlight-start
diff --git a/docs/usage/usage-with-typescript.md b/docs/usage/usage-with-typescript.md
index 009ec6c7b8..d8e0559c27 100644
--- a/docs/usage/usage-with-typescript.md
+++ b/docs/usage/usage-with-typescript.md
@@ -21,7 +21,7 @@ Redux Toolkit is written in TypeScript, and its API is designed to enable great
 
 This page provides specific details for each of the different APIs included in Redux Toolkit and how to type them correctly with TypeScript.
 
-**See the [TypeScript Quick Start tutorial page](../tutorials/typescript.mdx) for a brief overview of how to set up and use Redux Toolkit and React Redux to work with TypeScript**.
+**See the [TypeScript Quick Start tutorial page](../tutorials/typescript.md) for a brief overview of how to set up and use Redux Toolkit and React Redux to work with TypeScript**.
 
 :::info
 
@@ -31,7 +31,7 @@ If you encounter any problems with the types that are not described on this page
 
 ## `configureStore`
 
-The basics of using `configureStore` are shown in [TypeScript Quick Start tutorial page](../tutorials/typescript.mdx). Here are some additional details that you might find useful.
+The basics of using `configureStore` are shown in [TypeScript Quick Start tutorial page](../tutorials/typescript.md). Here are some additional details that you might find useful.
 
 ### Getting the `State` type
 
diff --git a/website/package.json b/website/package.json
index 44fcb25a8d..04764aa1d6 100644
--- a/website/package.json
+++ b/website/package.json
@@ -15,7 +15,7 @@
     "react-dom": "17.0.2",
     "react-lite-youtube-embed": "^2.0.3",
     "remark-typescript-tools": "^1.0.8",
-    "typescript": "^4.2.4"
+    "typescript": "~4.2.4"
   },
   "browserslist": {
     "production": [