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

Question

首先，为我的英语道歉。

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

我的想法是使用 axios 发出请求，但方法在返回请求值之前返回 undefined。

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

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

这是在我的组件中使用 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 的结果。

您有两个选择：

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

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

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

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