Question

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

一种方法是为每个请求添加 isLoading 标志，我认为这不是应用程序增长的好解决方案，我找到的解决方案可以处理来自一个标志的多个请求< / p>

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

下面是我的减速器和动作

减速器

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

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

Answer 1

两种方式：

加载API调用的整数计数。 IsLoading: IsLoading + 1，然后显示加载指示符IsLoading > 1
以不同的方式为每个IsLoading命名，以显示不同的加载指标。例如，如果您打电话给学生并打电话来接听老师，那么您将拥有IsLoadingStudents和IsLoadingTeachers并为应用中的每个组件设置单独的加载指示符

Answer 2

如果您不想为每个新的API请求添加新的isLoadingXXX，则可以使用集合并为每个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');

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

2 个答案: