如何连结动作和史诗?

时间:2017-06-13 02:45:24

标签: redux-observable

我熟悉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动作,然后减速器"完成"位置信息,最后第二个史诗从状态获取完整的位置并广播它。

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

上面的代码可以工作,但是我想知道它是否能以某种方式在一个史诗上表达,特别是因为我有另一个案例,我需要等待并行请求产生的两个动作所以我需要做一些事情类似于使用Promise.all种模式

所能达到的效果

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

1 个答案:

答案 0 :(得分: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 }))
        ));