RxJS 如何将流映射到最新的不同流？答案

【问题标题】：RxJS How to map a stream to the latest of a different stream?RxJS 如何将流映射到最新的不同流？
【发布时间】：2016-03-28 20:13:26
【问题描述】：

我目前正在使用 Cycle.js，并且我正在尝试在提交表单时获取文本输入流。例如：

const textChange$ = DOMSource.select('input').events('change');
const textValueSubmit$ = DOMSource.select('form').events('submit')
    .do(ev => ev.preventDefault());

我认为此时我需要合并流，但我只关心最新的文本值（当用户提交表单时）。处理这种情况的适当方法是什么？

【问题讨论】：

标签： javascript stream rxjs cyclejs

【解决方案1】：

除了当前的答案，您还可以使用withLatestFrom。请注意，combineLatest 和 withLatestFrom 语义在细微之处有所不同：

combineLatest 将在其中一个组合源发出一个值时发出一个值（只要每个源 observable 序列都发出至少一个元素）
withLatestFrom 仅在组合源发出值时才会发出值

所以你可以这样做：

const textChange$ = DOMSource.select('input').events('change')
  .pluck('target', 'value')
const submit$ = DOMSource.select('form').event('submit')
  .do(ev => ev.preventDefault)
const textValueSubmit$ = submit$.withLatestFrom(textChange$, function (submit, textChange){...});

即使这不仅仅涵盖您的特定用例（在这里您不关心提交事件传递的值，因此建议 sample 也可以正常工作），保留这些仍然很好为另一个类似的未来用例考虑两个运算符。

最后一件事，combineLatest 在这种情况下真的适合你吗？每次textChange$ 触发时，您似乎都会有textValueSubmit$ 发射。这是预期的行为吗？

【讨论】：

很好的捕获——combineLatest 并没有真正起作用，因为每次 textChange$ 触发时都会发射，这不是我的意图。
好吧，那我和你核实一下是对的。顺便说一句，当答案有用时，不要忘记投票。这些是重要的 SO 指南。此外，如果您的答案不正确，最好将其删除，以免线程新手感到困惑。

【解决方案2】：

您也可以使用sample() 来避免创建额外的功能，我相信这是您正在寻找的功能

const textChange$ = DOMSource.select('input').events('change')
  .pluck('target', 'value')
const submit$ = DOMSource.select('form').event('submit')
  .do(ev => ev.preventDefault)
const textValueSubmit$ = textChange$.sample(submit$)

【讨论】：