Spaces:
Running
Running
File size: 2,104 Bytes
c2b7eb3 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | import { configureStore } from '@reduxjs/toolkit'
import type { Context } from 'react'
import { useContext, useEffect } from './reactImports'
import * as React from 'react'
import type { ReactReduxContextValue } from 'react-redux'
import { Provider, ReactReduxContext } from './reactReduxImports'
import { setupListeners } from './rtkqImports'
import type { Api } from '@reduxjs/toolkit/query'
/**
* Can be used as a `Provider` if you **do not already have a Redux store**.
*
* @example
* ```tsx
* // codeblock-meta no-transpile title="Basic usage - wrap your App with ApiProvider"
* import * as React from 'react';
* import { ApiProvider } from '@reduxjs/toolkit/query/react';
* import { Pokemon } from './features/Pokemon';
*
* function App() {
* return (
* <ApiProvider api={api}>
* <Pokemon />
* </ApiProvider>
* );
* }
* ```
*
* @remarks
* Using this together with an existing redux store, both will
* conflict with each other - please use the traditional redux setup
* in that case.
*/
export function ApiProvider(props: {
children: any
api: Api<any, {}, any, any>
setupListeners?: Parameters<typeof setupListeners>[1] | false
context?: Context<ReactReduxContextValue | null>
}) {
const context = props.context || ReactReduxContext
const existingContext = useContext(context)
if (existingContext) {
throw new Error(
'Existing Redux context detected. If you already have a store set up, please use the traditional Redux setup.',
)
}
const [store] = React.useState(() =>
configureStore({
reducer: {
[props.api.reducerPath]: props.api.reducer,
},
middleware: (gDM) => gDM().concat(props.api.middleware),
}),
)
// Adds the event listeners for online/offline/focus/etc
useEffect(
(): undefined | (() => void) =>
props.setupListeners === false
? undefined
: setupListeners(store.dispatch, props.setupListeners),
[props.setupListeners, store.dispatch],
)
return (
<Provider store={store} context={context}>
{props.children}
</Provider>
)
}
|