Effective Date: 12/07/2025
Introduction
In modern React applications, managing asynchronous logic can be tricky. Redux Toolkit offers a powerful way to handle async operations using thunks. Thunks make it easier to fetch data, post updates, or perform side effects in Redux without cluttering your components. With just a few steps, you can simplify complex async flows using Use Thunks in Redux Toolkit's built-in thunk middleware. This guide explains how and why to use it.
What is a thunk in Redux Toolkit?
A thunk is a function that lets you write async logic in Redux. Instead of returning an action object, a thunk returns a function that takes dispatch and getState as arguments. This is useful for making API calls or running any async operation before dispatching a real action.
How do I create a thunk?
In Redux Toolkit, you can use the createAsyncThunk API to create a thunk. You define a name, a function that performs the async task, and Redux Toolkit automatically handles the action types for pending, fulfilled, and rejected states. It reduces boilerplate and improves readability.
Where should I write my thunk functions?
Thunk functions are usually written in a separate file or inside your Redux slice file. Keeping them close to the related slice helps maintain cleaner structure. It also ensures that actions and async logic are tightly coupled and easy to manage.
How does createAsyncThunk work internally?
When you dispatch a thunk created with createAsyncThunk, Redux Toolkit automatically dispatches three actions—pending, fulfilled, and rejected. These actions are linked to the lifecycle of the promise you return in the thunk function, making it easy to manage loading, success, and error states.
Can I access state inside a thunk?
Yes, you can access the current Redux state inside a thunk by using the getState argument. This is helpful if you need conditional logic, such as checking if data already exists before making a request, or accessing authentication tokens stored in the state.
Are thunks better than sagas?
Thunks are easier to understand and use, especially for smaller to medium-sized projects. Sagas offer more control and advanced features, but they add complexity. For most use-cases, thunks are powerful and sufficient, especially when using Redux Toolkit.
How can I handle errors in a thunk?
You can catch errors inside the async function you pass to createAsyncThunk. By using try-catch blocks and throwing an error, Redux Toolkit will automatically dispatch the rejected action and pass the error to your slice, where you can update the error state accordingly.
What if I need to cancel a thunk?
Although createAsyncThunk doesn’t support cancellation by default, it provides an abort controller in the thunk API. You can check if a request was aborted using the signal.aborted property and respond accordingly in your async logic.
Can thunks call other thunks?
Yes, thunks can dispatch other thunks using the dispatch method. This is helpful when you have modular async operations that need to be reused or combined into bigger flows, such as authentication followed by fetching user data.
Do I need middleware for thunks?
No extra middleware is required when using Redux Toolkit. The thunk middleware is included by default when you use configureStore(), so you don’t need to set it up manually unless you want to customize the middleware chain.
How do I test a thunk?
To test a thunk, you can use a mock store with Redux's configureStore and simulate dispatching the thunk. Then check which actions were dispatched and whether the async logic behaved as expected. You can also mock API calls using libraries like Jest or MSW.
Conclusion
Thunks in Redux Toolkit make asynchronous logic manageable and cleaner. With createAsyncThunk, you can simplify async flows like API calls, handle loading and error states, and keep your components clean. It's an essential feature for scalable Redux apps, offering power and simplicity.
FAQs
Q1: Is thunk built-in with Redux Toolkit?
Yes, thunk middleware comes pre-configured with Redux Toolkit’s configureStore.
Q2: Can I use async/await in thunks?
Absolutely. Thunks fully support async/await for cleaner, modern JavaScript syntax.
Q3: What does createAsyncThunk return?
It returns a thunk action creator that you can dispatch like any other Redux action.
Q4: Are thunks suitable for large apps?
Yes, especially when combined with slices and RTK Query, thunks scale well in large apps.
Q5: Do thunks affect performance?
No, thunks are lightweight and don’t impact performance negatively when used properly.
