React-redux 操作在异步操作完成之前返回

Question

我有一个使用 redux 的 React Native 应用程序，我希望我的操作可以设置 GPS 坐标，以便在商店中提供它们。您可以在代码中看到我的控制台日志，并且在“有坐标”之前记录了“返回操作”，这就是问题所在。

组件：

<TouchableOpacity style={{flex:1}} onPress={() => {
    this.props.setLocation();
}}>

Action.js

export function setLocation(){

    let coords = {
        latitude:0,
        longitude:0,
        navigatorError:''
    };

    navigator.geolocation.getCurrentPosition(
      (position) => {
        console.log('has coordinates');
        coords['latitude'] = position.coords.latitude
        coords['longitude'] = position.coords.longitude
        coords['navigatorError'] = null
      },
      (error) => coords['navigatorError'] = error.message,
        { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 },
      );

    console.log('action returning');
    return {
      type: 'set_location',
      payload: coords
    };
};

Reducer.js

export default (state = null, action) => {
    switch(action.type){
        case 'set_location':
            return action.payload;
        default:
            return state;
    }
}

注意：我实际上并没有在这个项目中使用 redux-thunk，我不确定它是否适合我在这里的需要。

Answer 1

您可以使用async 和await 来完成此操作。基本上，您需要 await 从异步调用返回的坐标。

类似这样的：

export async function setLocation(){

    let coords = {
        latitude:0,
        longitude:0,
        navigatorError:''
    };

    await navigator.geolocation.getCurrentPosition(
        (position) => {
            console.log('has coordinates');
            coords['latitude'] = position.coords.latitude
            coords['longitude'] = position.coords.longitude
            coords['navigatorError'] = null
        },
        (error) => coords['navigatorError'] = error.message,
            { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 },
        );

    console.log('action returning');
    return {
        type: 'set_location',
        payload: coords
    };
};

关于 async/await 的文档可以在 here 找到。