title: RxJS - make counter with reset stateless?
body: <p>Assuming I have the following markup:</p>
  
  <pre><code>&lt;button id="dec"&gt;-&lt;/button&gt;
  &lt;output id="out"&gt;0&lt;/output&gt;
  &lt;button id="inc"&gt;+&lt;/button&gt;
  &lt;button id="res"&gt;RESET&lt;/button&gt;
  </code></pre>
  
  <p>And the following Rx.js script:</p>
  
  <pre><code>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)
  })
  </code></pre>
  
  <p>Everything works as expected.  Clicking the +/- increments/decrements the counter, and clicking 'RESET' resets it back to zero, but...I have the variable 'total' at the top.  This is state, which if I subscribe to the values of functional reactive programming, is evil, no?  If so, how do I remedy this?  If I didn't have the reset button, I could just use <code>scan(seed, accumulator)</code>, but the functionality of the reset button is throwing me for a loop, as to how to do it 'stateless'.</p>
  
  <p><a href="https://jsfiddle.net/jrop/8z34ggk1/3/" rel="noreferrer">Working fiddle here</a>.</p>