Exploring the Relationship Between Redux and ImmutableJS in Managing Nested State and Understanding the Computational Complexity of Immutable

Question

Exploring the Relationship Between Redux and ImmutableJS in Managing Nested State and Understanding the Computational Complexity of Immutable

Trying to grasp the concept of Immutability for my debut Redux (NGRX/Store) endeavor has been quite the challenge. Avoiding state mutation has been a struggle, especially while dealing with Object.assign({}) and state mutation errors. Thankfully, I stumbled upon Immutable.JS, which has made my life much easier.

Imagine having a Financial Trading Application that needs to showcase a collection of Bars on a chart upon loading. The last bar must be updated periodically with live price data, and new bars are added intermittently.

All of this must be executed for {1-n} financial instruments (EURUSD/GBPJPY/Gold/Oil etc.). To tackle this aspect of my application, I have come up with the following model:

export interface CandleState {
  LastCompletedCandle : Candle;
  InProgressCandle : Candle;
  LastTick:Offer;
  ClosedCandles:immutable.List<Candle>;
};

export interface AllCandleState {
   instruments: immutable.Map<string, CandleState>
}

It is worth noting that I am utilizing an Immutable Map that contains an Immutable List. My initial question is: Is there a purpose to having 'immutability within immutability' in this scenario? When I call

instruments.set("EURUSD", { [my new state] })

I am essentially receiving an entirely new state, so I am uncertain if nested immutability is necessary. I want to be able to subscribe to changes on the ClosedCandles list; will making it immutable enable direct observation of these changes? Or are changes only detected at the 'top' level?

Another question that arises is: should I be concerned about this at all? I have a notion that altering an immutable collection is a costly operation. If I use list.push or map.set, what exactly occurs behind the scenes? Am I copying every item in the array or map into a new array/map every time a modification is made to an immutable collection? Or is it merely a change in reference?

It would be helpful to have some published information on the Big-Oh Complexity of immutable collections to better understand their performance, but unfortunately, such data seems to be elusive.

typescript redux immutability ngrx immutable-collections

Answer 1

Answer №1

Is there any benefit to implementing 'immutability within immutability' like this?

Generally speaking, the simple answer is: No. While immutability does not directly impact change detection, it does reinforce the principle of creating new objects instead of modifying existing states outside the store (or even within the reducer).

I want to be able to track changes in the ClosedCandles list; will making it immutable allow observers to detect changes directly, or are changes only detected from the top level?

The answer is both yes and no. Monitoring changes directly can be achieved by setting up a stream that selects instruments.ClosedCandles - but this functionality is not exclusive to immutability and can be achieved with or without it.

When it comes to immutability and the concept of altering objects from the top down, any changes made multiple levels deep within an object will require recreating all parent objects up to the root. This is because immutable objects cannot be altered, necessitating the creation of new references.

For example:

root                
|--map1             
|  |--set1          
|  \--set2          
|     |--attribute1 
|     \--attribute2 
|
|--map2             
\--map3

Do I need to be concerned about the performance implications of changing an immutable collection? Is it a costly operation to add items to a list or map within an immutable collection?

The performance impact of mutating immutable collections largely depends on how you implement them. Many libraries optimize these operations and abstract them away from the developer. In most cases, performance won't be significantly affected as only small portions of the state will be modified, with new references being used without creating entirely new objects.

In cases where performance is critical, you can choose to use immutables for development and testing purposes to ensure correctness, then disable immutability for production builds to optimize performance further.

Answer 2

Is there any benefit to implementing 'immutability within immutability' like this?

Generally speaking, the simple answer is: No. While immutability does not directly impact change detection, it does reinforce the principle of creating new objects instead of modifying existing states outside the store (or even within the reducer).

I want to be able to track changes in the ClosedCandles list; will making it immutable allow observers to detect changes directly, or are changes only detected from the top level?

The answer is both yes and no. Monitoring changes directly can be achieved by setting up a stream that selects instruments.ClosedCandles - but this functionality is not exclusive to immutability and can be achieved with or without it.

When it comes to immutability and the concept of altering objects from the top down, any changes made multiple levels deep within an object will require recreating all parent objects up to the root. This is because immutable objects cannot be altered, necessitating the creation of new references.

For example:

root                
|--map1             
|  |--set1          
|  \--set2          
|     |--attribute1 
|     \--attribute2 
|
|--map2             
\--map3

Do I need to be concerned about the performance implications of changing an immutable collection? Is it a costly operation to add items to a list or map within an immutable collection?

The performance impact of mutating immutable collections largely depends on how you implement them. Many libraries optimize these operations and abstract them away from the developer. In most cases, performance won't be significantly affected as only small portions of the state will be modified, with new references being used without creating entirely new objects.

In cases where performance is critical, you can choose to use immutables for development and testing purposes to ensure correctness, then disable immutability for production builds to optimize performance further.

Exploring the Relationship Between Redux and ImmutableJS in Managing Nested State and Understanding the Computational Complexity of Immutable

Answer №1

Similar questions

Upgrading from React-Redux version 1.x to version 2.x: The transition you

Tips for retrieving the generated ID from the server immediately following form submission using the Post method in TypeScript

What is the most efficient way to apply multiple combinations for filtering the information within a table?

Issue: formGroup requires an input of type FormGroup. Please provide one; Error: Unable to access property 'controls' as it is undefined

Every time an action is carried out in the app, React generates countless TypeError messages

In the given situation, which would be the preferable option - making use of useEffect or opting for

Using Typescript and ThreeJS, include new elements to the environment within the loader

How can I run a TypeScript function within a JavaScript file?

Typescript - Keeping a log of object keys along with their corresponding key type values

The sum is being treated as a concatenation instead of an addition in this case

Observer function simulated by SinonStub

What is the proper way to declare app.use using TypeScript with the node.js Express module?

How should one go about creating and revoking a blob in React's useEffect function?

Ways to extend the default timeout duration in Angular

Error when running end-to-end tests in Angular CLI using the ng e2e

How do I adjust brightness and contrast filters on a base64 URL?

Pipe for Angular that allows for searching full sentences regardless of the order of the words

Error: Code layer not located while utilizing "sam invoke local" in AWS

Updating a property in a JavaScript object using Angular

Converting JSON Arrays into Typescript Arrays