在反应动作中处理异步函数

Question

我正在使用具有 geocodeByAddress 功能的 react-places-autocomplete 包。如果触发搜索操作，它应该 return 地址的坐标。

这是我的代码：

export function handleSearch(address){
    console.log("handleSearch searching for address: " + address )
    var LAT = '';
    var LNG = '';
    const request = geocodeByAddress(address,  (err, { lat, lng }, result) => {
        var res = "";
        if (err) {
            console.log('Oh no!', err);
            res = 'Oh no! Something went wrong :(';
        } else {
            console.log(
                `iYay! got latitude and longitude for ${address}`, { lat, lng });
            res = `Yay! got latitude and longitude for ${address}: ${lat}, ${lng}`;
        }
        LAT = lat;
        LNG = lng;
        console.log(result);
    });
    console.log("request", request);
    return {
        type: 'SEARCH_EVENT',
        payload: {"lat": LAT, "lng": LNG}
    };

}

我知道它不起作用，因为据我所知，geocodeByAddress 是异步的，回调函数稍后执行。如何处理？我知道将 react-pormise 与公理一起使用会很好，但在这种情况下我没有承诺。

谢谢，祝你好运。

Answer 1

调查redux-thunk。它使您可以非常轻松地处理异步操作。

export function handleSearch(address){
    return (dispatch) => {
        console.log("handleSearch searching for address: " + address )
        var LAT = '';
        var LNG = '';
        const request = geocodeByAddress(address,  (err, { lat, lng }, result) => {
            var res = "";
            if (err) {
                console.log('Oh no!', err);
                res = 'Oh no! Something went wrong :(';
            } else {
                console.log(
                    `iYay! got latitude and longitude for ${address}`, { lat, lng });
                res = `Yay! got latitude and longitude for ${address}: ${lat}, ${lng}`;
            }
            LAT = lat;
            LNG = lng;
            console.log(result);

            dispatch({
                type: 'SEARCH_EVENT',
                payload: {"lat": LAT, "lng": LNG}
            });
        });

        console.log("request", request);
    }
}

在反应动作中处理异步函数

Handling async functions in react action

asynchronous

callback

reactjs

react-redux