I'm using redux thunk
first time. What is proper way of chaining operations?
I want to fetch location after user input is given and when there is response with data from Google Maps API
, then I want to immediately use that data to fetch weather for that location. Redux thunk
is working, but only for first operation (fetching location). Data2
in request2
is always undefined
, can you tell me why is that?
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 });
});
});
};
}
It's likely that the second request isn't returning a field named, say, response.data2
, so when you destructure it, data2
will be undefined. You probably still need to look for a field named data
, but give it a different local parameter name, like: request2.then({data : data2})
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.