Add TypedUseDispatchHook interface for typing and using with middlewares like redux thunk

[IVIosi]

Do you want to request a feature or report a bug?

Feature

What is the expected behavior?

add an interface like TypedUseSelectorHook for useDispatch hook

Details

I think an interface for typing useDispatch hook like what useSelector hook has could be useful for many users who uses redux middlewares for async actions (e.g. redux thunk and etc.)

[markerikson]

We already cover how to handle typing useDispatch in the docs:

https://react-redux.js.org/using-react-redux/static-typing#typing-the-usedispatch-hook

https://redux-toolkit.js.org/usage/usage-with-typescript#getting-the-dispatch-type

Although looking at those two pages, the Redux Toolkit page talks about useAppDispatch while the React-Redux page does not.

I'd appreciate a PR that updates the React-Redux page with the useAppDispatch information.

Having said that, it would seem like useAppDispatch covers what you're asking - is there something you want beyond that?

[IVIosi]

@markerikson I'd gladly open a PR to update React-Redux page with useAppDispatch information.

Also I think something like what I'd say before could be useful specially for apps migrating from JS to TS. For example:

import { Action } from 'redux';
import {
  useDispatch as useReactReduxDispatch,
  useSelector as useReactReduxSelector,
  TypedUseSelectorHook,
} from 'react-redux';
import { ThunkDispatch } from 'redux-thunk';

import { AppState } from 'path/to/app/root/state';

export type TypedDispatch = ThunkDispatch<AppState, unknown, Action>;
export interface TypedUseDispatchHook<TState> {
  (): TState;
}

export const useSelector: TypedUseSelectorHook<AppState> = useReactReduxSelector;
export const useDispatch: TypedUseDispatchHook<TypedDispatch> = useReactReduxDispatch;

So after using these interfaces, there is no need to change any other part of codebase.

[markerikson]

Still not sure what you're asking us to actually add beyond what that useAppDispatch example shows doing. The idea is that you'd import and use useAppDispatch everywhere.

Copying @phryneas , our resident TS expert.

[phryneas]

I'd say what you are describing there pretty much matches what we already have in the docs that Mark linked to above.
With the caveat that typeof store.dispatch in normal redux does not include middlewares. You'd have to use redux toolkit for that - which generally is the official recommendation, especially when you're using TypeScript.

[dai-shi]

@IVIosi
FWIW, for typed selector, there's another option for experts: DefaultRootState
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/2a43fe2f451a26f47c1360fb4d90d77a5b9046ee/types/react-redux/index.d.ts#L49

[IVIosi]

@phryneas @markerikson @dai-shi Thanks for your comments. I found out there are different approaches for static typing. So no need for helper type I mentioned in the beginning.