Merge branch 'master' into create-slice-creators

EskiMojo14 · EskiMojo14 · commit 0d55413ae86c · 2024-04-05T21:02:43.000+01:00
diff --git a/.github/workflows/test-codegen.yml b/.github/workflows/test-codegen.yml
@@ -22,6 +22,7 @@ jobs:
           filters: |
             codegen:
               - 'packages/rtk-query-codegen-openapi/**'
+              - 'yarn.lock'
 
   build:
     needs: changes
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
@@ -20,6 +20,7 @@ jobs:
               - 'packages/toolkit/**'
               - 'examples/publish-ci/**'
               - '.github/workflows/tests.yml'
+              - 'yarn.lock'
 
   build:
     needs: changes
diff --git a/docs/api/autoBatchEnhancer.mdx b/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`.
diff --git a/docs/tutorials/typescript.md b/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
 ```
 
diff --git a/docs/usage/migrating-rtk-2.md b/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>
diff --git a/docs/usage/migrating-to-modern-redux.mdx b/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
 ```
 
diff --git a/docs/usage/nextjs.mdx b/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 */
diff --git a/docs/usage/usage-with-typescript.md b/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
diff --git a/errors.json b/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: \"\""
-}
+}
diff --git a/package.json b/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",
diff --git a/packages/toolkit/package.json b/packages/toolkit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@reduxjs/toolkit",
-  "version": "2.2.1",
+  "version": "2.2.3",
   "description": "The official, opinionated, batteries-included toolset for efficient Redux development",
   "author": "Mark Erikson <mark@isquaredsoftware.com>",
   "license": "MIT",
diff --git a/packages/toolkit/src/autoBatchEnhancer.ts b/packages/toolkit/src/autoBatchEnhancer.ts
@@ -44,7 +44,7 @@ export type AutoBatchOptions =
  * By default, it will queue a notification for the end of the event loop tick.
  * However, you can pass several other options to configure the behavior:
  * - `{type: 'tick'}`: queues using `queueMicrotask`
- * - `{type: 'timer, timeout: number}`: queues using `setTimeout`
+ * - `{type: 'timer', timeout: number}`: queues using `setTimeout`
  * - `{type: 'raf'}`: queues using `requestAnimationFrame` (default)
  * - `{type: 'callback', queueNotification: (notify: () => void) => void}`: lets you provide your own callback
  *
diff --git a/packages/toolkit/src/dynamicMiddleware/react/index.ts b/packages/toolkit/src/dynamicMiddleware/react/index.ts
@@ -54,9 +54,10 @@ interface ReactDynamicMiddlewareInstance<
   Dispatch extends ReduxDispatch<UnknownAction> = ReduxDispatch<UnknownAction>,
 > extends DynamicMiddlewareInstance<State, Dispatch> {
   createDispatchWithMiddlewareHookFactory: (
-    context?: Context<
-      ReactReduxContextValue<State, ActionFromDispatch<Dispatch>>
-    >,
+    context?: Context<ReactReduxContextValue<
+      State,
+      ActionFromDispatch<Dispatch>
+    > | null>,
   ) => CreateDispatchWithMiddlewareHook<State, Dispatch>
   createDispatchWithMiddlewareHook: CreateDispatchWithMiddlewareHook<
     State,
@@ -71,12 +72,12 @@ export const createDynamicMiddleware = <
   const instance = cDM<State, Dispatch>()
   const createDispatchWithMiddlewareHookFactory = (
     // @ts-ignore
-    context: Context<
-      ReactReduxContextValue<State, ActionFromDispatch<Dispatch>>
-    > = ReactReduxContext,
+    context: Context<ReactReduxContextValue<
+      State,
+      ActionFromDispatch<Dispatch>
+    > | null> = ReactReduxContext,
   ) => {
     const useDispatch =
-      // @ts-ignore
       context === ReactReduxContext
         ? useDefaultDispatch
         : createDispatchHook(context)
diff --git a/packages/toolkit/src/dynamicMiddleware/tests/react.test-d.ts b/packages/toolkit/src/dynamicMiddleware/tests/react.test-d.ts
@@ -15,7 +15,7 @@ const typedInstance = createDynamicMiddleware<number, AppDispatch>()
 declare const compatibleMiddleware: Middleware<{}, number, AppDispatch>
 declare const incompatibleMiddleware: Middleware<{}, string, AppDispatch>
 
-declare const customContext: Context<ReactReduxContextValue>
+declare const customContext: Context<ReactReduxContextValue | null>
 
 declare const addedMiddleware: Middleware<(n: 2) => 2>
 
diff --git a/packages/toolkit/src/dynamicMiddleware/tests/react.test.tsx b/packages/toolkit/src/dynamicMiddleware/tests/react.test.tsx
@@ -71,7 +71,7 @@ describe('createReactDynamicMiddleware', () => {
           gDM().prepend(dynamicInstance.middleware).concat(staticMiddleware),
       })
 
-      const context = React.createContext<ReactReduxContextValue>(null as any)
+      const context = React.createContext<ReactReduxContextValue | null>(null)
 
       const createDispatchWithMiddlewareHook =
         dynamicInstance.createDispatchWithMiddlewareHookFactory(context)
diff --git a/packages/toolkit/src/query/core/buildMiddleware/cacheCollection.ts b/packages/toolkit/src/query/core/buildMiddleware/cacheCollection.ts
@@ -1,3 +1,4 @@
+import { isAnyOf } from '@reduxjs/toolkit'
 import type { BaseQueryFn } from '../../baseQueryTypes'
 import type { QueryDefinition } from '../../endpointDefinitions'
 import type { ConfigState, QueryCacheKey } from '../apiState'
@@ -49,11 +50,18 @@ export const THIRTY_TWO_BIT_MAX_TIMER_SECONDS = 2_147_483_647 / 1_000 - 1
 export const buildCacheCollectionHandler: InternalHandlerBuilder = ({
   reducerPath,
   api,
+  queryThunk,
   context,
   internalState,
 }) => {
   const { removeQueryResult, unsubscribeQueryResult } = api.internalActions
 
+  const canTriggerUnsubscribe = isAnyOf(
+    unsubscribeQueryResult.match,
+    queryThunk.fulfilled,
+    queryThunk.rejected
+  )
+
   function anySubscriptionsRemainingForKey(queryCacheKey: string) {
     const subscriptions = internalState.currentSubscriptions[queryCacheKey]
     return !!subscriptions && !isObjectEmpty(subscriptions)
@@ -66,9 +74,11 @@ export const buildCacheCollectionHandler: InternalHandlerBuilder = ({
     mwApi,
     internalState,
   ) => {
-    if (unsubscribeQueryResult.match(action)) {
+    if (canTriggerUnsubscribe(action)) {
       const state = mwApi.getState()[reducerPath]
-      const { queryCacheKey } = action.payload
+      const { queryCacheKey } = unsubscribeQueryResult.match(action)
+        ? action.payload
+        : action.meta.arg
 
       handleUnsubscribe(
         queryCacheKey,
diff --git a/packages/toolkit/src/query/react/ApiProvider.tsx b/packages/toolkit/src/query/react/ApiProvider.tsx
@@ -32,11 +32,11 @@ import type { Api } from '@reduxjs/toolkit/query'
  * conflict with each other - please use the traditional redux setup
  * in that case.
  */
-export function ApiProvider<A extends Api<any, {}, any, any>>(props: {
+export function ApiProvider(props: {
   children: any
-  api: A
+  api: Api<any, {}, any, any>
   setupListeners?: Parameters<typeof setupListeners>[1] | false
-  context?: Context<ReactReduxContextValue>
+  context?: Context<ReactReduxContextValue | null>
 }) {
   const context = props.context || ReactReduxContext
   const existingContext = useContext(context)
diff --git a/packages/toolkit/src/query/tests/apiProvider.test.tsx b/packages/toolkit/src/query/tests/apiProvider.test.tsx
@@ -1,9 +1,21 @@
 import { configureStore } from '@reduxjs/toolkit'
-import { ApiProvider, createApi } from '@reduxjs/toolkit/query/react'
+import {
+  ApiProvider,
+  buildCreateApi,
+  coreModule,
+  createApi,
+  reactHooksModule,
+} from '@reduxjs/toolkit/query/react'
 import { fireEvent, render, waitFor } from '@testing-library/react'
 import { delay } from 'msw'
 import * as React from 'react'
-import { Provider } from 'react-redux'
+import type { ReactReduxContextValue } from 'react-redux'
+import {
+  Provider,
+  createDispatchHook,
+  createSelectorHook,
+  createStoreHook,
+} from 'react-redux'
 
 const api = createApi({
   baseQuery: async (arg: any) => {
@@ -70,4 +82,83 @@ describe('ApiProvider', () => {
       `[Error: Existing Redux context detected. If you already have a store set up, please use the traditional Redux setup.]`,
     )
   })
+  test('ApiProvider allows a custom context', async () => {
+    const customContext = React.createContext<ReactReduxContextValue | null>(
+      null,
+    )
+
+    const createApiWithCustomContext = buildCreateApi(
+      coreModule(),
+      reactHooksModule({
+        hooks: {
+          useStore: createStoreHook(customContext),
+          useSelector: createSelectorHook(customContext),
+          useDispatch: createDispatchHook(customContext),
+        },
+      }),
+    )
+
+    const customApi = createApiWithCustomContext({
+      baseQuery: async (arg: any) => {
+        await delay(150)
+        return { data: arg?.body ? arg.body : null }
+      },
+      endpoints: (build) => ({
+        getUser: build.query<any, number>({
+          query: (arg) => arg,
+        }),
+        updateUser: build.mutation<any, { name: string }>({
+          query: (update) => ({ body: update }),
+        }),
+      }),
+    })
+
+    function User() {
+      const [value, setValue] = React.useState(0)
+
+      const { isFetching } = customApi.endpoints.getUser.useQuery(1, {
+        skip: value < 1,
+      })
+
+      return (
+        <div>
+          <div data-testid="isFetching">{String(isFetching)}</div>
+          <button onClick={() => setValue((val) => val + 1)}>
+            Increment value
+          </button>
+        </div>
+      )
+    }
+
+    const { getByText, getByTestId } = render(
+      <ApiProvider api={customApi} context={customContext}>
+        <User />
+      </ApiProvider>,
+    )
+
+    await waitFor(() =>
+      expect(getByTestId('isFetching').textContent).toBe('false'),
+    )
+    fireEvent.click(getByText('Increment value'))
+    await waitFor(() =>
+      expect(getByTestId('isFetching').textContent).toBe('true'),
+    )
+    await waitFor(() =>
+      expect(getByTestId('isFetching').textContent).toBe('false'),
+    )
+    fireEvent.click(getByText('Increment value'))
+    // Being that nothing has changed in the args, this should never fire.
+    expect(getByTestId('isFetching').textContent).toBe('false')
+
+    // won't throw if nested, because context is different
+    expect(() =>
+      render(
+        <Provider store={configureStore({ reducer: () => null })}>
+          <ApiProvider api={customApi} context={customContext}>
+            child
+          </ApiProvider>
+        </Provider>,
+      ),
+    ).not.toThrow()
+  })
 })
diff --git a/packages/toolkit/src/query/tests/buildCreateApi.test.tsx b/packages/toolkit/src/query/tests/buildCreateApi.test.tsx
diff --git a/packages/toolkit/src/query/tests/buildHooks.test.tsx b/packages/toolkit/src/query/tests/buildHooks.test.tsx
diff --git a/packages/toolkit/tsup.config.ts b/packages/toolkit/tsup.config.ts
diff --git a/yarn.lock b/yarn.lock
