Unless you're already an expert in immutable.js, consider working with immer.js instead. It has a simpler API, and, unlike immutable.js which does not easily interoperate with JavaScript, immer.js allows developers to work fairly easily with native JavaScript constructs.
What is Immer.js and Immutability?
Immer.js is an increasingly popular tool for reinforcing immutable data structures in React. Immutability refers to an unchangeable, unalterable state. It's important to ensure that immutability is properly enforced, even when using Redux.
That's because it is possible to mutate the Redux store, resulting in bugs and issues. Immutability libraries like immer.js and immutable.js exist to provide an extra layer of strength behind already stable Redux containers. This ensures beyond a doubt that states accurately update, protecting against otherwise possible mutations.
Top 3 Benefits of Using Immer.js
On a recent web application development project at Praxent, an Austin-based Inc. 5000 company, software developer Peter Elbaum evaluated the risks and made the informed decision to use immer.js instead of the default, immutable.js.
When asked what drew him to immer.js over immutable.js, he offered two main reasons:
1. Simpler API
Immer’s API is easy-to-use. Peter only had to review the documentation a few times to grasp the core concepts. This stands in stark contrast to the steep learning curve involved in mastering immutable.js.
2. Interoperable with Native JavaScript
Immutable.js involves working with data types that are not native to JavaScript. To use it effectively, developers have to spend hours learning a new data type that is otherwise irrelevant. With an alternative like Immer, it just doesn't make sense to dedicate the time and brain power to learning immutable.js.
Immer.js, on the other hand, is fairly easier to learn. It solves the same problems as immutable.js, but in a more streamlined and efficient manner.
3. Great for Writing Redux Reducers & Tests
Immer.js syntax provides a clear expression of outputs and inputs, which means developers can avoid most object creation and destructuring.
The Downside: Immer.js Does not Support JavaScript Classes
While immer.js is the clear winner over immutable.js, it does have one disadvantage: it does not support JavaScript classes.
To make immer.js work with JavaScript classes, developers need to enable class copies by adding a special flag. As a result, constructor is lost, causing classes to behave like normal objects.
Unfortunately, this caused state mutation and bugs in Peter's project that were difficult to diagnose. This was partly due to compatibility issues with Praxent's React boilerplate, which uses OOP to model database resources.
Immer.js documentation is clear about the lack of support for JavaScript classes, claiming that class support would conflict with the architecture behind the immutable state tree. Be prepared and plan for this ahead of time.
Positive Results with Immer.js
When put to the test, immer.js proves to be a solid option for reinforcing immutability in React. It removes the need for complicated string paths, offering a simple, streamlined alternative to immutable.js.
>> Master version control on enterprise apps. Access our white paper for an in-depth look at version control beyond Git, and learn more about custom software development at Praxent.
Top comments (0)