javascript - RxJS - 使具有重置无状态的计数器？

Question

假设我有以下标记:

<button id="dec">-</button>
<output id="out">0</output>
<button id="inc">+</button>
<button id="res">RESET</button>

以及以下 Rx.js 脚本:

var total = 0

Rx.Observable.merge(
    // decrement
    Rx.Observable.fromEvent($('#dec'), 'click')
    .map(function() { return -1 }),

    // increment
    Rx.Observable.fromEvent($('#inc'), 'click')
    .map(function() { return +1 }),

    // reset
    Rx.Observable.fromEvent($('#res'), 'click')
    .map(function() { return -total })
) // merge
.forEach(function(delta) {
    total += delta
    $('#out').text(total)
})

一切都按预期进行。单击 +/- 递增/递减计数器，单击“重置”将其重置为零，但是......我在顶部有变量“总计”。这就是状态，如果我认同函数式响应式(Reactive)编程的值(value)观，它就是邪恶的，不是吗？如果是这样，我该如何补救？如果我没有重置按钮，我可以只使用 scan(seed, accumulator)，但是重置按钮的功能让我陷入了一个循环，关于如何做到“无状态” '.

Working fiddle here .

Answer 1

我可以看到两种解决方法。

首先，没有任何内容表明您不能在管道中扩充数据:

Rx.Observable.merge(
  // decrement
  Rx.Observable.fromEvent($('#dec'), 'click')
    .map(function() { return {delta : -1}; }),

  // increment
  Rx.Observable.fromEvent($('#inc'), 'click')
    .map(function() { return {delta : +1}; }),

  // reset
  Rx.Observable.fromEvent($('#res'), 'click')
    .map(function() { return {reset : true}; })
) // merge
.scan(0, function(acc, value) {
  return value.reset ? 0 : acc + value.delta;
})
.forEach(function(delta) {
  $('#out').text(delta)
});

上面的代码让你可以通过添加一个字段向下游发出流已被重置的信号(注意:我作弊了，为了可读性你可能想要添加 reset : false 而不是依赖于错误，但这取决于您)。

或者，如果您将 reset 视为实际重置流，那么您可以改为使用 flatMapLatest 来包装递增和递减:

Rx.Observable.fromEvent($('#res'), 'click')
.startWith(null)
.flatMapLatest(function(e) {
  return Rx.Observable.merge(
    // decrement
    Rx.Observable.fromEvent($('#dec'), 'click')
      .map(function() { return -1 }),

    // increment
    Rx.Observable.fromEvent($('#inc'), 'click')
      .map(function() { return +1 })
  )
  .scan(0, function(acc, delta) { return acc + delta })
  .startWith(0);
})
.subscribe(function(value) {
   $('#out').text(value) 
});

这使得流比包含两个 .startWith 以启动相应序列所必须的更加困惑，但是如果您反对扩充并希望隐含状态由流控制，那么这将是一种方法。