How to handle multiple api request,to show loading indicator from one variable in redux store

Question

i wanted to show loader for each and every request individually depending on what request made,Suppose in dashboard i have muiltple widget and they all have different api call, i wanted to show different loader for each request made,

one way is to make adding isLoading flag for every request made,which i think is not the good solution as the application grows,and i am finding solution that can handle multiple request from one flag

so how should i do to make dynamic individual loader based on every request

below is my reducer and action

reducer

export const intialstate = {
isAuth: false,
isLoading: false,
btnDisable: false
};

export default function(state = intialstate, action) {
switch (action.type) {
    case API_REQUEST:
        return {
            ...state,
            isLoading: true,
        };
    case API_SUCCESS:
        return {
            ...state,
            isLoading: false,
            isError: null
        };
    case API_FAILURE:
        return {
            ...state,
            isError: action.payload,
            isLoading: false,
        };
    // no default
 }
 return state;
}

action.js

export const AnyAPIRequest = () => {
return (dispatch) => {
    dispatch({
        type: API_REQUEST
    });

    API.anygetcall()
        .then((res) => {
            dispatch({
                type: API_SUCCESS
            });

            dispatch({ type: GETLIST, payload: res });
        })
        .catch((err) => {
            dispatch({
                type: API_FAILURE,
                payload: err
            });
        });
};
};

Please help,how to implement dynamic loader based on different request and let me know any thing to update in current workflow

Answer 1

Two ways:

1. Have an integer count of API calls loading. IsLoading: IsLoading + 1 and then show the loading indicator if IsLoading > 1
2. Name each of your IsLoading differently to show different loading indicators. For example if you had a call to get students and a call to get teachers, you would have IsLoadingStudents and IsLoadingTeachers and have separate loading indicators for each component in the app

Answer 2

If you don't want to add a new isLoadingXXX for each new API request, you can use a collection and give each API request a string ID. Something like the following:

Reducer:

export const intialstate = {
  isAuth: false,
  isLoadingRequestIds: [],
  btnDisable: false
};

export default function(state = intialstate, action) {
switch (action.type) {
    case API_REQUEST:
        return {
            ...state,
            isLoadingRequestIds: [...state.isLoadingRequestIds, action.requestId],
        };
    case API_SUCCESS:
        return {
            ...state,
            isLoadingRequestIds:
                state.isLoadingIds.splice(state.isLoadingRequestIds.indexOf(action.requestId)).slice(),
            isError: null
        };
    case API_FAILURE:
        return {
            ...state,
            isError: action.payload,
            isLoadingRequestIds:
                state.isLoadingIds.splice(state.isLoadingRequestIds.indexOf(action.requestId)).slice(),
        };
    // no default
}
return state;
}

Actions:

export const AnyAPIRequest = (requestId) => {
  return (dispatch) => {
      dispatch({
          requestId,
          type: API_REQUEST
      });

      API.anygetcall()
          .then((res) => {
              dispatch({
                  requestId,
                  type: API_SUCCESS
              });

              dispatch({ type: GETLIST, payload: res });
          })
          .catch((err) => {
              dispatch({
                  requestId,
                  type: API_FAILURE,
                  payload: err
              });
          });
  };
};

export const StudentAPIRequest = () => AnyAPIRequest('student');
export const TeacherAPIRequest = () => AnyAPIRequest('teacher');