反応アクションでの非同期関数の処理

Question

私は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} 
    }; 

} 

私はundestandとしてgeocodeByAddressは非同期で、コールバック関数が、後に実行されたので、私は、それが動作しません知っています。それに対処する方法？私は公理と反応したポルミスを使うのがいいと思うが、この場合私は約束はしていない。

ありがとうございます。

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