redux-observable - 如何链接 Action 和史诗？

Question

我熟悉 React 和 Redux，但对 RxJS 和 redux-observable 还是很陌生。

我正在处理一个我已经设法解决的流程，看起来像这样:

const reducer = (state, action)  => {
   switch(action.type) {
   // some other cases here
   case Types.LOCATION_GEOCODED: 
      const { address, place_id } = action
      return {...state, address, place_id }
   }
}

const updateLocationEpic = (action$, store) =>
   action$.ofType(Types.UPDATE_LOCATION)
   .mergeMap((action) =>
      Observable.fromPromise(reverseGeocode(store.getState().location))
      .map(({address, place_id}) => ({type: Types.LOCATION_GEOCODED, address, place_id}))
   )

const broadcastLocationEpic = (action$, store) =>
   action$.ofType(Types.LOCATION_GEOCODED)
   .map((action) => ({type: Types.NEW_CURRENT_LOCATION, store.getState().location}))

第一个史诗在异步请求之后发出 LOCATION_GEOCODED Action ，然后reducer“完成”位置信息，最后第二个史诗从状态中获取完整的位置并广播它。

关键是要确保在reducer 处理完上一个 Action (LOCATION_GEOCODED)之后触发NEW_CURRENT_LOCATION Action ，因为它需要查询刚刚更新的状态。

上面的代码有效，但我想知道它是否可以在单个史诗中以某种方式表达，特别是因为我有另一个案例，我需要等待并行请求产生的两个 Action ，所以我需要做一些类似于你会用 Promise.all 实现一种图案

有没有更好的方法在单个史诗上执行此操作？

Answer 1

const updateLocationEpic = (action$, store) =>
    action$.ofType(Types.UPDATE_LOCATION)
        .mergeMap((action) => Observable.merge(
            Observable.fromPromise(reverseGeocode(store.getState().location))
                .map(({ address, place_id }) => ({ type: Types.LOCATION_GEOCODED, address, place_id })),

            action$.ofType(Types.LOCATION_GEOCODED)
                .map((action) => ({ type: Types.NEW_CURRENT_LOCATION, location: store.getState().location }))
        ));