Skip to content

Commit

Permalink
Merge pull request #3400 from EskiMojo14/require-hooks
Browse files Browse the repository at this point in the history
  • Loading branch information
markerikson authored May 5, 2023
2 parents 805379b + bd0036b commit 93d1d48
Show file tree
Hide file tree
Showing 5 changed files with 49 additions and 28 deletions.
12 changes: 9 additions & 3 deletions docs/rtk-query/usage/customizing-create-api.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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),
},
})
)
```

Expand Down Expand Up @@ -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,
Expand Down
8 changes: 7 additions & 1 deletion packages/toolkit/src/query/createApi.ts
Original file line number Diff line number Diff line change
Expand Up @@ -219,7 +219,13 @@ export type CreateApi<Modules extends ModuleName> = {
* 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)
* }
* })
* );
* ```
*
Expand Down
4 changes: 1 addition & 3 deletions packages/toolkit/src/query/react/buildHooks.ts
Original file line number Diff line number Diff line change
Expand Up @@ -581,9 +581,7 @@ export function buildHooks<Definitions extends EndpointDefinitions>({
api,
moduleOptions: {
batch,
useDispatch,
useSelector,
useStore,
hooks: { useDispatch, useSelector, useStore },
unstable__sideEffectsInRender,
},
serializeQueryArgs,
Expand Down
49 changes: 30 additions & 19 deletions packages/toolkit/src/query/react/module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -71,21 +71,26 @@ type RR = typeof import('react-redux')

export interface ReactHooksModuleOptions {
/**
* The version of the `batchedUpdates` function to be used
*/
batch?: RR['batch']
/**
* The version of the `useDispatch` hook to be used
*/
useDispatch?: RR['useDispatch']
/**
* The version of the `useSelector` hook to be used
* The hooks from React Redux to be used
*/
useSelector?: RR['useSelector']
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 `useStore` hook to be used
* The version of the `batchedUpdates` function to be used
*/
useStore?: RR['useStore']
batch?: RR['batch']
/**
* Enables performing asynchronous tasks immediately within a render.
*
Expand Down Expand Up @@ -115,17 +120,25 @@ export interface ReactHooksModuleOptions {
* 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)
* }
* })
* );
* ```
*
* @returns A module for use with `buildCreateApi`
*/
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,
Expand All @@ -141,9 +154,7 @@ export const reactHooksModule = ({
api,
moduleOptions: {
batch,
useDispatch,
useSelector,
useStore,
hooks,
unstable__sideEffectsInRender,
},
serializeQueryArgs,
Expand Down
4 changes: 2 additions & 2 deletions packages/toolkit/src/query/tsHelpers.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ export function assertCast<T>(v: any): asserts v is T {}
export function safeAssign<T extends object>(
target: T,
...args: Array<Partial<NoInfer<T>>>
) {
Object.assign(target, ...args)
): T {
return Object.assign(target, ...args)
}

/**
Expand Down

0 comments on commit 93d1d48

Please sign in to comment.