Как сделать рассылку с редукс-стуком с аксиосами - PullRequest
Новая
       4

Как сделать рассылку с редукс-стуком с аксиосами

1 голос
/ 03 марта 2020

Во-первых, прошу прощения за мой английский sh.

Я пытаюсь сделать запрос с помощью redux-thunk .... Я не очень хорошо понимаю.

Моя идея такова сделать запрос, используя ax ios, но метод return undefined перед возвращаемым значением запроса.

Я не знаю, правильно ли я передаю отправку.

Можете ли вы мне помочь, пожалуйста? Что я делаю неправильно ???

Вот как использовать диспетчеризацию в моем компоненте: 

....

const mapDispatchToProps = dispatch => {
    return {
        createCustomersGeoJSON: () => dispatch(createCustomersGeoJSON()),
        getAdvicesData: hierarchy => dispatch(getAdvicesData(hierarchy)),
        getSocialNetworkData: () => dispatch(getSocialNetworkData()),
        dispatch,
    };
};

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(injectIntl(CustomersWidget));

В действиях я делаю это: 

export const getSocialNetworkData = () => {
    return dispatch => {
        dispatch({
            type: GET_SOCIAL_NETWORK_DATA,
            payload: fetchSocialNetworkData(),
        });
    };
};

И это код функции fetchSocialNetworkData: 

axios
    .get(`http://localhost:5000/socialRoute`)
    .then(data => {
        let response = Object.assign({}, data);
        if (
            response &&
            response.data &&
            response.data.tweets &&
            Array.isArray(response.data.tweets)
        ) {
            console.log("data.tweets: ", response.data.tweets);
            return response.data.tweets;
        }
        return [];
    })
    .catch(error => {
        console.log("Error gettin data from socialRoute: ", error);
    });

1 Ответ

2 голосов
/ 03 марта 2020

Это потому, что вы думаете, что возвращаете ответ, но то, что вы на самом деле возвращаете, - ничто, потому что вы обработали результат обещания в цепочке .then.

У вас есть два варианта:

Верните обещание и разрешите его в .then: 

function fetchSocialNetworkData() {
    return new Promise((resolve) => {
        axios
            .get(`http://localhost:5000/socialRoute`)
            .then(data => {
                let response = Object.assign({}, data);
                if (
                    response &&
                    response.data &&
                    response.data.tweets &&
                    Array.isArray(response.data.tweets)
                ) {
                    console.log("data.tweets: ", response.data.tweets);
                    resolve(response.data.tweets);
                }
                resolve([]);
            })
    })
}

ИЛИ

Используйте async / await (современный способ) 

async function fetchSocialNetworkData() {
    const data = await axios.get(`http://localhost:5000/socialRoute`);

    let response = Object.assign({}, data);
    if (
        response &&
        response.data &&
        response.data.tweets &&
        Array.isArray(response.data.tweets)
    ) {
        console.log("data.tweets: ", response.data.tweets);
        return response.data.tweets;
    }
    return [];
}

Оба из них - то же самое под капотом. IE они оба разные способы написания обещания.

Теперь. в своем толпе вы все еще просто вызываете эту функцию, что означает, что вы получите нерешенное обещание, а не результат этого обещания. Таким образом, гром становится следующим: 


export const getSocialNetworkData = () => {
    return async (dispatch) => {
        dispatch({
            type: GET_SOCIAL_NETWORK_DATA,
            payload: await fetchSocialNetworkData(),
        });
    };
};

От этого следует отказаться: вы можете далеко уйти, не понимая обещаний, но недостаток понимания всегда будет потолком для ваших JS навыков.

...