title: How can I give an RxJS observable pipe access to the original observable's emission AND the pipe's previous emission?
body: <p>I have an RxJS Observable that emits a series of changes to an underlying data structure—specifically, <a href="https://github.com/angular/angularfire2/blob/master/docs/firestore/collections.md#snapshotchanges" rel="nofollow noreferrer">snapshotChanges() from an AngularFirestoreCollection</a>.</p>
  
  <ul>
  <li>I'm currently mapping this to an array of plain JavaScript objects for consumption by my app.</li>
  <li>This array is not protected in any way, and consuming code could accidentally modify this structure.</li>
  <li>The entire array is rebuilt whenever the underlying data source emits, even if only one (or sometimes no) item in the array has actually changed.</li>
  <li>Because of this, all references change each time, making change detection harder than it needs to be—and really slowing down my app.</li>
  </ul>
  
  <p>What I want to do instead is use <a href="https://github.com/mweststrate/immer" rel="nofollow noreferrer">Immer</a> to maintain an immutable structure, such that unchanged data is structurally shared with the “new” array.</p>
  
  <p>What I can't work out is how to <code>pipe()</code> off the <code>snapshotChanges()</code> observable such that the pipe gets access to the previously emitted immutable data (or a first-time default) <strong>in addition to</strong> the latest <code>snapshotChanges()</code> output.</p>
  
  <p>In code, what I basically already have is this:</p>
  
  <pre><code>const docToObject = (doc) =&gt; { /* change document to fresh plain object every time */ };
  const mappedData$ = snapshotChanges().pipe(
      map(changes =&gt; changes.map(change =&gt; docToObject(change.payload.doc)),
      tap(array =&gt; console.log('mutable array:', array)),
  );
  </code></pre>
  
  <p>and I'm essentially looking for something like this, where I don't know what <code>XXX(...)</code> should be:</p>
  
  <pre><code>const newImmutableObject = (changes, old) =&gt; {
    // new immutable structure from old one + changes, structurally sharing as much as
    // possible
  };
  const mappedData$ = snapshotChanges().pipe(
  
  // ==================================================================================
      XXX(...), // missing ingredient to combine snapshotChanges and previously emitted
                // value, or default to []
  // ==================================================================================
  
      map(([snapshotChanges, prevImmutableOutput]) =&gt; newImmutableOutput(...)),
      tap(array =&gt; console.log('IMMUTABLE ARRAY with shared structure:', array)),
  );
  </code></pre>
  
  <p>I feel like <a href="https://www.learnrxjs.io/operators/transformation/expand.html" rel="nofollow noreferrer">the <code>expand</code> operator</a> is close to what I need, but it seems to only pass the previously emitted value in on subsequent runs, whereas I also need the newly emitted <code>snapshotChanges</code>.</p>
  
  <p><strong>Given an RxJS Observable pipe, how can I operate on this Observable's emissions while also having access to the pipe's previous emission?</strong></p>