Question

我正在开发基于位置的应用。要从API获取数据，我需要两件事：位置，当然还有与互联网的连接。

在应用程序启动时，我想尝试获取用户的GPS位置。如果无法做到这一点，则应提示用户在模态对话框中输入城市或地址。收到GPS位置或用户手动输入位置后，经度和经度将保存在redux商店中。

在商店中没有lat和long之前，我无法从API获取任何数据，因为它们基于用户位置。

所以我看到了几个必须在启动时完成的任务：

尝试获取GPS位置
隐藏SplashScreen
如果GPS位置不可用，则应显示进入城市的模式
从API获取数据（需要GPS位置和互联网）
显示消息，表示没有互联网连接

我试图将这些内容放在流程图中而不考虑UML或标准。也许有助于理解我尝试存档的内容。

问题

1）什么时候应该触发提取数据？启动后，您可以使用 Pull-To-Refresh 或 Retry 按钮再次获取。但是这应该在启动时触发到哪里？在ListContainer的componentWillMount？

中

2）如何等待获取位置和互联网连接？终极版-佐贺？

我目前的方法是使用redux-saga，但我不知道，如果它是解决这个问题的正确方法......

为了使用redux-saga，我改变了我的行动，现在有三个，对于传奇相关的操作：GPS_POSITION_RECEIVED，SET_POSITION（在LocationModal中设置位置时）和{{1} }。问题是，我不能等待/采取所有行动，因为GPS_POSITION_RECEIVED和SET_POSITION永远不会同时发生。用户可以通过导航器或来获取GPS。

INTERNET_AVAILABLE

然后还有一些函数，我在App组件的import { take, put, call, fork, select, all } from 'redux-saga/effects' export function* init() { try { // Wait for the position console.log('Start init...'); console.log('Wait for position and internet...') const posAndInet = yield take(['GPS_POSITION_RECEIVED', 'INTERNET_AVAILABLE']); console.log('Position and internet ready...'); // Fetch data now // .... } catch (e) { console.error(e); } } export default function* rootSaga() { yield[ fork(init), ]; }中触发。也许与佐贺或一般来说有更好的地方吗？

componenWillMount()

Answer 1

两种方式：

不使用Redux - 将初始化逻辑放在正确的Component componentDidMount函数
使用Redux - 使用包Redux-Saga并观察在初始化商店后立即调度的INITIALIZE操作。

Answer 2

我没有使用redux-saga 所以，如果我是你，我会像那样解决它， actiontypes.js

export const APP_TASK_STATE="APP_TASK_STATE";

在reducer task_state上创建一个属性，该属性值为enum

 start //as default,
 clean // all is clean  do after this tasks 
 splash // show splash screen 
 gps-modal // show gps modal 
 no-internet / for no internet

reducer.js

  let newState = Object.assign({}, state); 
    if(action.type===""APP_TASK_STATE"){

      newState.task_state=action.payload;

     return newState;  
   }

actions.js

import * as Actions from './actiontypes';

//Task States  Handler 
export function taskState(state) {
    return { type: Actions.APP_TASK_STATE, payload: state };
}


export function readGps() {
    return (dispatch) => {
        dispatch(taskState('splash'));
        //i dont know how do you get  gps  but i must be async i think 
        getGps()
            .then((val) => {
                dispatch(taskState('clean'));
                // your gps state success function
                dispatch(yourgpsSuccesFunction(val));

            }).catch((e) => {
                dispatch(taskState('gps-modal'));
                // maybe you can show message or something
                dispatch(showMessage(e));
            });
    }
}
// After entering modal city name
export function fetchApi(city) {
    return (dispatch) => {
        dispatch(taskState('splash'));
        fetch().then((val) => {
            dispatch(taskState('clean'));
        }).catch((e) => {
            dispatch(taskState('no-internet'));
        });
    }
}

在componentWillMount（）

上调用readGps

在渲染

上使用reducers task_state上的switch case

我希望这有帮助

如何在React Native应用程序启动时组合多个任务

2 个答案: