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

Question

我使用 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 );
        });
    };
};

谢谢

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

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

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

How can I show different spinner for api request?

reactjs

redux

redux-thunk

react-redux