Как я могу показать другой счетчик для запроса API? - PullRequest
Новая
       12

Как я могу показать другой счетчик для запроса API?

0 голосов
/ 16 апреля 2019

Я использую 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 );
        });
    };
};

Спасибо

1 Ответ

2 голосов
/ 16 апреля 2019

Вы можете просто добавить: 

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

, а затем на основе номера виджета вы увидите текущий виджет

...