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

Question

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

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

那么我应该怎么做才能根据每个请求制作动态的单独加载器

下面是我的reducer和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
            });
        });
};
};

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

Answer 1

两种方式:

1. 有一个整数计数的 API 调用加载。 IsLoading: IsLoading + 1 如果 IsLoading > 1
，则显示加载指示器
2. 以不同方式命名每个 IsLoading 以显示不同的加载指示器。例如，如果您有一个获取学生的调用和一个获取教师的调用，您将有 IsLoadingStudents 和 IsLoadingTeachers，并且应用中的每个组件都有单独的加载指示器<