如何使用 axios 使用 redux-thunk 进行调度

Question

首先，为我的英语道歉。

我正在尝试使用 redux-thunk 发出请求....我不太明白。

我的想法是使用 axios 发出请求，但方法 return 在 return 请求值之前未定义。

我不知道我是否通过派遣。

你能帮帮我吗？我做错了什么？？？

这是在我的组件中使用 dispatch 的方式：

....

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

Answer 1

这是因为你认为你正在返回响应，但实际上你返回的是什么，因为你已经在 .then 链中处理了 promise 的结果。

您有两个选择：

Return 承诺并在 .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 它们都是写 promise 的不同方式。

现在。在你的thunk中，你仍然只是在调用那个函数，这意味着你将得到未解决的承诺而不是那个承诺的结果。所以thunk变成了：


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

需要注意的是，你可以在不理解 promises 的情况下走得很远，但缺乏理解将永远是你 JS 技能的上限。

如何使用 axios 使用 redux-thunk 进行调度

How to make dispatch with redux-thunk with axios

reactjs

redux

redux-thunk