redux store: define typed useSelector and useDispatch hooks

From the RTK docs:
```
Using configureStore should not need any additional typings. You will,
however, want to extract the RootState type and the Dispatch type so
that they can be referenced as needed. Inferring these types from the
store itself means that they correctly update as you add more state
slices or modify middleware settings.

----------------------------------------------------------------------

While it's possible to import the RootState and
AppDispatch types into each component, it's better to create pre-typed
versions of the useDispatch and useSelector hooks for usage in your
application. This is important for a couple reasons:

    For useSelector, it saves you the need to type (state: RootState)
    every time

    For useDispatch, the default Dispatch type does not know about
    thunks or other middleware. In order to correctly dispatch thunks,
    you need to use the specific customized AppDispatch type from the
    store that includes the thunk middleware types, and use that with
    useDispatch. Adding a pre-typed useDispatch hook keeps you from
    forgetting to import AppDispatch where it's needed.
```
source:
https://react-redux.js.org/using-react-redux/usage-with-typescript#define-root-state-and-dispatch-types
This commit is contained in:
lucasgarfield 2023-12-04 16:02:56 +01:00 committed by Lucas Garfield
parent 8d47e52868
commit fabd3e015a
2 changed files with 12 additions and 0 deletions

7
src/store/hooks.ts Normal file
View file

@ -0,0 +1,7 @@
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
import type { RootState, AppDispatch } from './index';
// Use throughout your app instead of plain `useDispatch` and `useSelector`
export const useAppDispatch: () => AppDispatch = useDispatch;
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

View file

@ -31,3 +31,8 @@ export const middleware = (getDefaultMiddleware: Function) =>
);
export const store = configureStore({ reducer, middleware });
// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>;
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch;