title: How to cleanly reconnect to a ReplaySubject while avoiding past memoization side-effects?
body: <p>I hold state in one <code>ReplaySubject</code> that replays the last copy of the state. From that state, other <code>ReplaySubjects</code> are derived to hold...well, derived state. Each replay subject need only hold it's last calculated state/derived state. (We don't use <code>BehaviorSubjects</code> because they <em>always</em> give a value, but we only want a value derived from our parent observables.) <strong>It is always necessary to replay the value to new subscribers if we have already generated derived state.</strong></p>
  
  <p>I have a custom observable operator that accomplishes this in just the way I want it to, but it doesn't feel that clean. I feel like there should be an efficient way to accomplish this with RxJ's operators themselves.</p>
  
  <p>I have tried the two most obvious approaches, but there are slight problems with each. The problem involves unsubscribing and re-subscribing.
  Open the fiddle below, open your console, and click run. I will describe the problem with each output.</p>
  
  <p><a href="https://jsfiddle.net/gfe1nryp/1/" rel="nofollow noreferrer">https://jsfiddle.net/gfe1nryp/1/</a></p>
  
  <p><strong>The problem with a <code>refCount</code>ed ReplaySubject</strong></p>
  
  <pre><code>=== RefCounted Observable ===
  
  
  Work
  Subscription 1: 1
  Work
  Subscription 1: 2
  Work
  Subscription 1: 3
  Unsubscribe
  Resubscribe
  Subscription 2: 3
  Work
  Subscription 2: 6
  Work
  Subscription 2: 7
  Work
  Subscription 2: 8
  </code></pre>
  
  <p>This works well, the intermediate functions don't do any work when there is nothing subscribed. However, once we resubscribe. We can see that Subscription 2 replays the last state before unsubscribe, and then plays the derived state based on the current value in the <code>base$</code> state. This is not ideal.</p>
  
  <p><strong>The problem with <code>connect</code>ed ReplaySubject</strong></p>
  
  <pre><code>=== Hot Observable ===
  Work
  Subscription 1: 1
  Work
  Subscription 1: 2
  Work
  Subscription 1: 3
  Unsubscribe
  Work
  Work
  Work
  Resubscribe
  Subscription 2: 6
  Work
  Subscription 2: 7
  Work
  Subscription 2: 8
  </code></pre>
  
  <p>This one does not have the same problem as the <code>refCount</code>ed observable, there is no unnecessary replay of the last state before the unsubscription. However, since the observable is now hot, the tradeoff is that we always do work whenever a new value comes in the <code>base$</code> state, even though the value is not used by any subscriptions.</p>
  
  <p>Finally, we have the custom operator:</p>
  
  <pre><code>=== Custom Observable ===
  Work
  Subscription 1: 1
  Work
  Subscription 1: 2
  Work
  Subscription 1: 3
  Unsubscribe
  Resubscribe
  Work
  Subscription 2: 6
  Work
  Subscription 2: 7
  Work
  Subscription 2: 8
  </code></pre>
  
  <p>Ahh, the best of both worlds. Not only does it not unnecessarily replay the last value before unsubscription, but it also does not unnecessarily do any work when there is no subscription.
  This is accomplished by manually creating a combination of <code>RefCount</code> and <code>ReplaySubject</code>. We keep track of each subscriber, and when it hits 0, <em>we flush the replay value</em>. The code for it is here (and in the fiddle, of course):</p>
  
  <pre><code>Rx.Observable.prototype.selectiveReplay = function() {
    let subscribers = [];
    let innerSubscription;
  
    let storage = null;
  
    return Rx.Observable.create(observer =&gt; {
      if (subscribers.length &gt; 0) {
        observer.next(storage);
      }
  
      subscribers.push(observer);
  
      if (!innerSubscription) {
        innerSubscription = this.subscribe(val =&gt; {
          storage = val;
          subscribers.forEach(subscriber =&gt; subscriber.next(val))
        });
      }
  
      return () =&gt; {
        subscribers = subscribers.filter(subscriber =&gt; subscriber !== observer);
  
        if (subscribers.length === 0) {
          storage = null;
          innerSubscription.unsubscribe();
          innerSubscription = null;
        }
      };
    });
  };
  </code></pre>
  
  <p>So, <strong>this custom observable already works.</strong> But, <strong>can this be done with only RxJS operators</strong>? Keep in mind, potentially there could be more than a couple of these subjects linked together like this. In the example, I'm only using one linking to the <code>base$</code> to illustrate the issue with both vanilla approaches I've tried at the most basic level.
  Basically, if you can use only RxJS operators, and get the output to match the output for <code>=== Custom Observable ===</code> above. That's what I'm looking for. Thanks!</p>