cyclejs - ローディングインジケーターを追加した後に複数のリクエストを送信するCycle.js HTTP

Question

ネストされたダイアログとしていくつかのcycle.jsの例を作成しようとしており、選択ボックスを使用してそれらを切り替えています。

ダイアログの 1 つは、公式の Github HTTP 検索の例のクローンです。

もう 1 つのダイアログは、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つの問題を抱えています

1. 「checkbox value set to」および「route changed」メッセージは、チェックボックスが変更されるたびに 2 回ログに記録されます。
2. HTTP リクエスト ログは 1 回だけ発生しますが、Dev Tools でネットワーク アクティビティを監視すると、2 つの GET リクエストが同時に表示されます。

助けてくれてありがとう！

編集:私自身の問題を解決しました。以下の回答を参照してください。