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

可以在here上找到有关异步/等待的文档。

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

1 个答案: