createApi
のカスタマイズ
現在、RTK Query には 2 つの createApi
のバリアントが含まれています。
- UI に依存しない Redux ロジックのみを含む
createBaseApi
(コアモジュール) - コアと React hooks モジュールの両方を含む
createApi
モジュールのデフォルト以外のオプションを指定するか、独自のモジュールを追加することで、独自のバージョンの createApi
を作成できます。
React-Redux Hooks のカスタマイズ
カスタムコンテキストを使用している場合など、フックで異なるバージョンの useSelector
、useDispatch
、および useStore
を使用したい場合は、モジュール作成時にこれらを渡すことができます。
- TypeScript
- JavaScript
import * as React from 'react'
import {
createDispatchHook,
createSelectorHook,
createStoreHook,
ReactReduxContextValue,
} from 'react-redux'
import {
buildCreateApi,
coreModule,
reactHooksModule,
} from '@reduxjs/toolkit/query/react'
const MyContext = React.createContext<ReactReduxContextValue | null>(null)
const customCreateApi = buildCreateApi(
coreModule(),
reactHooksModule({
hooks: {
useDispatch: createDispatchHook(MyContext),
useSelector: createSelectorHook(MyContext),
useStore: createStoreHook(MyContext),
},
})
)
import * as React from 'react'
import {
createDispatchHook,
createSelectorHook,
createStoreHook,
} from 'react-redux'
import {
buildCreateApi,
coreModule,
reactHooksModule,
} from '@reduxjs/toolkit/query/react'
const MyContext = React.createContext(null)
const customCreateApi = buildCreateApi(
coreModule(),
reactHooksModule({
hooks: {
useDispatch: createDispatchHook(MyContext),
useSelector: createSelectorHook(MyContext),
useStore: createStoreHook(MyContext),
},
})
)
RTKQ のための createSelector
のカスタマイズ
coreModule
と reactHooksModule
の両方が、Reselect または同等のシグネチャを持つセレクター作成インスタンスである createSelector
オプションを受け入れます。
- TypeScript
- JavaScript
import * as React from 'react'
import { createSelectorCreator, lruMemoize } from '@reduxjs/toolkit'
import {
buildCreateApi,
coreModule,
reactHooksModule,
} from '@reduxjs/toolkit/query/react'
const createLruSelector = createSelectorCreator(lruMemoize)
const customCreateApi = buildCreateApi(
coreModule({ createSelector: createLruSelector }),
reactHooksModule({ createSelector: createLruSelector })
)
import { createSelectorCreator, lruMemoize } from '@reduxjs/toolkit'
import {
buildCreateApi,
coreModule,
reactHooksModule,
} from '@reduxjs/toolkit/query/react'
const createLruSelector = createSelectorCreator(lruMemoize)
const customCreateApi = buildCreateApi(
coreModule({ createSelector: createLruSelector }),
reactHooksModule({ createSelector: createLruSelector })
)
独自のモジュールの作成
独自のモジュールを作成したい場合は、実装がどのようなものかを確認するために、react-hooks モジュール を確認する必要があります。
以下は非常に簡略化されたバージョンです。
import { CoreModule } from '@internal/core/module'
import {
BaseQueryFn,
EndpointDefinitions,
Api,
Module,
buildCreateApi,
coreModule,
} from '@reduxjs/toolkit/query'
export const customModuleName = Symbol()
export type CustomModule = typeof customModuleName
declare module '../apiTypes' {
export interface ApiModules<
BaseQuery extends BaseQueryFn,
Definitions extends EndpointDefinitions,
ReducerPath extends string,
TagTypes extends string,
> {
[customModuleName]: {
endpoints: {
[K in keyof Definitions]: {
myEndpointProperty: string
}
}
}
}
}
export const myModule = (): Module<CustomModule> => ({
name: customModuleName,
init(api, options, context) {
// initialize stuff here if you need to
return {
injectEndpoint(endpoint, definition) {
const anyApi = api as any as Api<
any,
Record<string, any>,
string,
string,
CustomModule | CoreModule
>
anyApi.endpoints[endpoint].myEndpointProperty = 'test'
},
}
},
})
export const myCreateApi = buildCreateApi(coreModule(), myModule())