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

时间:2017-04-03 20:16:46

标签: reactjs asynchronous callback react-redux

我使用的是react-places-autocomplete包,其功能是geocodeByAddress。如果触发搜索操作,它应该返回地址的坐标。

这是我的代码:

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是异步的并且稍后会执行回调函数。怎么处理?我知道将反应与公理结合起来会很好,但在这种情况下,我没有承诺。

感谢和最好的回忆。

1 个答案:

答案 0 :(得分: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);
    }
}