React-Redux macht google places api zu einem Versprechen

Question

Ich bin ein bisschen neu im react/redux-Stack und habe eine Frage, wie ich die Daten, die ich von google place api bekomme, von einer Aktion an einen Reducer schicke.

Aus dem Tutorial, ich folgte, auf der Ebene der Aktion, ich eine Zusage an den Reducer, und react-Versprechen behandelt dies und speichern Sie die Versprechen/Daten in den Zustand. (dies kann nicht der beste Ansatz sein, aber wie gesagt, ich bin ein bisschen neu in diesem Stapel und ich versuche zu folgen, was ich bisher gelernt haben)

Hier ist meine Aktion:

export const FETCH_RESTAURANTS = 'FETCH_RESTAURANTS'; 

export function fetchRestaurants(lat = '51.5033640', lon = '-0.1276250') { 

var pyrmont = new google.maps.LatLng(lat,lon); 

const map = new google.maps.Map(document.getElementById('map'), { 
    center: pyrmont, 
    zoom: 15 
}); 

var request = { 
    location: pyrmont, 
    radius: '500', 
    query: 'restaurant', 
    types: ['restaurant'] 
}; 

const service = new google.maps.places.PlacesService(map); 
service.nearbySearch(request, function(a, b) { 
    console.log('here', a, b); 
}); 

return { 
    type: FETCH_RESTAURANTS, 
    payload: ???? 
}; 
} 

Von diesem Code aus scheint der nearbySearch den Job zu erledigen, da er eine Liste der Restaurants in der Konsole anzeigt. Aber ich verstehe nicht wirklich, wie ich auf diese Daten außerhalb des Callbacks zugreifen und es zu dem Reducer zurückgeben kann, damit es in meinen Zuständen gespeichert werden kann.

Nur für den Fall, das ist, wie ich mit dem Versprechen auf einen axios Anruf tat es, das und das gearbeitet ist, was ich zu tun versucht:

export const FETCH_WEATHER = 'FETCH_WEATHER'; 
export function fetchWeather(city) { 
const url = `${ROOT_URL}&q=${city},us`; 
const request = axios.get(url); 

return { 
    type: FETCH_WEATHER, 
    payload: request 
}; 
} 

Answer 1

Sie haben eine Asynchron-Bibliothek, die Griffe verwenden asynchrone Anrufe Eine der gebräuchlichen Bibliotheken ist redux thunk.

export function fetchRestaurants(lat = '51.5033640', lon = '-0.1276250') { 
    return (dispatch) => { 

     ... 

     service.nearbySearch(request, function(a, b) { 
      console.log('here', a, b); 
      dispatch(setNearbySearchResult(a,b)); 
     }); 
    } 
} 

function setNearbySearchResult(a,b) { 
    return { 
     type: FETCH_RESTAURANTS, 
     payload: {a,b} 
    }; 
} 
// call this function in componentDidMount 

dispatch(fetchResturants(lat,long))