Skip to content

Commit 1f9deb2

Browse files
committed
give examples of typing other hooks
1 parent 3a614dd commit 1f9deb2

File tree

1 file changed

+24
-4
lines changed

1 file changed

+24
-4
lines changed

docs/usage/migrating-rtk-2.md

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -446,12 +446,22 @@ React Redux supports creating `hooks` (and `connect`) with a [custom context](ht
446446

447447
```ts title="Pre-v9 custom context"
448448
import { createContext } from 'react'
449-
import { ReactReduxContextValue, createDispatchHook } from 'react-redux'
449+
import {
450+
ReactReduxContextValue,
451+
TypedUseSelectorHook,
452+
createDispatchHook,
453+
createSelectorHook,
454+
createStoreHook,
455+
} from 'react-redux'
456+
import { AppStore, RootState, AppDispatch } from './store'
450457

451458
// highlight-next-line
452459
const context = createContext<ReactReduxContextValue>(null as any)
453460

454-
const useDispatch = createDispatchHook(context)
461+
export const useStore: () => AppStore = createStoreHook(context)
462+
export const useDispatch: () => AppDispatch = createDispatchHook(context)
463+
export const useSelector: TypedUseSelectorHook<RootState> =
464+
createSelectorHook(context)
455465
```
456466

457467
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.
@@ -460,12 +470,22 @@ The above example now becomes:
460470

461471
```ts title="v9+ custom context"
462472
import { createContext } from 'react'
463-
import { ReactReduxContextValue, createDispatchHook } from 'react-redux'
473+
import {
474+
ReactReduxContextValue,
475+
TypedUseSelectorHook,
476+
createDispatchHook,
477+
createSelectorHook,
478+
createStoreHook,
479+
} from 'react-redux'
480+
import { AppStore, RootState, AppDispatch } from './store'
464481

465482
// highlight-next-line
466483
const context = createContext<ReactReduxContextValue | null>(null)
467484

468-
const useDispatch = createDispatchHook(context)
485+
export const useStore: () => AppStore = createStoreHook(context)
486+
export const useDispatch: () => AppDispatch = createDispatchHook(context)
487+
export const useSelector: TypedUseSelectorHook<RootState> =
488+
createSelectorHook(context)
469489
```
470490

471491
</div>

0 commit comments

Comments
 (0)