17
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.g
const 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.md
is there any better approach?
Thank you
17