如何使用redux进行反应/反应原生的重复事件?

时间:2017-01-08 13:35:24

标签: reactjs react-native redux redux-thunk redux-observable

我正在做一个反应本机应用程序,在用户的某些操作上将开始跟踪gps位置,并在其他停止。

但是,我正在寻找一些路障,没有找到正确的方法来做这个基于时间的位置跟踪器,因为它对于模式来说似乎并不自然。 以下是我的想法:

  1. 使用redux-thunk将其视为异步。
  2. 使用redux-observable定时事件。
  3. 使用sagas
  4. 在我的SetTimeout中使用component(这是最简单的解决方案,但我不想让我的用户无法浏览,我不认为这是一个用户界面的责任)

1 个答案:

答案 0 :(得分:0)

所以我将把这作为未来的参考,用我在写这个问题时最终工作的简单解决方案。

import * as types from './types'
var gpsGetInterval 
export function startLocationTracking(time = 1000){
    return dispatch => {
            gpsGetInterval = setInterval(() =>{
                navigator.geolocation.getCurrentPosition(
                (position) => {
                    dispatch({
                        type: types.NEW_POSITION,
                        state: JSON.stringify(position)
                    })
                })
            }, time) 
            dispatch({
                type: types.START_RUN
            })
        }
}

export function stopLocationTracking(){
    clearInterval(gpsGetInterval)
    return {
        type: types.STOP_RUN
    }
}

我理解这可能不具备可扩展性,您可能需要在epicsredux-observable下使用sagas。我在这个2面临的困难:

  • 使用redux-observable清除重复发生的事件并不清楚(或者看起来像是一种暂停它的解决方法)。
  • 使用sagas似乎不容易扩展或聚集。

redux-observables这里有我需要的代码,如果有人对这种情况有好主意,我想听听它:):

export function inStartRun(action$){
  return action$.ofType(types.START_RUN)
    .switchMap(function () {
      Rx.Observable
        .interval(1000)
        .do(function () { console.log('tick...') })
        .share()
        .mapTo({ type: types.STOP_RUN})
    });
}

特别感谢Jay Phelps在回购https://github.com/redux-observable/redux-observable/issues/168

中提出的问题