redux-observable Actions must be plain objects. Use custom middleware for async actions

Question

When I comment out getCurrentPositionEpic in the below code, the app works. But if I leave it uncommented I get the error:

Actions must be plain objects. Use custom middleware for async actions.

export const rootEpic = combineEpics(
  fetchCategoriesEpic,
  getCurrentLocationEpic,
  getCurrentPositionEpic
)

const store = createStore(
  rootReducer,
  initialState,
  composeWithDevTools(
    applyMiddleware(createEpicMiddleware(rootEpic))
  )
)

location.epic.js

const getCurrentPosition$ = getCurrentPositionObservable(
  { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
)

getCurrentPosition$.subscribe(
  (position) => {
    console.log(position)
    const positionObject = {
      lat: position.coords.latitude,
      lng: position.coords.longitude
    }
    //store.dispatch(updateRegion(positionObject))
    //getCurrentLocation(positionObject)
  },
  (err) => {
    console.log('Error: %s', err)
  },
  () => {
    console.log('Completed')
  })

export const getCurrentLocationEpic = action$ =>
  action$.ofType(GET_CURRENT_LOCATION)
    .mergeMap(() =>
      Observable.fromPromise(Geocoder.geocodePosition(makeSelectLocation()))
        .flatMap((response) => Observable.of(
          getCurrentLocationFulfilled(response)
        ))
        .catch(error => Observable.of(getCurrentLocationRejected(error)))
    )

export const getCurrentPositionEpic = action$ =>
  action$.ofType(GET_CURRENT_POSITION)
    .mapTo(() => getCurrentPosition$
      .flatMap((response) => Observable.of(
        getCurrentPositionFulfilled(response)
      ))
      .catch(error => Observable.of(getCurrentLocationRejected(error)))
    )

the below code is just a helper used to convert react native navigator.geolocation.getCurrentPosition to an observable instead of a function taking a callback.

callBackToObservable.js

import { Observable } from 'rxjs'

export const getCurrentPositionObservable = Observable.bindCallback(
  (options, cb) => {
    if (typeof options === 'function') {
      cb = options
      options = null
    }
    navigator.geolocation.getCurrentPosition(cb, null, options)
  })

What could be causing the error?

trying passing in the store:

export const getCurrentPositionFulfilledEpic = (action$, store) =>
  action$.ofType(GET_CURRENT_POSITION_FULFILLED)
        .mergeMap(() =>{
  console.log(store)***************** store is populated here
  return Observable.fromPromise(Geocoder.geocodePosition({
    lat: store.getState().get('searchForm').get('position').lat,***but not here
    lng: store.getState().get('searchForm').get('position').lng
  }))
    .flatMap((response) => Observable.of(
      getCurrentLocationFulfilled(response)
    ))
    .catch(error => Observable.of(getCurrentLocationRejected(error)))
}
)

Using https://github.com/devfd/react-native-geocoder for Geocoder.geocodePosition

jayphelps · Accepted Answer · 2017-05-02 23:00:04Z

The problem is your usage of mapTo. You're basically saying "map this action to an Observable" so now your epic returns an Observable of Observable of actions Observable<Observable<Action>> instead of just an Observable of actions.

Said another way, your epic is now emitting Observables instead of emitting actions. You'd instead need to use a merging strategy operator like mergeMap, switchMap, etc to merge to flatten/merge the inner Observable chain into the top-level one. flatMap is an alias to mergeMap, btw.

export const getCurrentPositionEpic = action$ =>
  action$.ofType(GET_CURRENT_POSITION)
    .mergeMap(() => getCurrentPosition$
      .flatMap((response) => Observable.of(
        getCurrentPositionFulfilled(response)
      ))
      .catch(error => Observable.of(getCurrentLocationRejected(error)))
    )

One other thing--you don't need to use flatMap aka mergeMap to map the getCurrentPosition$ to the getCurrentPositionFulfilled action because it's 1:1. You only would need that if it's 1 to many.

export const getCurrentPositionEpic = action$ =>
  action$.ofType(GET_CURRENT_POSITION)
    .mergeMap(() => getCurrentPosition$
      .map((response) => getCurrentPositionFulfilled(response))
      .catch(error => Observable.of(getCurrentLocationRejected(error)))
    )

There's no real harm in using it your way, but it might confuse others who maintain the code later.

Collectives™ on Stack Overflow

redux-observable Actions must be plain objects. Use custom middleware for async actions

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related