理解 redux Epic 中的 mergeMap

Posted 2023-02-19

【中文标题】理解 redux Epic 中的 mergeMap

【英文标题】：Understanding mergeMap in redux Epic

【发布时间】：2020-12-08 03:14:06

【问题描述】：

我想知道是否有人可以帮助我理解这段代码（来自官方 redux 文档）

const fetchUserEpic = action$ => action$.pipe(
  ofType(FETCH_USER),
  mergeMap(action =>
    ajax.getJSON(`https://api.github.com/users/$action.payload`).pipe(
      map(response => fetchUserFulfilled(response))
    )
  )
);

我知道 Epics 是什么（动作输入、动作输出等），并且了解这些动作将通过 action$.pipe 进行，然后您通过 ofType 选择您想要的，它们必须返回另一个动作。 但是，我无法理解调用 mergeMap 后会发生什么。 据我了解（这可能是非常错误的），mergeMap 将扁平化并将外部可观察对象（在本例中为 action$）与内部可观察对象（在本例中为获取 json 的调用）合并。从内部 observable 来看，我们是管道映射，它将从 api 调用中获取数据并使用它来调用下一个动作。 我觉得我在这里遗漏了一些东西并且不理解可观察到的流程。我确实阅读了官方文档，但我无法完全掌握它。

【问题讨论】：

learnrxjs.io/learn-rxjs/operators/transformation/mergemap

是的，我通读了一遍，但我不清楚它在上述史诗的背景下是如何工作的。

你确实需要先了解rxjs。

rxmarbles.com 是可视化 rx 函数的绝佳资源。

【参考方案1】：

actions$ 是所有动作的流，ofType(FETCH_USER) 过滤流以便只有 FETCH_USER 动作通过。 mergeMap 接受流发出的 FETCH_USER 动作，并返回一个可观察的，一旦 http 请求完成就会发出。 http 请求上的 map 函数将 http 请求的响应映射到另一个动作。

【讨论】：

谢谢，这个解释很好，帮了我很多忙

【参考方案2】：

map 和 flatten 变成单个 Observable