Guide Redux Toolkit with TypeScript

Why Redux Toolkit with TypeScript

Redux Toolkit is the official, recommended way to write Redux logic. It simplifies common Redux concerns including boilerplate, configuration, and middleware. Combined with TypeScript, it provides excellent type safety for global state management for your web applications.

Redux Toolkit was created to address three common concerns about Redux:

• "Configuring a Redux store is too complicated"
• "I have to add a lot of packages to get Redux to do anything useful"
• "Redux requires too much boilerplate code"

According to the official Redux Toolkit documentation, these pain points led to the creation of RTK as a batteries-included solution that provides sensible defaults out of the box.

Redux Toolkit vs Redux

The key difference is that Redux Toolkit provides sensible defaults and built-in utilities that eliminate the boilerplate while maintaining full type safety. RTK uses Immer internally, allowing you to write "mutating" logic that gets converted to immutable updates.

Installation and Setup

Package Installation

Install both Redux Toolkit and React bindings:

npm install @reduxjs/toolkit react-redux
# or
yarn add @reduxjs/toolkit react-redux

As documented in the Redux Toolkit Getting Started guide, these two packages provide everything you need to start using Redux with React.

TypeScript Version Requirements

Redux Toolkit follows DefinitelyTyped's policy of supporting TypeScript versions released within the past two years. As of RTK 2.x, this means:

• RTK 2.x requires TypeScript 5.4+
• RTK 1.9.x requires TypeScript 4.7+

If you're unable to upgrade TypeScript, RTK may still work with older versions, but you may encounter type errors or missing type inference. The TypeScript usage documentation provides detailed information on version compatibility.

For optimal type safety and the best developer experience, always use the minimum required TypeScript version or higher. When building modern React applications, having the latest TypeScript version ensures you benefit from improved type inference and language features.

Typed Dispatch and Hooks

Creating typed useDispatch and useSelector hooks is essential for type-safe React-Redux integration:

import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'

export const useAppDispatch = () => useDispatch<AppDispatch>()
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

These typed hooks ensure that:

• Dispatch knows exactly what actions can be dispatched
• Selector knows the complete state shape and provides autocomplete
• Components receive proper type checking for Redux interactions

As outlined in the Redux Toolkit TypeScript documentation, this pattern prevents runtime errors by catching type mismatches at compile time.

Creating Type-Safe Slices

Using createSlice

The createSlice API automatically generates action creators and action types with proper TypeScript support. The key is using PayloadAction<T> for actions that carry data:

incrementByAmount(state, action: PayloadAction<number>) {
 state.value += action.payload
}

This typing ensures:

• action.payload is typed as number
• TypeScript will error if you try to assign a non-number
• IDE autocomplete suggests the correct payload type

According to the Redux Toolkit TypeScript patterns documentation, this approach provides complete type safety for slice reducers.

Defining State and Action Types

Best practice is to:

1. Define a TypeScript interface for your slice state
2. Use it as the type for initialState
3. Export the state interface for use in selectors
4. Use PayloadAction<PayloadType> for reducer arguments

By following these patterns in your React web development projects, you ensure maintainable and type-safe state management across your application.

Async Operations with createAsyncThunk

Async Thunk Pattern

createAsyncThunk simplifies async logic with three generic parameters:

1. ReturnType: What the async function returns on success
2. ArgumentType: What the thunk receives when dispatched
3. ThunkApiConfig: Configuration including rejectValue type

createAsyncThunk<
 UserResponse, // Return type on success
 void, // Argument type
 { rejectValue: string } // Config with error type
>

As described in the Redux Toolkit TypeScript documentation, these generics ensure complete type safety throughout the async operation lifecycle.

Handling Async States

Use extraReducers with the builder callback pattern to handle the lifecycle:

const userSlice = createSlice({
 name: 'users',
 initialState,
 reducers: {},
 extraReducers: (builder) => {
 builder
 .addCase(fetchUsers.pending, (state) => {
 state.loading = true
 state.error = null
 })
 .addCase(fetchUsers.fulfilled, (state, action) => {
 state.loading = false
 state.users = action.payload.users
 })
 .addCase(fetchUsers.rejected, (state, action) => {
 state.loading = false
 state.error = action.payload || 'Unknown error'
 })
 }
})

Memoized Selectors with createSelector

Performance Optimization

createSelector from the Reselect library (re-exported by RTK) creates memoized selectors that only recompute when their input selectors return different values:

export const selectCartTotal = createSelector(
 [selectCartItems],
 (items) => items.reduce((total, item) => total + item.price * item.quantity, 0)
)

Without memoization:

• Every render recalculates derived values
• All components using the selector re-render

With memoization:

• Only recomputes when cart.items actually changes
• Prevents needless re-renders, improving performance

The Redux Toolkit selector patterns demonstrate how createSelector optimizes derived data calculations.

RTK Query with TypeScript

Data Fetching Made Simple

RTK Query is a powerful data fetching and caching solution included in Redux Toolkit. Using TypeScript with createApi provides excellent type safety:

Endpoint Typing:

• builder.query<ResultType, QueryArg> for GET requests
• builder.mutation<ResultType, BodyType> for POST/PUT/DELETE

Type Inference:

• TypeScript automatically infers hook return types
• Query arguments are properly typed
• Error types are inferred from the API configuration

As detailed in the RTK Query TypeScript documentation, this approach eliminates the need for manual type definitions while maintaining complete type safety. For applications requiring efficient API integrations, RTK Query provides a robust solution that handles caching, polling, and optimistic updates out of the box.

Best Practices and Common Patterns

Organizing Slice Files

Recommended structure for scalable Redux applications:

src/
 features/
 counter/
 counterSlice.ts # Slice with actions & reducer
 counterSelectors.ts # Custom selectors
 counterTypes.ts # Type definitions
 store/
 store.ts # Store configuration
 hooks.ts # Typed React-Redux hooks

Type Safety Throughout the App

1. Export types from slices for reuse
2. Use RootState for all selector functions
3. Create typed hooks in a dedicated hooks file
4. Avoid any types - be explicit about state shape

Avoiding Common TypeScript Pitfalls

• Circular references: Define types in separate files when needed
• Missing exports: Export action types for use in components
• Generic inference: Be explicit with createAsyncThunk generics
• Strict null checks: Account for optional state properties

Testing Type-Safe Redux Code

Type safety doesn't replace testing, but it catches many errors early:

• Test reducer logic with known state and actions
• Test async thunks with mocked API responses
• Test selectors with various input states
• Test component integration with typed hooks

Conclusion

Redux Toolkit with TypeScript provides a powerful, type-safe foundation for state management in React applications. Key takeaways:

Start with typed hooks and createSlice for basic state management. Add RTK Query for data fetching needs. Use createAsyncThunk for complex async workflows that don't fit RTK Query's patterns.

For comprehensive documentation, refer to the official Redux Toolkit Getting Started guide, TypeScript usage patterns, and RTK Query TypeScript integration.

Implementing these patterns in your React applications ensures maintainable, type-safe state management that scales with your project.

Sources

1. Redux Toolkit - Getting Started
2. Redux Toolkit - Usage With TypeScript
3. Redux Toolkit - RTK Query Usage With TypeScript
4. React Redux Toolkit -- A Beginner's Guide