Tool for HR, Hiring Managers, and the Leadership Team

Why Redux Thunk is needed?

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

  1. Component calls action creator

  2. Action creator returns a function (thunk)

  3. Redux Thunk middleware intercepts it

  4. Executes the function with dispatch

  5. Async logic runs

  6. 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.