Proper way of chaining operations in redux thunk?

Question

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

Answer 1

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