React-Redux 将 google places api 变成一个 promise

Question

我是 react/redux 堆栈的新手，并且有一个关于如何将我从 google place api 获得的数据从操作发送到减速器的问题。

从我遵循的教程中，在操作级别上，我向 reducer 发送了一个承诺，react-promise 处理这个并将承诺/数据保存在状态中。 （这可能不是最好的方法，但正如我所说，我对这个堆栈有点陌生，我正在努力遵循我到目前为止所学到的知识）

这是我的行动：

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: ????
 };
}

从这段代码中，nearbySearch 似乎可以完成这项工作，因为它在控制台中显示了餐厅列表。但是我真的不明白如何在回调之外访问这些数据并将其返回给减速器，以便可以将其保存在我的状态中。

以防万一，这就是我在axios 通话中做出承诺的方式，它奏效了，这就是我想要做的：

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

您必须使用处理异步调用的异步库。使用的常用库之一是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))