title: How to update Observable / BehaviorSubject from code?
body: <p>I have the need to update properties of an observable object. I managed to make it work, but I don't really like how I did it. </p>
  
  <pre><code>next(filter$: BehaviorSubject&lt;GridCollectionFilter&gt;, collection: GridCollectionModel&lt;any&gt;) {
    let filter = filter$.value;
  
    if (!filter.page) {
      filter.page = 1;
    }
  
    filter.page++;
  
    if (filter.page &gt; collection.pageCount) {
      filter.page = collection.pageCount;
    }
  
    this.updateFilter(filter$);
  }
  
  first(filter$: BehaviorSubject&lt;GridCollectionFilter&gt;) {
    filter$.value.page = 1;
    this.updateFilter(filter$);
  }
  
  last(filter$: BehaviorSubject&lt;GridCollectionFilter&gt;, collection: GridCollectionModel&lt;any&gt;) {
    filter$.value.page = collection.pageCount;
    this.updateFilter(filter$);
  }
  
  updateFilter(filter$: BehaviorSubject&lt;GridCollectionFilter&gt;, filter?: GridCollectionFilter) {
    filter$.next(_.clone(filter || filter$.value));
  }
  </code></pre>
  
  <p>Is there a more elegant way to update the <code>filter$</code> value object in this case? </p>
  
  <p>I really dislike the idea of dog-feeding the clone of the observable to itself by doing <code>filter$.next(_.clone(filter$.value))</code> every time I simply want to update a few properties of the observed object through the code. I'm using <code>_.clone()</code> to break the reference (otherwise rxjs <code>distinctUntilChanged()</code> doesn't trigger for obvious reasons). </p>
  
  <p>Is there some kind of rxjs extension which could shorten what I'm doing? I'm thinking of something along the lines of <code>filter$.commitValueChanges()</code> which would internally do <code>filter$.next(_.clone(filter$.value))</code>.</p>
  
  <p>I'm pretty new to observables so I'm not sure if I'm thinking about this in a completely wrong way in the first place. I understand I'm supposed to commit the new state when I want to trigger the change listeners. What I'm not sure is whether you're ever supposed to modify the filter$.value directly? Or are you typically supposed to have two objects - <code>filter</code> (the filter) and <code>filter$</code> (observable of filter) and then absolutely never mutate the <code>filter$</code> directly but simply submit <code>filter</code> to <code>.next()</code> every time a change on <code>filter</code> occurs? But that would then seem redundant because we now have two objects, one which we're changing through the app and have to handle manually by attaching various event handlers and all that just to be able to update the other one - <code>filter$</code>. That seems excessive and hacky to me.</p>
  
  <p>Thnx.</p>