Cycle.js HTTP 添加加载指示器后发送多个请求

Question

我一直在尝试创建一些 cycle.js 示例作为嵌套对话，并使用 select 框在它们之间切换。

其中一个对话是官方 Github HTTP 搜索示例的克隆。

另一个对话更基本，没有 HTTP，只有 DOM。

我觉得我在 2 之间切换很费脑筋，但我对 Rx 还很陌生，所以这可能会不正确或天真地完成。

在我向搜索页面添加加载指示器之前，一切似乎都运行良好。

为此，我转了这个：

  const vTree$ = responses.HTTP
    .filter(res$ => res$.request.indexOf(GITHUB_SEARCH_API) === 0)
    .flatMapLatest(x => x)
    .map(res => res.body.items)
    .startWith([])
    .map(results =>
      h('div.wrapper', {}, [
        h('label.label', {}, 'Search:'),
        h('input.field', {type: 'text'}),
        h('hr'),
        h('section.search-results', {}, results.map(resultView)),
      ])
    )

进入这个：

  const searchResponse$ = responses.HTTP
    .filter(res$ => res$.request.indexOf(GITHUB_SEARCH_API) === 0)
    .flatMapLatest(x => x)
    .map(res => res.body.items)
    .startWith([])

  const loading$ = searchRequest$.map(true).merge(searchResponse$.map(false))

  // Convert the stream of HTTP responses to virtual DOM elements.
  const vtree$ = loading$.withLatestFrom(searchResponse$, (loading, results) =>
      h('div.wrapper', {}, [
        h('label.label', {}, 'Search:'),
        h('input.field', {type: 'text'}),
        h('span', {}, loading ? 'Loading...' : 'Done'),
        h('hr'),
        h('section.search-results', {}, results.map(resultView)),
      ])
    )

我现在有 2 个问题

记录了 'checkbox value set to' 和 'route changed' 消息每次更改复选框两次。
仅HTTP请求日志触发一次，但是如果你在 Dev Tools 中观看网络 activity 您会同时看到两个 GET 请求。

感谢您的帮助！

编辑：解决了我自己的问题。请参阅下面的答案。

Answer 1

我最终通过从头开始重建我的整个应用程序解决了这个问题，直到我找到了断点。

我了解到，您需要将 .share() 添加到任何可观察流中，该流将被多个下游可观察者 subscribed/mapped/etc。

  const searchRequest$ = DOM.select('.field').events('input')
    .debounce(500)
    .map(ev => ev.target.value.trim())
    .filter(query => query.length > 0)
    .map(q => GITHUB_SEARCH_API + encodeURI(q))
    .share() //needed because multiple observables will subscribe

  // Get search results from HTTP response.
  const searchResponse$ = HTTP
    .filter(res$ => res$ && res$.request.url.indexOf(GITHUB_SEARCH_API) === 0)
    .flatMapLatest(x => x) //Needed because HTTP gives an Observable when you map it
    .map(res => res.body.items)
    .startWith([])
    .share() //needed because multiple observables will subscribe

  //loading indication.  true if request is newer than response
  const loading$ = searchRequest$.map(true).merge(searchResponse$.map(false))
    .startWith(false)
    .share()

  //Combined state observable which triggers view updates
  const state$ = Rx.Observable.combineLatest(searchResponse$, loading$,
    (res, loading) => {
      return {results: res, loading: loading}
    })

  //Generate HTML from the current state
  const vtree$ = state$
    .map(({results, loading}) =>
      .........

Cycle.js HTTP 添加加载指示器后发送多个请求

Cycle.js HTTP sending multiple requests after adding loading indicator

cyclejs