Move hooks under single key, for better DX (breaking change)

Author: ben.durrant

docs/rtk-query/usage/customizing-create-api.mdx

@@ -19,7 +19,7 @@ You can create your own versions of `createApi` by either specifying non-default
 
 ## Customizing the React-Redux Hooks
 
-If you want the hooks to use different versions of `useSelector` or `useDispatch`, such as if you are using a custom context, you can pass these in at module creation:
+If you want the hooks to use different versions of `useSelector`, `useDispatch` and `useStore`, such as if you are using a custom context, you can pass these in at module creation:
 
 ```ts
 import * as React from 'react'
@@ -33,7 +33,13 @@ import {
 const MyContext = React.createContext<ReactReduxContextValue>(null as any)
 const customCreateApi = buildCreateApi(
   coreModule(),
-  reactHooksModule({ useDispatch: createDispatchHook(MyContext) })
+  reactHooksModule({
+    hooks: {
+      useDispatch: createDispatchHook(MyContext),
+      useSelector: createSelectorHook(MyContext),
+      useStore: createStoreHook(MyContext),
+    },
+  })
 )
 ```
 
@@ -81,7 +87,7 @@ export const myModule = (): Module<CustomModule> => ({
 
     return {
       injectEndpoint(endpoint, definition) {
-        const anyApi = (api as any) as Api<
+        const anyApi = api as any as Api<
           any,
           Record<string, any>,
           string,

packages/toolkit/src/query/createApi.ts

@@ -220,9 +220,11 @@ export type CreateApi<Modules extends ModuleName> = {
  * const customCreateApi = buildCreateApi(
  *   coreModule(),
  *   reactHooksModule({
- *     useDispatch: createDispatchHook(MyContext),
- *     useSelector: createSelectorHook(MyContext),
- *     useStore: createStoreHook(MyContext)
+ *     hooks: {
+ *       useDispatch: createDispatchHook(MyContext),
+ *       useSelector: createSelectorHook(MyContext),
+ *       useStore: createStoreHook(MyContext)
+ *     }
  *   })
  * );
  * ```

packages/toolkit/src/query/react/module.ts

@@ -9,7 +9,6 @@ import type {
 } from '@reduxjs/toolkit/dist/query/endpointDefinitions'
 import type { Api, Module } from '../apiTypes'
 import { capitalize } from '../utils'
-import type { AllOrNone } from '../tsHelpers'
 import { safeAssign } from '../tsHelpers'
 import type { BaseQueryFn } from '@reduxjs/toolkit/dist/query/baseQueryTypes'
 
@@ -70,22 +69,24 @@ declare module '@reduxjs/toolkit/dist/query/apiTypes' {
 
 type RR = typeof import('react-redux')
 
-type ReactHooks = {
+export interface ReactHooksModuleOptions {
   /**
-   * The version of the `useDispatch` hook to be used
+   * The hooks from React Redux to be used
    */
-  useDispatch: RR['useDispatch']
-  /**
-   * The version of the `useSelector` hook to be used
-   */
-  useSelector: RR['useSelector']
-  /**
-   * The version of the `useStore` hook to be used
-   */
-  useStore: RR['useStore']
-}
-
-export type ReactHooksModuleOptions = AllOrNone<ReactHooks> & {
+  hooks?: {
+    /**
+     * The version of the `useDispatch` hook to be used
+     */
+    useDispatch: RR['useDispatch']
+    /**
+     * The version of the `useSelector` hook to be used
+     */
+    useSelector: RR['useSelector']
+    /**
+     * The version of the `useStore` hook to be used
+     */
+    useStore: RR['useStore']
+  }
   /**
    * The version of the `batchedUpdates` function to be used
    */
@@ -120,9 +121,11 @@ export type ReactHooksModuleOptions = AllOrNone<ReactHooks> & {
  * const customCreateApi = buildCreateApi(
  *   coreModule(),
  *   reactHooksModule({
- *     useDispatch: createDispatchHook(MyContext),
- *     useSelector: createSelectorHook(MyContext),
- *     useStore: createStoreHook(MyContext)
+ *     hooks: {
+ *       useDispatch: createDispatchHook(MyContext),
+ *       useSelector: createSelectorHook(MyContext),
+ *       useStore: createStoreHook(MyContext)
+ *     }
  *   })
  * );
  * ```
@@ -131,9 +134,11 @@ export type ReactHooksModuleOptions = AllOrNone<ReactHooks> & {
  */
 export const reactHooksModule = ({
   batch = rrBatch,
-  useDispatch = rrUseDispatch,
-  useSelector = rrUseSelector,
-  useStore = rrUseStore,
+  hooks = {
+    useDispatch: rrUseDispatch,
+    useSelector: rrUseSelector,
+    useStore: rrUseStore,
+  },
   unstable__sideEffectsInRender = false,
 }: ReactHooksModuleOptions = {}): Module<ReactHooksModule> => ({
   name: reactHooksModuleName,
@@ -149,9 +154,7 @@ export const reactHooksModule = ({
       api,
       moduleOptions: {
         batch,
-        useDispatch,
-        useSelector,
-        useStore,
+        hooks,
         unstable__sideEffectsInRender,
       },
       serializeQueryArgs,

packages/toolkit/src/query/tsHelpers.ts

@@ -2,7 +2,6 @@ export type Id<T> = { [K in keyof T]: T[K] } & {}
 export type WithRequiredProp<T, K extends keyof T> = Omit<T, K> &
   Required<Pick<T, K>>
 export type Override<T1, T2> = T2 extends any ? Omit<T1, keyof T2> & T2 : never
-export type AllOrNone<T> = T | { [K in keyof T]?: never }
 export function assertCast<T>(v: any): asserts v is T {}
 
 export function safeAssign<T extends object>(