⏳ Redux Thunk for Async Actions

Why Thunk Exists

Plain Redux only accepts plain object actions, and it processes them synchronously. That is a deliberate design choice — it keeps state changes predictable and time-travel debugging possible. But real apps need to load data from servers, and a network request takes time. You cannot put a fetch inside a reducer (reducers must be pure), and a single dispatch cannot "wait" for a response.

The word thunk is old programming jargon for "a piece of code that delays some work" — a function you hand off now to be run later. Redux Thunk is a ~14-line middleware that teaches the store one new trick: if an action is a function, call it instead of forwarding it to the reducer. That function is your async escape hatch.

How Thunk Works

The entire idea fits in one decision: is the dispatched thing a function or an object?

Here is the actual middleware — genuinely this short. It is the clearest example of the curried store => next => action signature you met in the previous lesson.

// The real redux-thunk, lightly annotated
function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    // If someone dispatched a FUNCTION, run it and hand it the tools
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }
    // Otherwise it's a normal action — forward it untouched
    return next(action);
  };
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;
export default thunk;

Classic setup wires it in with applyMiddleware:

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(thunk));

Basic Thunk Patterns

1. The request / success / failure trio

The canonical async pattern dispatches three actions across the lifetime of one request: one when it starts (flip on a spinner), one on success (store the data), and one on failure (store the error). First, three tiny plain-object action creators:

const fetchUsersRequest = ()      => ({ type: 'FETCH_USERS_REQUEST' });
const fetchUsersSuccess = (users) => ({ type: 'FETCH_USERS_SUCCESS', payload: users });
const fetchUsersFailure = (error) => ({ type: 'FETCH_USERS_FAILURE', payload: error });

Now the thunk that orchestrates them. It returns an async function, so dispatch is its first argument:

const fetchUsers = () => {
  return async (dispatch) => {
    dispatch(fetchUsersRequest());                 // 1. spinner ON
    try {
      const response = await fetch('/api/users');
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      const users = await response.json();
      dispatch(fetchUsersSuccess(users));          // 2. store data, spinner OFF
    } catch (error) {
      dispatch(fetchUsersFailure(error.message));  // 3. store error, spinner OFF
    }
  };
};

From a component it feels exactly like dispatching any other action — thunk hides all the machinery:

import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';

function UserList() {
  const dispatch = useDispatch();
  const { users, loading, error } = useSelector(state => state.users);

  useEffect(() => {
    dispatch(fetchUsers());   // dispatch a FUNCTION — thunk runs it
  }, [dispatch]);

  if (loading) return <div>Loading…</div>;
  if (error)   return <div>Error: {error}</div>;
  return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

2. Thunks with parameters and getState

Because a thunk is just a function you write, it can take arguments and read current state. This one refuses to fetch unless the user is logged in:

const fetchRelatedPosts = (postId) => {
  return async (dispatch, getState) => {
    const { user } = getState().auth;
    if (!user) {
      return dispatch({ type: 'FETCH_RELATED_FAILURE', payload: 'Must be logged in' });
    }

    dispatch({ type: 'FETCH_RELATED_REQUEST' });
    try {
      const res = await fetch(`/api/posts/${postId}/related`, {
        headers: { Authorization: `Bearer ${user.token}` }
      });
      const posts = await res.json();
      dispatch({ type: 'FETCH_RELATED_SUCCESS', payload: posts });
    } catch (error) {
      dispatch({ type: 'FETCH_RELATED_FAILURE', payload: error.message });
    }
  };
};

Advanced Patterns

1. Conditional dispatch (skip redundant fetches)

Read state and bail out early if the data is already loaded — a cheap, powerful optimization:

const fetchPostsIfNeeded = () => {
  return (dispatch, getState) => {
    const { posts } = getState();
    if (posts.items.length === 0 && !posts.loading) {
      return dispatch(fetchPosts());   // one thunk can dispatch another
    }
    return Promise.resolve();          // nothing to do
  };
};

2. Chained (sequential) requests

Because thunks use async/await, sequencing dependent calls is just normal JavaScript — create a user, then create their profile with the returned id:

const createUserAndProfile = (userData, profileData) => {
  return async (dispatch) => {
    dispatch({ type: 'CREATE_USER_REQUEST' });
    try {
      const user = await fetch('/api/users', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(userData)
      }).then(r => r.json());
      dispatch({ type: 'CREATE_USER_SUCCESS', payload: user });

      // now use the new user's id
      const profile = await fetch('/api/profiles', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ ...profileData, userId: user.id })
      }).then(r => r.json());
      dispatch({ type: 'CREATE_PROFILE_SUCCESS', payload: profile });

      return { user, profile };
    } catch (error) {
      dispatch({ type: 'CREATE_USER_FAILURE', payload: error.message });
      throw error;
    }
  };
};

3. Parallel requests

When calls are independent, fire them together with Promise.all so the user waits once, not three times:

const fetchDashboard = () => {
  return async (dispatch) => {
    dispatch({ type: 'FETCH_DASHBOARD_REQUEST' });
    try {
      const [users, posts, comments] = await Promise.all([
        fetch('/api/users').then(r => r.json()),
        fetch('/api/posts').then(r => r.json()),
        fetch('/api/comments').then(r => r.json())
      ]);
      dispatch({ type: 'FETCH_DASHBOARD_SUCCESS', payload: { users, posts, comments } });
    } catch (error) {
      dispatch({ type: 'FETCH_DASHBOARD_FAILURE', payload: error.message });
    }
  };
};

4. Injecting services with withExtraArgument

The third parameter of a thunk is whatever you pass to thunk.withExtraArgument (or Toolkit's extraArgument option) — perfect for injecting an API client so thunks stay testable:

const store = createStore(
  rootReducer,
  applyMiddleware(thunk.withExtraArgument({ api }))
);

const fetchUser = (id) => async (dispatch, getState, { api }) => {
  dispatch({ type: 'FETCH_USER_REQUEST' });
  try {
    const user = await api.users.getById(id);   // injected service, easy to mock
    dispatch({ type: 'FETCH_USER_SUCCESS', payload: user });
  } catch (error) {
    dispatch({ type: 'FETCH_USER_FAILURE', payload: error.message });
  }
};

Error Handling

Good async code distinguishes between network failures (no connection) and HTTP failures (server said 404 or 500). Note that fetch does not reject on 4xx/5xx — you must check response.ok yourself.

const loginUser = (credentials) => {
  return async (dispatch) => {
    dispatch({ type: 'LOGIN_REQUEST' });
    try {
      const response = await fetch('/api/auth/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(credentials)
      });

      if (!response.ok) {                         // fetch won't throw on 401!
        const { message } = await response.json();
        throw new Error(message || 'Login failed');
      }

      const { user, token } = await response.json();
      localStorage.setItem('token', token);
      dispatch({ type: 'LOGIN_SUCCESS', payload: user });
    } catch (error) {
      const message = error.name === 'TypeError'
        ? 'Network error — please check your connection'   // fetch rejected = network down
        : error.message;
      dispatch({ type: 'LOGIN_FAILURE', payload: message });
    }
  };
};

const fetchWithRetry = (url, maxRetries = 3) => async (dispatch) => {
  for (let attempt = 1; attempt <= maxRetries; attempt++) {
    try {
      const res = await fetch(url);
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      const data = await res.json();
      return dispatch({ type: 'FETCH_SUCCESS', payload: data });
    } catch (error) {
      if (attempt === maxRetries) {
        return dispatch({ type: 'FETCH_FAILURE', payload: error.message });
      }
      // wait 2s, 4s, 8s… before trying again
      await new Promise(r => setTimeout(r, 2 ** attempt * 1000));
    }
  }
};

The Modern Way: createAsyncThunk

Writing the request/success/failure trio by hand for every endpoint gets repetitive fast. Redux Toolkit — the officially recommended way to write Redux — provides createAsyncThunk, which generates those three action types for you and dispatches them automatically around your async function.

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

// One call generates users/fetch/pending, /fulfilled, and /rejected
export const fetchUsers = createAsyncThunk('users/fetch', async () => {
  const res = await fetch('/api/users');
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json();      // becomes action.payload on "fulfilled"
});

const usersSlice = createSlice({
  name: 'users',
  initialState: { items: [], loading: false, error: null },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUsers.pending,   (state) => { state.loading = true;  state.error = null; })
      .addCase(fetchUsers.fulfilled, (state, action) => { state.loading = false; state.items = action.payload; })
      .addCase(fetchUsers.rejected,  (state, action) => { state.loading = false; state.error = action.error.message; });
  }
});

Practice & Quiz

const fetchProducts = () => {
    // TODO: return async (dispatch) => { ... }
};

const fetchProducts = () => {
    return async (dispatch) => {
        dispatch({ type: 'PRODUCTS_REQUEST' });
        try {
            const res = await fetch('/api/products');
            if (!res.ok) throw new Error(`HTTP ${res.status}`);
            const products = await res.json();
            dispatch({ type: 'PRODUCTS_SUCCESS', payload: products });
        } catch (error) {
            dispatch({ type: 'PRODUCTS_FAILURE', payload: error.message });
        }
    };
};

const fetchProductsIfNeeded = () => {
    return (dispatch, getState) => {
        const { products } = getState();
        if (products.items.length === 0 && !products.loading) {
            return dispatch(fetchProducts());
        }
        return Promise.resolve();
    };
};

Best Practices & Pitfalls

✅ Do

• Dispatch a request / success / failure trio so the UI can show loading and error states
• return the promise from your thunk so callers can await or chain it
• Check response.ok — fetch does not reject on 4xx/5xx
• Read state via the provided getState, never by importing the store
• Prefer createAsyncThunk in new projects to cut boilerplate

❌ Don't

• Don't put fetch or timers inside reducers — they must stay pure
• Don't import the store directly inside an action file (circular dependency); use getState
• Don't swallow errors with a generic message — surface what actually failed
• Don't forget to dispatch a failure action, or the spinner spins forever

// ❌ Caller can't tell when this finished
const fetchData = () => async (dispatch) => {
  const data = await api.getData();
  dispatch({ type: 'FETCH_SUCCESS', payload: data });
};

// ✅ Return it so dispatch(fetchData()).then(...) works
const fetchData = () => async (dispatch) => {
  const data = await api.getData();
  dispatch({ type: 'FETCH_SUCCESS', payload: data });
  return data;
};

Summary

📚 Additional Resources

• Redux — Writing Logic with Thunks
• Redux Fundamentals — Async Logic & Data Fetching
• Redux Toolkit — createAsyncThunk API
• Redux Style Guide — Use Thunks for Async Logic

🚀 What's Next?

You have used a ready-made middleware; now you will build your own. The next lesson, Custom Middleware, shows how to write validation, persistence, rate-limiting, and analytics middleware from scratch — applying the exact store => next => action pattern thunk is built on.