BehaviorSubject: mutating current value between subscriptions

Question

Assume I have BehaviorSubject with User interface:

interface User {
  firstName: string;
  lastName: string;
}

let user: User = {
  firstName: 'Cuong',
  lastName: 'Le',
};

let bs = new BehaviorSubject<User>(user);

There are two subsciptions, sub1 tried to change the first name. Sub2 subscribes later and user object has first name changed also as the sub1 did change it before:

let sub1 = bs.subscribe((u) => {
  u.firstName = 'An';

  console.log(u);
});

let sub2 = bs.subscribe((u) => {
  console.log(u);
});

it's hard to debug when this case happens in big Angular application. How we make the value immutable when subscribing?

I am looking deep immutable solution to prevent code somewhere else to change the data instead of the shadow one

This surprised me - but is indeed possible. More here: https://levelup.gitconnected.com/master-rxjs-data-stores-in-services-c1f553e5d48b — MikeOne, Nov 12 '21 at 17:55

Daniel Gimenez · Answer 1 · 2021-11-17T18:53:19.817

1

Using this answer and wrapping your type in this Immutable utility type should solve your problem. Unlike the readonly keyword or ReadOnly utility type, the Immutable interface in this answer will recursively makes all properties read only.

interface User {
  firstName: string;
  lastName: string;
  address: { 
    street: string;
  } 
}

let user: User = {
  firstName: 'Cuong',
  lastName: 'Le',
  address: { 
    street: '123 Sesame St.'
  }
};

let bs = new BehaviorSubject<Immutable<User>>(user);

let sub1 = bs.subscribe((u) => {
  u.address.street = '456'; //<-- Cannot assign to 'street' because it is a read-only property.
  console.log(u);
});

edited Nov 17 '21 at 18:53

answered Nov 12 '21 at 17:52

Daniel Gimenez

18,530
3
50
70

Thanks for the answer, How does it work with Property level 2? – cuongle Nov 16 '21 at 14:59
Got an answer that should work with nested properties. – Daniel Gimenez Nov 17 '21 at 18:53

score 1 · Answer 2 · answered Nov 13 '21 at 03:46

1

You can use the utility type Readonly<T> to mark the type on the BehaviorSubject as Readonly<User> instead of User:

let bs = new BehaviorSubject<Readonly<User>>(user);

Now, TS will warn you when you try to modify:

Cannot assign to 'firstName' because it is a read-only property. (2540)

answered Nov 13 '21 at 03:46

BizzyBob

12,309
4
27
51

How does it work with Property level 2? – cuongle Nov 16 '21 at 14:59
Good point, this will not warn when assigning nested properties. You may find [this SO question](https://stackoverflow.com/questions/41879327/deepreadonly-object-typescript) and this [github issue](https://github.com/microsoft/TypeScript/issues/13923) of interest. They mention some ways to implement a `DeepReadonly`. – BizzyBob Nov 17 '21 at 13:29

score 1 · Answer 3 · answered Nov 13 '21 at 15:08

This is a problem I've had to solve several times. As long as you are passing simple non-circular objects through the subject this solution should work.

The one requirement is that you utilize the lodash library, which supports a very fast deep copy (no reference copies). I've looked everywhere and I've yet to find one that is faster.

let bs = (new BehaviorSubject<User>(user)).pipe(    
     map((userData) => _.cloneDeep(userData)) 
);

I've used this on fairly large state objects and I've always been impressed by how quickly it is able to perform copies. The implication here is that any emission coming out of the subject is a copy of the original, so changes happen in isolation and will never be able to trail back to the source.

Sure. Instead of using cloneDeep, just create a new object and manually copy all the values over. I'd take lodash any day over doing it manually. — Damian C, Nov 17 '21 at 15:27

BehaviorSubject: mutating current value between subscriptions

3 Answers3

Linked