Redux Thunk is a middleware for Redux that allows you to write asynchronous logic (like API calls) inside Redux action creators.
In normal Redux, actions must return a plain JavaScript object. But with Redux Thunk, action creators can return a function instead of an object. This function can perform async operations and dispatch actions later.
Why Redux Thunk is needed?
Redux by default is synchronous. But real-world apps often need:
-
API calls (fetch data)
-
Delayed actions
-
Conditional dispatching
Redux Thunk solves this by allowing async logic in Redux flow.
How it works?
Instead of returning an action object:
const action = {
type: "FETCH_USERS"
};
You return a function:
const fetchUsers = () => {
return async (dispatch) => {
dispatch({ type: "FETCH_USERS_REQUEST" });
try {
const response = await fetch("/api/users");
const data = await response.json();
dispatch({
type: "FETCH_USERS_SUCCESS",
payload: data
});
} catch (error) {
dispatch({
type: "FETCH_USERS_FAILURE",
error: error.message
});
}
};
};
What Redux Thunk provides?
The thunk middleware gives you:
-
dispatch→ to send actions -
getState→ to access current store state
const myThunk = () => {
return (dispatch, getState) => {
console.log(getState());
dispatch({ type: "SOME_ACTION" });
};
};
Flow in Redux Thunk
-
Component calls action creator
-
Action creator returns a function (thunk)
-
Redux Thunk middleware intercepts it
-
Executes the function with
dispatch -
Async logic runs
-
Actions are dispatched based on result
Key Features (Interview Points)
-
Helps handle asynchronous operations in Redux
-
Allows conditional dispatching
-
Keeps async logic inside action creators
-
Middleware between action dispatch and reducer
Advantages
✔ Simple and lightweight
✔ Easy to learn
✔ Good for small/medium apps
✔ Integrates easily with Redux
Limitations
Can become messy in large applications
Hard to manage complex async flows
Less structured compared to Redux Saga
Redux Thunk vs Redux Saga
| Feature | Redux Thunk | Redux Saga |
|---|---|---|
| Complexity | Simple | Complex |
| Async handling | Functions | Generator functions |
| Learning curve | Easy | Hard |
| Best for | Small apps | Large enterprise apps |
| Control flow | Less structured | More powerful |
One-line Interview Answer
Redux Thunk is a middleware that allows Redux action creators to return functions instead of objects, enabling asynchronous logic like API calls inside Redux.
