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请求的其他微调器？

1 个答案: