How to enhance async operations in Redux using middleware

Question

Can you tell me How to enhance async operations in Redux using middleware?

Answer 1

Redux-Thunk (Simple Async Operations)

What it does: Allows action creators to return functions (thunks) instead of plain action objects.

Use case: Best for basic async operations like API calls.

Example:

import { createStore, applyMiddleware } from 'redux';

import thunk from 'redux-thunk';

// Async action creator

const fetchData = () => async (dispatch) => {

  dispatch({ type: 'FETCH_REQUEST' });

  try {

    const response = await apiCall();

    dispatch({ type: 'FETCH_SUCCESS', payload: response.data });

  } catch (error) {

    dispatch({ type: 'FETCH_FAILURE', payload: error.message });

  }

};

// Store setup

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