代码之家 › 专栏 › 技术社区 › dragonfly

如何在组件中订阅epic的动作输出流

redux-observable redux

1

dragonfly · 技术社区 · 6 年前

我正在重构 loadInstruments 重击redux observable epic,因为它正在做越来越多的异步工作,再加上我需要取消操作等(教程中的典型wiki搜索场景)。

这就是我的组件如何使用这个thunk(它是通过 mapDispatchToProps

this.props.loadInstruments(queryParams).then(...)

Thunk做了很多事情,其中之一就是AJAX调用。我也可以等待这个结果。

但是在重构到 redux-observable 而epic,我没有办法从epic返回一个值作为我的 ofType 正在筛选):

const loadInstruments = ({ type: 'LAUNCH_LOAD_INSTRUMENTS_EPIC' })

什么时候? LAUNCH_LOAD_INSTRUMENTS_EPIC 被抓住了 ,它是用rxjs magic运行的,一旦加载了工具(AJAX调用),那么它们最终将在存储中(通过使用 switchMap 以及发送更新商店的新操作)。

loadInstument

有没有一种方法可以实现与 重复观测 或者我需要重构我的组件?例如。

loadInstruments(queryParams).subscribe(x => ...)

1 回复 | 直到 6 年前

1

Prancer 6 年前

我不再太熟悉reduxthunk了,但是如果我理解正确的话,以前thunk更新的要么是组件状态,要么是app(redux)状态。当您重构以使用redux observable时,您将不再获得组件的更新值。

connect(mapState, mapDispatch) mapDispatch loadInstruments 我相信你已经开始工作了,而且 mapState 您将在发送后从epic状态订阅一个动作。您只需要确保epics“out”操作包含更新redux状态的数据,并且您还订阅了组件中的状态更改。如

const myEpic = (action$) => 
action$.pipe(
  ofType(LAUNCH_LOAD_INSTRUMENTS_EPIC),
  /* ajax operators and whatever else*/
  mapTo({ type: OUT_ACTION_WITH_NEW_STATE instruments: {/*new state*/} })
)

/*reducer land...*/
if (action.type === OUT_ACTION_WITH_NEW_STATE) {
  return {...prevState, instruments: action.instruments}
}

/*component land*/
connect((state) => {instruments: state.instruments}, {loadInstruments})(myComponent)

要引用你的问题标题“订阅epic组件中的动作输出流”,你不需要。订阅发生在redux可观察中间件中。因此,您不需要手动添加 subscribe()

调度一个操作->reducer->epic->action->reducer->epic->action…(重复) connect ,则当存储更新时,该组件将以 prop