Usage with TypeScript
TypeScript has the potential to bring the following benefits to a Redux application:
- Type safety for reducers, state and action creators, and UI components
- Easy refactoring of typed code
- A superior developer experience in a team environment
Notes & Considerations
- While we do officially recommend use of static typing with Redux, use of TypeScript does have tradeoffs in terms of setup, amount of code written, and readability. TypeScript will likely provide a net benefit in larger apps or codebases need to be maintained over time by many people, but may feel like too much overhead in smaller projects. Take time to evaluate the tradeoffs and decide whether it's worth using TS in your own application.
- This page primarily covers adding type checking for the Redux core, and only gives shorter examples of using TS with other Redux libraries. See their respective documentation for further details.
- There are multiple possible approaches to type checking Redux code. This page demonstrates some of the common and recommended approaches to keep things simple, and is not an exhaustive guide
A Practical Example
We will be going through a simplistic chat application to demonstrate a possible approach to include static typing. This chat application will have two reducers. The chat reducer will focus on storing the chat history and the system reducer will focus on storing session information.
The full source code is available on codesandbox here. Note that by going through this example yourself you will experience some of the benefits of using TypeScript.
Type Checking State
Adding types to each slice of state is a good place to start since it does not rely on other types. In this example we start by describing the chat reducer's slice of state:
And then do the same for the system reducer's slice of state:
Note that we are exporting these interfaces to reuse them later in reducers and action creators.
Type Checking Actions & Action Creators
We will be using string literals and using
typeof to declare our action constants and infer types. Note that we are making a tradeoff here when we declare our types in a separate file. In exchange for separating our types into a separate file, we get to keep our other files more focused on their purpose. While this tradeoff can improve the maintainability of the codebase, it is perfectly fine to organize your project however you see fit.
Chat Action Constants & Shape:
Note that we are using TypeScript's Union Type here to express all possible actions.
With these types declared we can now also type check chat's action creators. In this case we are taking advantage of TypeScript's inference:
System Action Constants & Shape:
With these types we can now also type check system's action creators:
Type Checking Reducers
Reducers are just pure functions that take the previous state, an action and then return the next state. In this example, we explicitly declare the type of actions this reducer will receive along with what it should return (the appropriate slice of state). With these additions TypeScript will give rich intellisense on the properties of our actions and state. In addition, we will also get errors when a certain case does not return the
Type checked chat reducer:
Type checked system reducer:
We now need to generate the root reducer function, which is normally done using
combineReducers. Note that we do not have to explicitly declare a new interface for RootState. We can use
ReturnType to infer state shape from the
Type Checking Middlewares
A middleware is a higher-order function that composes a dispatch function to return a new dispatch function.
To create a type checked middleware function, we can leverage the
Middleware interface provided by Redux together with our store type (as defined in the previous example):
Usage with React Redux
While React Redux is a separate library from Redux itself, it is commonly used with React.
For a complete guide on how to correctly use React-Redux with TypeScript, see the "Static Typing" page in the React-Redux docs. This section will highlight the standard patterns.
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.
Typing the useSelector hook
Declare the type of the
state parameter in the selector function, and the return type of
useSelector will be inferred to match the return type of the selector:
By default, the return value of
useDispatch is the standard
Dispatch type defined by the Redux core types, so no declarations are needed:
connect higher order component
ConnectedProps<T> type exported by
@types/react-redux^7.1.2 to infer the types of the props from
connect automatically. This requires splitting the
connect(mapState, mapDispatch)(MyComponent) call into two parts:
Usage with Redux Thunk
Redux Thunk is a commonly used middleware for writing sync and async logic that interacts with the Redux store. Feel free to check out its documentation here. A thunk is a function that returns another function that takes parameters
getState. Redux Thunk has a built in type
ThunkAction which we can use to define types for those arguments:
To reduce repetition, you might want to define a reusable
AppThunk type once, in your store file, and then use that type whenever you write a thunk:
It is highly recommended to use action creators in your dispatch since we can reuse the work that has already been done to type check these functions.
Usage with Redux Toolkit
The official Redux Toolkit package is written in TypeScript, and provides APIs that are designed to work well in TypeScript applications.
configureStore infers the type of the state value from the provided root reducer function, so no specific type declarations should be needed. However, you may want to export the type of
store.dispatch, which should already have the Thunk middleware types included:
createAction requires that the type of the payload be explicitly defined, unless there is no payload required:
createReducer will infer the type of its state value from the
initialState argument. Action types should be declared explicitly:
createSlice will infer the type of its state value from the
initialState argument. Action types should be declared explicitly, and will be reused for the generated action creators:
For further information, see these additional resources:
- Redux library documentation:
- React + Redux + TypeScript guides:
- Other articles: