반응 작업에서의 비동기 함수 처리

Question

geocodeByAddress 함수를 사용하여 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} 
    }; 

} 

. 어떻게 대처할 수 있니? 공리와 함께 반응을 일으키는 것이 좋겠지 만이 경우에는 약속이 없습니다.

감사와 최고의 regrads.

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