古いデータを返すCycleJSコレクション

Question

RxJar 5のRxMarblesを再作成しようとしていますが、コレクションのデータ（特にデータソースの長さ）を変更するとフィードバックの問題が発生します。私はRxMarblesに精通している人のために

注意をデバッグするためのconsole.log Sを追加

、私は、「タイムライン」に「図」と改名しました。

import { svg } from '@cycle/dom'; 
import isolate from '@cycle/isolate'; 
import { Observable } from 'rxjs'; 
import { apply, flip, map, max, merge, path, prop, sortBy, zip } from 'ramda'; 

import { Collection } from '../collection'; 

import { Marble } from './marble'; 
import { EndMarker } from './end-marker'; 

function sortMarbleDoms$(marbles$) { 
    const doms$ = Collection.pluck(marbles$, prop('DOM')); 
    const dataList$ = Collection.pluck(marbles$, prop('data')); 

    return Observable.combineLatest(doms$, dataList$, zip) 
    .map(sortBy(path([1, 'time']))) 
    .map(map(prop(0))); 
} 

function OriginalTimeline({ DOM, marbles: marblesState$, end: end$ }) { 
    const marblesProps$ = end$.map(({ time }) => ({ 
    minTime: 0, 
    maxTime: time, 
    })); 
    const endMarkerProps$ = marblesState$.map(marbles => ({ 
    minTime: marbles.map(prop('time')).reduce(max, 0), 
    maxTime: 100, 
    })); 

    const marblesSources = { DOM, props: marblesProps$ }; 
    const endMarkerSources = { 
    DOM, 
    props: endMarkerProps$, 
    time: end$.pluck('time'), 
    }; 

    const marbles$ = Collection.gather(
    Marble, marblesSources, marblesState$ 
    .do(a=>console.log('marblesState', a)), '_itemId'); 
    const marbleDOMs$ = sortMarbleDoms$(marbles$); 
    const endMarker = EndMarker(endMarkerSources); 

    const vtree$ = Observable.combineLatest(marbleDOMs$, endMarker.DOM) 
    .map(([marbleDOMs, endMarkerDOM]) => 
     svg({ 
     attrs: { viewBox: '0 0 100 10' }, 
     style: { width: 500, height: 50, overflow: 'visible' }, 
     }, [ 
     svg.line({ 
      attrs: { x1: 0, x2: 100, y1: 5, y2: 5 }, 
      style: { stroke: 'black', strokeWidth: 0.4 }, 
     }), 
     endMarkerDOM, 
     ...marbleDOMs, 
     ]) 
    ); 

    const marbleData$ = Collection.pluck(marbles$, prop('data')) 
    .withLatestFrom(marblesState$, zip) 
    .map(map(apply(flip(merge)))) 

    const data$ = Observable.combineLatest(marbleData$, endMarker.time) 
    .map(([marbles, endMarkerTime]) => ({ 
     marbles, 
     end: { time: endMarkerTime }, 
    })) 
    .debounceTime(1); 

    return { DOM: vtree$, data: data$.do(a=>console.log('tdata', a)) }; 
} 

export function Timeline(sources) { 
    return isolate(OriginalTimeline)(sources); 
} 

アプリの基本的な構造は、全ての必要なデータが（したがって理論的には、すべての出力が新規であるべきであるようにそれをデータを取得し、再放射するダミードライバにグローバルシンクに供給されることです入力）。

この問題のため、私のコードの他の部分に問題がある可能性がありますので、役立つ場合はコードのcodepen/plunkrを投稿してください。これは実際には時々動作しますが、すべてではありません。

ここコンソール出力です

store Object {route: "merge", inputs: undefined} 

timeline.js:39 marblesState [Object, Object, Object, Object] 
timeline.js:69 tdata Object {marbles: Array[3], end: Object} 
sandbox.js:48 data [Object, Object] 
app.js:26 store Object {route: "merge", inputs: Array[2]} 

注意marblesState 4つのオブジェクトが、3つのオブジェクトの配列を有するtdata戻り玉を持っている（簡略）。何らかの理由で、コレクションは3つのアイテムのみを返します。

何か助けていただければ幸いです。ありがとう！

Answer 1

私は、これは理にかなっているが、debounceTime(1)を移動すると、それはCollection.pluckが新旧データ毎に一回送信していました

const marbleData$ = Collection.pluck(marbles$, prop('data')) 
    .debounceTime(1) 
    .withLatestFrom(marblesState$, zip) 
    .map(map(apply(flip(merge)))) 

const data$ = Observable.combineLatest(marbleData$, endMarker.time) 
    .map(([marbles, endMarkerTime]) => ({ 
    marbles, 
    end: { time: endMarkerTime }, 
    })); 

を働かせた理由はわかりません。