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

【问题标题】：How to combine several tasks at the startup of a React Native app如何在 React Native 应用程序启动时合并多个任务
【发布时间】：2017-11-05 00:58:05
【问题描述】：

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

在应用程序启动时，我想尝试获取用户的 GPS 位置。如果这不可能，则应提示用户在模式对话框中输入城市或地址。在接收到 GPS 位置或用户手动输入位置后，经纬度保存在 redux 存储中。

在商店中没有经纬度之前，我无法从 API 获取任何数据，因为它们是基于用户位置的。

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

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

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

问题

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

2）如何等待获取位置和互联网连接？ redux 传奇？

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

为了使用 redux-saga，我稍微改变了我的操作，现在有了三个，用于 saga 相关操作：GPS_POSITION_RECEIVED、SET_POSITION（在 LocationModal 中设置位置时）和INTERNET_AVAILABLE。问题是，我不能等待/采取所有行动，因为 GPS_POSITION_RECEIVED 和 SET_POSITION 永远不会同时发生。 GPS可以由导航器获取或用户自行选择。

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),
  ];
}

然后还有一些功能，我在 App 组件的componenWillMount() 中触发。也许与 Saga 或一般来说有更好的地方？

  if(Platform.OS == 'android') StatusBar.setBackgroundColor('#000');

  // Push Notifications
  OneSignal.addEventListener('registered', () => {
    // Track it to Google Analytics
    this.props.registeredPushNotifications();
  });

  OneSignal.addEventListener('ids', (device) => {
    // Save
    this.props.receivedPlayerId(device.userId);
  });

  // Trigger watch position
  this.props.watchPosition();

  // Trigger internet connection oberservation
  this.props.watchInternetConnection();

  setTimeout(SplashScreen.hide, 1000);

【问题讨论】：

标签： reactjs react-native redux react-redux redux-saga

【解决方案1】：

两种方式：

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

【讨论】：

我正在使用 redux。佐贺看起来很有趣..我必须尝试理解它......

【解决方案2】：

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

export const APP_TASK_STATE="APP_TASK_STATE";

在reducer task_state 上创建一个属性值作为枚举的属性

 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

在reducer task_state 上使用switch case

希望对你有帮助

【讨论】：