How to use middleware to handle asynchronous actions in Redux

Question

Can you explain How to use middleware to handle asynchronous actions in Redux?

Answer 1

To handle asynchronous actions in Redux, use middleware like Redux Thunk.

Steps:

Install Redux Thunk:

npm install redux-thunk

Apply Middleware:

import { createStore, applyMiddleware } from 'redux';

import thunk from 'redux-thunk';

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


Create Async Action (Thunk):

const fetchData = () => {

  return async (dispatch) => {

    dispatch({ type: 'FETCH_START' });

    try {

      const response = await fetch('/api/data');

      const data = await response.json();

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

    } catch (error) {

      dispatch({ type: 'FETCH_ERROR', error });

    }

  };

};