21
What other ways to enforce immutability in Angular beside using Immutable.js?
If we use
OnPush
change detection strategy, immutability is helpful to ensure change detection works expectedly. One of the way to enforce immutability is using
Immutable.js
. However, using Immutable.js
is not really straightforward. It adds another layer instead of using JS object directly e.gconst apps = List([{ name: 'slack' }, { name: 'skype' }]);
apps.get(0); // { name: 'slack' }
const app = Map({ name: 'slack' });
map.get("name"); // 'slack'
// Using Record if we want to access property directly
const AppRecord = Record({
name: ''
});
class App extends AppRecord {
constructor(props) {
super(props);
}
}
const newApp = new App({ name: 'slack' });
newApp.name; // 'slack'
We have to use
get
when using List
and Map
. Using Record
could solve the issue, but if we have a very large object, using Record
will be hard to maintain because we need to create each record per object and it's nested object.Other issue is about JS compatibility because it needs to use
fromJS
and toJS
methods to convert from and to JS object. I'd say that I'm not a fan of that lib and it makes things more complicated.
Other possible approach I'm thinking of:
Since Angular using Typescript, let's use
Readonly<T>
, ReadonlyArray
to enforce immutability. Also add this
no-mutation
ESLint rule as extra protection https://github.com/jonaskello/eslint-plugin-functional/blob/master/docs/rules/immutable-data.mdis there any better approach?
Thank you
21