Redux with Thunk and Fetching

Goal: After completing this material, you will be able to:

• Attach middleware to the Redux store
• Debug using the Redux Logger
• Evaluate when it is appropriate to use Thunk
• Define a fetch request to an API
• Write a thunk action creator to make an asynchronous request to an API and dispatch another action when the response is received
• Refactor an async call in a React component to use Redux with Thunk

What is Middleware in Redux?

Think of Redux as a delivery service between a restaurant (your component) and the customer (the store). Middleware is like a quality control checkpoint — it inspects, modifies, or even halts the packages (actions) before they reach their destination.

Middleware allows you to:

• Log every action for debugging
• Handle asynchronous logic like API calls
• Dispatch additional actions or modify existing ones

Attaching Middleware: Redux Thunk and Logger

// Store setup with Redux Thunk and Logger
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import logger from 'redux-logger';
import rootReducer from './reducers';

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

Explanation: We apply two middlewares here:

• thunk to handle async logic
• logger to log actions for debugging

What is Redux Thunk?

Imagine Redux Thunk as a translator that allows action creators to speak async language. Normally, action creators return plain objects. With Thunk, they can return functions that delay execution and handle async operations like fetching data.

When to Use Thunk?

• When you need to perform side effects like API calls
• When one action depends on the result of another (chained actions)
• When you need to delay dispatching until certain conditions are met

Real-World Example: Ordering food online — you send a request (fetch), wait for the food (response), then update the UI (dispatch new action).

Making a Fetch Request to an API

fetch('https://api.example.com/items')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));
  

Explanation: We request data, wait for it to arrive (asynchronously), then process it.

Thunk Action Creator Example

const fetchItems = () => {
  return dispatch => {
    dispatch({ type: 'ITEMS_LOADING' });

    fetch('https://api.example.com/items')
      .then(response => response.json())
      .then(data => {
        dispatch({ type: 'ITEMS_SUCCESS', payload: data });
      })
      .catch(error => {
        dispatch({ type: 'ITEMS_ERROR', error });
      });
  };
};
  

Explanation:

• Dispatch an action to indicate loading
• Fetch data asynchronously
• Dispatch success or error based on the result

Refactor Async Call from Component to Redux

Before Thunk (inside component):

useEffect(() => {
  fetch('https://api.example.com/items')
    .then(response => response.json())
    .then(data => setItems(data));
}, []);
  

After Thunk (Redux handles async):

useEffect(() => {
  dispatch(fetchItems());
}, [dispatch]);
  

Advantages of Thunk + Redux

• Centralizes API calls for better maintenance and testing
• Keeps components focused on UI logic
• Makes state transitions more predictable and easier to debug

Analogy Recap

• Middleware: Quality control for actions
• Thunk: Translator for asynchronous action creators
• Fetch: Ordering and receiving data from a restaurant

Extra Learning Resources

• Redux Official Docs: https://redux.js.org
• Thunk Middleware: Redux Thunk GitHub
• MDN Fetch API: MDN Fetch Docs

Further Related Topics

• Redux Toolkit for simplifying Redux and Thunk setup
• Handling loading and error states in Redux
• Testing async Redux actions with Jest and Redux Mock Store
• Exploring other middleware: Redux Saga for advanced use cases