2017-05-30 7 views
0

私は初めてredux thunkを使用しています。連鎖操作の適切な方法は何ですか?reduxサンクの連鎖操作の適切な方法は?

ユーザー入力が与えられた後で、データがGoogle Maps APIの応答がある場合は、すぐにそのデータを使用してその場所の天気を取得したいと考えています。 Redux thunkは動作していますが、最初の操作(ロケーションの取得)のみです。 Data2request2)はいつもundefinedですが、それはなぜですか?

export function fetchLocation(city) { 
     const urlGoogle = `https://maps.googleapis.com/maps/api/geocode/json?address=${city}&key=${API_KEY_GOOGLE}`; 
     const request = axios.get(urlGoogle); 

     return (dispatch) => { 
     request.then(({ data }) => { 
      dispatch({ type: FETCH_LOCATION, payload: data }); 

      const lat = data.results["0"].geometry.location.lat; 
      const lng = data.results["0"].geometry.location.lng; 
      const urlWunder = `https://api.wunderground.com/api/${API_KEY_WUNDERGROUND}/forecast10day/q/${lat},${lng}.json`; 

      console.log(urlWunder); // Link is ok, it works in browser 

      const request2 = axios.get(urlWunder); 
      request2.then(({ data2 }) => { 
      console.log('Data2', data2); // Getting undefined, why ? 
      dispatch({ type: FETCH_WEATHER, payload: data2 }); 
      }); 
     }); 
     }; 
    } 

答えて

1

それは、2番目の要求は、たとえば、response.data2という名前のフィールドを返していない可能性がありますので、あなたがそれをdestructureとき、data2は未定義になります。おそらく、dataという名前のフィールドを探す必要がありますが、別のローカルパラメータ名(request2.then({data : data2}))を指定する必要があります。

+0

ありがとうございます@markerikson! –

関連する問題