2017-05-30 1 views
0

J'utilise redux thunk première fois. Quelle est la bonne façon d'enchaîner les opérations? Je veux chercher l'emplacement après que l'entrée de l'utilisateur est donnée et quand il y a une réponse avec les données de Google Maps API, alors je veux utiliser immédiatement ces données pour chercher la météo pour cet endroit. Redux thunk fonctionne, mais uniquement pour la première opération (localisation). Data2 dans request2 est toujours undefined, pouvez-vous me dire pourquoi est-ce?Un bon moyen de chaîner les opérations dans le thunk redux?

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

Répondre

1

Il est probable que la deuxième demande ne retourne pas un champ nommé, disons, response.data2, donc quand vous déstructuré il, data2 sera définie. Vous devez probablement toujours rechercher un champ nommé data, mais lui donner un nom de paramètre local différent, par exemple: request2.then({data : data2}).

+0

Merci beaucoup @markerikson! –