Reactjs 如何为api请求显示不同的微调器？

我使用React和Redux。我想分别为每个请求显示一个微调器。假设我有一个包含多个小部件的仪表板，它们都有不同的api调用

在状态内部使用一个isLoading是不够的

我真的应该像isLoadingWidget1、isLoadingWidget2、isLoadingWidget3这样做吗

有更好的方法吗？我不想在状态中多次加载isLoadingXXX

我现在的减速机

const initialState = {
    posts: [],
    isLoading: false,
    isLoadingWidget1: ????
};


export default ( state = questionReducerDefaultState, action ) => {
    switch ( action.type ) {
        case SET_LOADING: 
            return {
                ...state,
                isLoading: true
            };

        case CLEAR_LOADING:
            return {
                ...state,
                isLoading: false
            };

        case GET_POSTS:
            return {
                ...state,
                posts: action.payload
            };

        default:
            return state;
    };
};

我目前的行动

export const startGetPosts = () => {
    return ( dispatch ) => {
        dispatch( setLoading() );

        return axios.get( '/api/posts' ).then( ( res ) => {
            dispatch({
                type: GET_POSTS,
                payload: res.data
            });

            dispatch( clearLoading() );
        }).catch( ( err ) => {
            console.log( err );
        });
    };
};

谢谢

您只需添加：

const initialState = {
    posts: [],
    isLoading: false,
    widget: 0
};

export default ( state = questionReducerDefaultState, action ) => {
    switch ( action.type ) {
        case SET_LOADING: 
            return {
                ...state,
                isLoading: true,
                widget: action.widget
            };
        //...
    };
};

你可以称之为

dispatch({
    type: SET_LOADING,
    widget: 1
})

然后根据小部件编号显示当前小部件

，您只需添加：

const initialState = {
    posts: [],
    isLoading: false,
    widget: 0
};

export default ( state = questionReducerDefaultState, action ) => {
    switch ( action.type ) {
        case SET_LOADING: 
            return {
                ...state,
                isLoading: true,
                widget: action.widget
            };
        //...
    };
};

你可以称之为

dispatch({
    type: SET_LOADING,
    widget: 1
})

---

然后根据widget number，您将显示当前的widget

这与我的想法一致，除非同时加载多个widget，否则应该可以正常工作。@TonyAbrams在这种情况下，您可以使

widget

成为一个数组这与我的想法一致，除非同时加载多个小部件，否则应该可以正常工作。@TonyAbrams在这种情况下，您可以将

小部件
设置为数组