javascript - 在Rx.js中，如何区分哪个流触发了combineLatest方法？

Question

我正在编写我自己的 who to follow? 版本。点击refreshButton将获取建议列表并刷新 <Suggestion-List /> ，和closeButton将从建议列表中恢复数据并刷新 <Suggestion-List-Item /> .

我想让 closeClick$ 和 suggest$ 结合在一起来吸引订阅者。演示代码在这里:

var refreshClick$ = Rx.Observable
  .fromEvent(document.querySelector('.refresh'), 'click')

var closeClick$ = Rx.Observable.merge(
  Rx.Observable.fromEvent(document.querySelector('.close1'), 'click').mapTo(1),
  Rx.Observable.fromEvent(document.querySelector('.close2'), 'click').mapTo(2),
  Rx.Observable.fromEvent(document.querySelector('.close3'), 'click').mapTo(3)
)

var suggestions$ = refreshClick$
  .debounceTime(250)
  .map(() => `https://api.github.com/users?since=${Math.floor(Math.random()*500)}`)
  .startWith('https://api.github.com/users')
  .switchMap(requestUrl => Rx.Observable.fromPromise($.getJSON(requestUrl)))

Rx.Observable.combineLatest(closeClick$, suggestions$, (closeTarget, suggestions) => {
  if (/* the latest stream is closeClick$ */) {
    return [{
      target: clickTarget,
      suggestion: suggestions[Math.floor(Math.random() * suggestions.length)]
    }]
  }
  if (/* the latest stream is suggestions$ */) {
    return [1, 2, 3].map(clickTarget => ({
      target: clickTarget,
      suggestion: suggestions[Math.floor(Math.random() * suggestions.length)]
    }))
  }
})

Rx.Observable.merge(renderDataCollectionFromSuggestions$, renderDataCollectionFromCloseClick$)
  .subscribe(renderDataCollection => {
    renderDataCollection.forEach(renderData => {
      var suggestionEl = document.querySelector('.suggestion' + renderData.target)
      if (renderData.suggestion === null) {
        suggestionEl.style.visibility = 'hidden'
      } else {
        suggestionEl.style.visibility = 'visible'
        var usernameEl = suggestionEl.querySelector('.username')
        usernameEl.href = renderData.suggestion.html_url
        usernameEl.textContent = renderData.suggestion.login
        var imgEl = suggestionEl.querySelector('img')
        imgEl.src = "";
        imgEl.src = renderData.suggestion.avatar_url
      }
    })
  })

您可以在 JsFiddle 中找到它.

注意条件判断中的注释，closeClick$会发出[{ target: x, suggestion: randomSuggestionX }] ，建议$ 发出 [{ target: 1, suggestion: randomSuggestion1 }, { target: 2, suggestion: randomSuggestion2 }, { target: 3, suggestion: randomSuggestion3 }] 。订阅者根据发出的数据渲染接口(interface)。

可能有一些方法/技巧可以区分 combineLatest 中的最新流还是优雅的修改？

Answer 1

我认为最简单的方法是使用 scan()运算符并始终将先前的状态保留在数组中:

Observable.combineLatest(obs1$, obs2$, obs3$)
  .scan((acc, results) => {
    if (acc.length === 2) {
      acc.shift();
    }
    acc.push(results);
    return acc;
  }, [])
  .do(states => {
    // states[0] - previous state
    // states[1] - current state
    // here you can compare the two states to see what has triggered the change
  })

当然，您可以使用任何您想要的运算符来代替 do()。

或者也许您可以只使用 bufferCount(2, 1) 来代替 scan() 运算符，它应该发出相同的两个数组...(我没有'测试一下)