DEV Community

Budi Irawan
Budi Irawan

Posted on

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.

Problem in Immutable.js

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'
Enter fullscreen mode Exit fullscreen mode

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:

TS readonly + ESLint immutable

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

Discussion (0)