title: redux-observable to get current location
body: <p>I'm trying to use react native <a href="https://facebook.github.io/react-native/docs/geolocation.html" rel="nofollow noreferrer">Geolocation</a> to <code>getCurrentPosition</code> and then as soon as the position is returned, use <a href="https://github.com/devfd/react-native-geocoder" rel="nofollow noreferrer">react native geocoder</a> to use that position to get the location. I'm using <a href="https://github.com/redux-observable/redux-observable" rel="nofollow noreferrer">redux-observable</a> epics to get all of this done. </p>
  
  <p>Here are my two epics:</p>
  
  <p><strong>location.epic.js</strong></p>
  
  <pre><code>import { updateRegion } from '../map/map.action'
  import Geocoder from 'react-native-geocoder'
  
  export const getCurrentLocationEpic = action$ =&gt;
    action$.ofType(GET_CURRENT_LOCATION)
      .mergeMap(() =&gt;
        Observable.fromPromise(Geocoder.geocodePosition(makeSelectLocation()))
          .flatMap((response) =&gt; Observable.of(
            getCurrentLocationFulfilled(response)
          ))
          .catch(error =&gt; Observable.of(getCurrentLocationRejected(error)))
      )
  
  export const getCurrentPositionEpic = action$ =&gt;
    action$.ofType(GET_CURRENT_POSITION)
      .mergeMap(() =&gt;
        navigator.geolocation.getCurrentPosition(
          (position) =&gt; Observable.of(
            updateRegion(position),
            getCurrentLocation(position)
          ),
          error =&gt; Observable.of(getCurrentPositionRejected(error)),
          { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
        ).do(x =&gt; console.log(x))
      ).do(x =&gt; console.log(x))
  </code></pre>
  
  <p>As soon as the app starts, this code executes:</p>
  
  <pre><code>class Vepo extends Component {
    componentDidMount() {
      const { store } = this.context
      this.unsubscribe = store.subscribe(() =&gt; { })
      store.dispatch(fetchCategories())
      store.dispatch(getCurrentPosition())
    }
  </code></pre>
  
  <p><code>fetchCategories()</code> is an action that has an epic too, but that is working. dispatching the <code>getCurrentPosition()</code> action runs through the epic above. The only output that I can see is that my reducer handles <code>getLocationRejected()</code> as it console logs this:</p>
  
  <pre><code>there was an issue getting your current location:  Error: invalid position: {lat, lng} required
      at Object.geocodePosition (geocoder.js:15)
      at MergeMapSubscriber.project (location.epic.js:17)
      at MergeMapSubscriber._tryNext (mergeMap.js:120)
      at MergeMapSubscriber._next (mergeMap.js:110)
      at MergeMapSubscriber.Subscriber.next (Subscriber.js:89)
      at FilterSubscriber._next (filter.js:88)
      at FilterSubscriber.Subscriber.next (Subscriber.js:89)
      at Subject.next (Subject.js:55)
      at Object.dispatch (createEpicMiddleware.js:72)
      at Object.dispatch (devTools.js:313)
  </code></pre>
  
  <p>Here is my reducer:</p>
  
  <pre><code>const searchPage = (
    initialLocationState = initialState.get('searchForm').get('location'),
    action: Object): string =&gt; {
    switch (action.type) {
      case GET_CURRENT_LOCATION_FULFILLED: {
        return action.payload
      }
      case GET_CURRENT_LOCATION_REJECTED: {
        console.log('there was an issue getting your current location: ', 
          action.payload)
        return initialLocationState
      }
      case GET_CURRENT_POSITION_REJECTED: {
        console.log('there was an issue getting your current position: ', 
          action.payload)
        return initialLocationState
      }
      default:
        return initialLocationState
    }
  }
  </code></pre>
  
  <p>Is there anything obvious I am doing wrong? My attempt to debug by adding <code>.do(x =&gt; console.log(x))</code> does nothing, nothing is logged to the console. <code>updateRegion()</code> never does fire off because that dispatches an action and the reducer <code>UPDATE_REGION</code> never executes. But the execution must make it into the success case of <code>getCurrentPosition()</code> eg:</p>
  
  <pre><code>(position) =&gt; Observable.of(
                updateRegion(position),
                getCurrentLocation(position)
              ),
  </code></pre>
  
  <p>must execute because the <code>getCurrentLocation(position)</code> does get dispatched. </p>
  
  <p>Where am I going wrong?</p>