React-Redux doesn't ship with its own type definitions. If you are using Typescript you should install the
@types/react-redux type definitions from npm. In addition to typing the library functions, the types also export some helpers to make it easier to write typesafe interfaces between your Redux store and your React components.
Defining the Root State Type
useSelector depend on declaring the type of the complete Redux store state value. While this type could be written by hand, the easiest way to define it is to have TypeScript infer it based on what your root reducer function returns. This way, the type is automatically updated as the reducer functions are modified.
When writing selector functions for use with
useSelector, you should explicitly define the type of the
state parameter. TS should be able to then infer the return type of the selector, which will be reused as the return type of the
If you want to avoid repeating the
state type declaration, you can define a typed
useSelector hook using a helper type exported by
By default, the return value of
useDispatch is the standard
Dispatch type defined by the Redux core types, so no declarations are needed:
If you have a customized version of the
Dispatch type, you may use that type explicitly:
connect higher order component
connect higher-order component is somewhat complex to type, because there are 3 sources of props:
mapDispatchToProps, and props passed in from the parent component. Here's a full example of what it looks like to do that manually.
It is also possible to shorten this somewhat, by inferring the types of
However, inferring the type of
mapDispatch this way will break if it is defined as an object and also refers to thunks.
Inferring The Connected Props Automatically
connect consists of two functions that are called sequentially. The first function accepts
mapDispatch as arguments, and returns a second function. The second function accepts the component to be wrapped, and returns a new wrapper component that passes down the props from
mapDispatch. Normally, both functions are called together, like
As of v7.1.2, the
@types/react-redux package exposes a helper type,
ConnectedProps, that can extract the return types of
mapDispatchToProps from the first function. This means that if you split the
connect call into two steps, all of the "props from Redux" can be inferred automatically without having to write them by hand. While this approach may feel unusual if you've been using React-Redux for a while, it does simplify the type declarations considerably.
The return type of
ConnectedProps can then be used to type your props object.
Because types can be defined in any order, you can still declare your component before declaring the connector if you want.
The hooks API is generally simpler to use with static types. If you're looking for the easiest solution for using static types with React-Redux, use the hooks API.
If you're using
connect, we recommend using the
ConnectedProps<T> approach for inferring the props from Redux, as that requires the fewest explicit type declarations.
For additional information, see these additional resources:
- Redux docs: Usage with TypeScript: Examples of how to declare types for actions, reducers, and the store
- Redux Toolkit docs: Advanced Tutorial: shows how to use RTK and the React-Redux hooks API with TypeScript
- React+TypeScript Cheatsheet: a comprehensive guide to using React with TypeScript
- React + Redux in TypeScript Guide: extensive information on patterns for using React and Redux with TypeScript