CycleJS Collection 返回旧数据答案

【问题标题】：CycleJS Collection returning old dataCycleJS Collection 返回旧数据
【发布时间】：2023-03-24 00:39:02
【问题描述】：

我正在尝试为 RxJS 5 重新创建 RxMarbles，但是当我更改集合的数据（特别是数据源的长度）时遇到反馈问题。

我添加了console.logs 用于调试

熟悉 RxMarbles 的朋友请注意，我将“Diagram”重命名为“Timeline”。

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 个对象，但 tdata 返回的弹珠包含 3 个对象的数组。出于某种原因，Collection 仅返回 3 个项目。

感谢任何帮助。谢谢！

【问题讨论】：

标签： rxjs5 cyclejs

【解决方案1】：

我不知道为什么这是有道理的，但是向上移动 debounceTime(1) 让它起作用了

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 },
  }));

Collection.pluck 为每条新旧数据发送一次。

【讨论】：