Merge branch 'master' into create-slice-creators

Author: EskiMojo14

.github/workflows/test-codegen.yml

@@ -22,6 +22,7 @@ jobs:
           filters: |
             codegen:
               - 'packages/rtk-query-codegen-openapi/**'
+              - 'yarn.lock'
 
   build:
     needs: changes

.github/workflows/tests.yml

@@ -20,6 +20,7 @@ jobs:
               - 'packages/toolkit/**'
               - 'examples/publish-ci/**'
               - '.github/workflows/tests.yml'
+              - 'yarn.lock'
 
   build:
     needs: changes

docs/api/autoBatchEnhancer.mdx

@@ -99,7 +99,7 @@ Any action that is tagged with `action.meta[SHOULD_AUTOBATCH] = true` will be tr
 
 - `{type: 'raf'}`: queues using `requestAnimationFrame` (default)
 - `{type: 'tick'}`: queues using `queueMicrotask`
-- `{type: 'timer, timeout: number}`: queues using `setTimeout`
+- `{type: 'timer', timeout: number}`: queues using `setTimeout`
 - `{type: 'callback', queueNotification: (notify: () => void) => void}`: lets you provide your own callback, such as a debounced or throttled function
 
 The default behavior is to queue the notifications using `requestAnimationFrame`.

docs/tutorials/typescript.md

@@ -76,13 +76,12 @@ Since these are actual variables, not types, it's important to define them in a
 
 ```ts title="app/hooks.ts"
 import { useDispatch, useSelector } from 'react-redux'
-import type { TypedUseSelectorHook } from 'react-redux'
 import type { RootState, AppDispatch } from './store'
 
 // highlight-start
 // Use throughout your app instead of plain `useDispatch` and `useSelector`
-export const useAppDispatch: () => AppDispatch = useDispatch
-export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>()
+export const useAppSelector = useSelector.withTypes<RootState>()
 // highlight-end
 ```
 

docs/usage/migrating-rtk-2.md

@@ -448,7 +448,6 @@ React Redux supports creating `hooks` (and `connect`) with a [custom context](ht
 import { createContext } from 'react'
 import {
   ReactReduxContextValue,
-  TypedUseSelectorHook,
   createDispatchHook,
   createSelectorHook,
   createStoreHook,
@@ -458,10 +457,9 @@ import { AppStore, RootState, AppDispatch } from './store'
 // highlight-next-line
 const context = createContext<ReactReduxContextValue>(null as any)
 
-export const useStore: () => AppStore = createStoreHook(context)
-export const useDispatch: () => AppDispatch = createDispatchHook(context)
-export const useSelector: TypedUseSelectorHook<RootState> =
-  createSelectorHook(context)
+export const useStore = createStoreHook(context).withTypes<AppStore>()
+export const useDispatch = createDispatchHook(context).withTypes<AppDispatch>()
+export const useSelector = createSelectorHook(context).withTypes<RootState>()
 ```
 
 In v9, the types now match the runtime behaviour. The context is typed to hold `ReactReduxContextValue | null`, and the hooks know that if they receive `null` they'll throw an error so it doesn't affect the return type.
@@ -472,7 +470,6 @@ The above example now becomes:
 import { createContext } from 'react'
 import {
   ReactReduxContextValue,
-  TypedUseSelectorHook,
   createDispatchHook,
   createSelectorHook,
   createStoreHook,
@@ -482,10 +479,9 @@ import { AppStore, RootState, AppDispatch } from './store'
 // highlight-next-line
 const context = createContext<ReactReduxContextValue | null>(null)
 
-export const useStore: () => AppStore = createStoreHook(context)
-export const useDispatch: () => AppDispatch = createDispatchHook(context)
-export const useSelector: TypedUseSelectorHook<RootState> =
-  createSelectorHook(context)
+export const useStore = createStoreHook(context).withTypes<AppStore>()
+export const useDispatch = createDispatchHook(context).withTypes<AppDispatch>()
+export const useSelector = createSelectorHook(context).withTypes<RootState>()
 ```
 
 </div>

docs/usage/migrating-to-modern-redux.mdx

@@ -1110,13 +1110,13 @@ Per [our standard TypeScript setup and usage guidelines](../tutorials/typescript
 First, set up the hooks:
 
 ```ts no-transpile title="src/app/hooks.ts"
-import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import type { RootState, AppDispatch } from './store'
 
 // highlight-start
 // Use throughout your app instead of plain `useDispatch` and `useSelector`
-export const useAppDispatch: () => AppDispatch = useDispatch
-export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>()
+export const useAppSelector = useSelector.withTypes<RootState>()
 // highlight-end
 ```
 

docs/usage/nextjs.mdx

@@ -135,14 +135,13 @@ export type AppDispatch = AppStore['dispatch']
 
 // file: lib/hooks.ts
 import { useDispatch, useSelector, useStore } from 'react-redux'
-import type { TypedUseSelectorHook } from 'react-redux'
 import type { RootState, AppDispatch, AppStore } from './store'
 
 // highlight-start
 // Use throughout your app instead of plain `useDispatch` and `useSelector`
-export const useAppDispatch: () => AppDispatch = useDispatch
-export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
-export const useAppStore: () => AppStore = useStore
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>()
+export const useAppSelector = useSelector.withTypes<RootState>()
+export const useAppStore = useStore.withTypes<AppStore>()
 // highlight-end
 ```
 
@@ -330,14 +329,13 @@ export type AppDispatch = AppStore['dispatch']
 
 // file: lib/hooks.ts noEmit
 import { useDispatch, useSelector, useStore } from 'react-redux'
-import type { TypedUseSelectorHook } from 'react-redux'
 import type { RootState, AppDispatch, AppStore } from './store'
 
 // highlight-start
 // Use throughout your app instead of plain `useDispatch` and `useSelector`
-export const useAppDispatch: () => AppDispatch = useDispatch
-export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
-export const useAppStore: () => AppStore = useStore
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>()
+export const useAppSelector = useSelector.withTypes<RootState>()
+export const useAppStore = useStore.withTypes<AppStore>()
 // highlight-end
 
 /* prettier-ignore */

docs/usage/usage-with-typescript.md

@@ -35,7 +35,7 @@ The basics of using `configureStore` are shown in [TypeScript Quick Start tutori
 
 ### Getting the `State` type
 
-The easiest way of getting the `State` type is to define the root reducer in advance and extract its `ReturnType`.  
+The easiest way of getting the `State` type is to define the root reducer in advance and extract its `ReturnType`.
 It is recommended to give the type a different name like `RootState` to prevent confusion, as the type name `State` is usually overused.
 
 ```typescript
@@ -89,7 +89,7 @@ const store = configureStore({
 
 // highlight-start
 export type AppDispatch = typeof store.dispatch
-export const useAppDispatch: () => AppDispatch = useDispatch // Export a hook that can be reused to resolve types
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>() // Export a hook that can be reused to resolve types
 // highlight-end
 
 export default store

errors.json

@@ -47,4 +47,4 @@
   "45": "context.exposeAction cannot be called twice for the same reducer definition: reducerName",
   "46": "context.exposeCaseReducer cannot be called twice for the same reducer definition: reducerName",
   "47": "Could not find \"\" slice in state. In order for slice creators to use \\`context.selectSlice\\`, the slice must be nested in the state under its reducerPath: \"\""
-}
+}

package.json

@@ -50,7 +50,7 @@
     "@babel/types": "7.19.3",
     "esbuild": "0.19.7",
     "jest-snapshot": "29.3.1",
-    "react-redux": "npm:8.0.2",
+    "react-redux": "npm:9.1.0",
     "react": "npm:18.2.0",
     "react-dom": "npm:18.2.0",
     "resolve": "1.22.1",