CycleJSアプリにjsonデータをロード

Question

私はCycleJSの周りを頭で覆いたいと思っていますが、私は立ち往生しています！私は、オブジェクトの配列を含むJSONファイルをロード一緒に小さなアプリを入れしようとしているが、私は今のところここに私のコードで

'use strict'; 
 

 
import Rx from 'rx'; 
 
import Cycle from '@cycle/core'; 
 
import {h, makeDOMDriver} from '@cycle/dom'; 
 
import {makeHTTPDriver} from '@cycle/http'; 
 

 
function intent(DOM) { 
 
    return { 
 
     edit: DOM.select('div') 
 
      .events('click') 
 
      .map(evt => evt.target.value), 
 
     add: DOM.select('div') 
 
      .events('click') 
 
      .map(evt => evt.target.value) 
 
    }; 
 
} 
 

 
function model(actions, response) { 
 
    return response 
 
} 
 

 
function view(state) { 
 
    return state.map(item => { 
 
     h('div', [ 
 
      item.map(todo => h('div', todo.title)) 
 
     ]) 
 
    }); 
 
} 
 

 
function main(sources) { 
 
    const URL = 'http://localhost:3000/js/planinator/data.json'; 
 

 
    let response = sources.HTTP 
 
     .mergeAll() 
 
     .map(res => res.body) 
 
     .startWith([]); 
 

 
    const actions = intent(sources.DOM); 
 
    const state = model(actions, response); 
 

 
    return { 
 
     DOM: view(state), 
 
     HTTP: Rx.Observable.of(URL) 
 
    } 
 
} 
 

 
Cycle.run(main, { 
 
    DOM: makeDOMDriver('#appmount'), 
 
    HTTP: makeHTTPDriver() 
 
});

をHTTPリクエスト

を実行するためのアプリを取得することはできません

私が達成しようとしているのは、 JSONデータをロードして、これをdivタグとしてレンダリングします。

私はクロームでコードを実行すると、私はコンソールに

bundle.js:14182 TypeError: Cannot read property 'subscribe' of undefined(…) 

をこれを取得、私はstackoverflowので見つかった質問をチェックして、彼らが私を取得していないAYさらに

Answer 1

はサイクルへようこそ。 js :)

私が気付く最初の問題は、HTTPドライバがHTTPリクエストのObservableを最初に期待していることです。ここでは、単にURLの文字列を渡すだけです。これは、受信者のRx.Observable.of(URL)

function main(sources) { 
    ... 
    return { 
    ... 
    HTTP: Rx.Observable.of(URL) 
    } 
} 

次を使用して観察可能でURLをラップすることによって行うことができ、私はあなたのrequestが（実際にあなたの応答である！）、ビットHTTPドライバを悪用していることに気づきます。 HTTPドライバは、高次のObservableをメインに返します。つまり、他のオブザーバを含むObservableを返します。これはmergeAll()またはswitch()で簡単に修正できます。 mergeAll()およびswitch()は効果的に高次の観測可能なものを取り、それを「内側の」観測値のイベントを含む観測値に「平坦化」します。

let response = sources.HTTP 
    .mergeAll() 
    .filter(....) 
    .map(....) 
    .startWith([]) 

2つの方法の違いは微妙ですが、非常に重要です。 mergeAll()の同時性はInfinityです。それは一体何の意味ですか？ mergeAll()は、すべての内部観測値を取り込み、それらにサブスクライブし、そのイベントを包含観測可能値にプッシュします。 switch()は類似していますが、同時実行性は1です。これは、最新の内部観測可能なものだけをサブスクライブし、前のものを破棄します。

これはあなたの質問すべてに確実に答えることはできませんが、少なくとも正しい方向に着手すればいいと思います！ :)