如何处理多个 api 请求，以显示 redux 存储中一个变量的加载指示器

Question

我想根据发出的请求单独显示每个请求的加载程序，假设在仪表板中我有多个小部件，并且它们都有不同的 api 调用，我想为每个发出的请求显示不同的加载程序，

一种方法是为每个发出的请求添加isLoading标志，我认为随着应用程序的增长，这不是一个好的解决方案，并且我正在寻找可以处理来自一个标志的多个请求的解决方案

那么我应该如何根据每个请求制作动态的单独加载器

下面是我的减速器和动作

减速器

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;
}

动作.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
            });
        });
};
};

请帮助，如何根据不同的请求实现动态加载器，并让我知道当前工作流程中需要更新的任何内容

Answer 1

两种方式：

1. 加载 API 调用的整数计数。IsLoading: IsLoading + 1然后显示加载指示器如果IsLoading > 1
2. 每个的名称都IsLoading不同，以显示不同的加载指示器。例如，如果您有一个电话来联系学生和一个电话来联系教师，那么应用程序中的每个组件都会有IsLoadingStudents和和 单独的加载指示器IsLoadingTeachers

Answer 2

如果您不想isLoadingXXX为每个新的 API 请求添加一个新的，您可以使用集合并为每个 API 请求提供一个字符串 ID。像下面这样：

减速器：

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;
}

行动：

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');