How to create an action creator for fetching data in Redux

Question

Can you explain to me How to create an action creator for fetching data in Redux?

Answer 1

To create an action creator for fetching data in Redux, use Redux Thunk for async actions.

Example:

const FETCH_DATA_REQUEST = 'FETCH_DATA_REQUEST';

const FETCH_DATA_SUCCESS = 'FETCH_DATA_SUCCESS';

const FETCH_DATA_FAILURE = 'FETCH_DATA_FAILURE';


// Action Creator (Thunk)

const fetchData = () => {

  return async (dispatch) => {

    dispatch({ type: FETCH_DATA_REQUEST });

    try {

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

      const data = await response.json();

      dispatch({ type: FETCH_DATA_SUCCESS, payload: data });

    } catch (error) {

      dispatch({ type: FETCH_DATA_FAILURE, error });

    }

  };

};