title: BehaviorSubject send the same state reference to all subscribers
body: <p>In our Single Page Application we've developed a centralized store class that uses an RxJS behavior subject to handle the state of our application and all its mutation.  Several components in our application are subscribing to our store's behavior subject in order to receive any update to current application state.  This state is then bound to UI so that whenever state changes, UI reflect those changes.  Whenever a component wants to change a part of the state, we call a function exposed by our store that does the required work and updates the state calling next on the behavior subject.  So far nothing special.  (We're using Aurelia as a framework which performs 2 way binding)</p>
  
  <p>The issue we are facing is that as soon as a component changes it's local state variable it receives from the store, other components gets updated even if next() wasn't called on the subejct itself.</p>
  
  <p>We also tried to subscribe on an observable version of the subject since observable are supposed to send a different copy of the data to all subscriber but looks like it's not the case.</p>
  
  <p>Looks like all subject subscriber are receiving a reference of the object stored in the behavior subject.</p>
  
  <pre class="lang-js prettyprint-override"><code>import { BehaviorSubject, of } from 'rxjs'; 
  
  const initialState = {
    data: {
      id: 1, 
      description: 'initial'
    }
  }
  
  const subject = new BehaviorSubject(initialState);
  const observable = subject.asObservable();
  let stateFromSubject; //Result after subscription to subject
  let stateFromObservable; //Result after subscription to observable
  
  subject.subscribe((val) =&gt; {
    console.log(`**Received ${val.data.id} from subject`);
    stateFromSubject = val;
  });
  
  observable.subscribe((val) =&gt; {
    console.log(`**Received ${val.data.id} from observable`);
    stateFromObservable = val;
  });
  
  stateFromSubject.data.id = 2;
  // Both stateFromObservable and subject.getValue() now have a id of 2.
  // next() wasn't called on the subject but its state got changed anyway
  
  stateFromObservable.data.id = 3;
  // Since observable aren't bi-directional I thought this would be a possible solution but same applies and all variable now shows 3
  </code></pre>
  
  <p>I've made a stackblitz with the code above.
  <a href="https://stackblitz.com/edit/rxjs-bhkd5n" rel="nofollow noreferrer">https://stackblitz.com/edit/rxjs-bhkd5n</a></p>
  
  <p>The only workaround we have so far is to clone the sate in some of our subscriber where we support edition through binding like follow:</p>
  
  <pre class="lang-js prettyprint-override"><code>observable.subscribe((val) =&gt; {
    stateFromObservable = JSON.parse(JSON.stringify(val));
  });
  </code></pre>
  
  <p>But this feels more like a hack than a real solution.  There must be a better way...</p>