ImmutableJS for React Developers

In this article we will see what is immutability and why it’s important for a React applications. it explains immutable.js for ReactJS Developers

What’s Immutability

According to wikipedia,

In object-oriented and functional programming, an immutable object. it is an object whose state cannot be modified after it is created. This is in contrast to a mutable object (changeable object), which can be modified after it is created. 

Immutability is something that cannot be changed after it is created. Immutable Object cannot be modified after it is created.

For Example, let’s say, we have a constant variable in javascript.

const getValue = "Some Value"

we cannot modify the constant variable after it is assigned. it will throw an error. it is immutability

getValue = "Change Value"

Why Immutability is Important?

Let’s understand this concept with an analogy. Let’s say you are saving money in your bank account. Above all ,you want to analyze how much you save every month. Therefore , to analyze this, you need to have a track of your previous months savings.

If you don’t have a savings history, it would be difficult to track the record. that is to say, for some complex React Application, we need to maintain the state of the application such as what is the previous state and what is the current state. so that, we can render,handle event with the changes.

Purpose of Redux

To solve this problem, redux comes into play. but, there is one more problem exists. though, redux solves the problem of managing the state.

But, managing the data immmutability is upto us. For Example, if we have a value like

item = {
 "id" : 1,
  "name" : "Ganesh"
}

redux maintains the previous state and current state. but we can still modify the value in the object. it is mutable object. that’s the problem.

To make data structure immutable in javascript. Immutable.js comes into play.

Introduction to Immutable.js

Immutable.js provides many Persistent Immutable data structures including: List, Stack, Map, OrderedMap, Set, OrderedSet and Record.

Let’s see how we can implement immutable.js in React/Redux application.

I assume that you are familiar with React and Redux. if you are new to React and Redux, you can refer this excellent articles.

• Complete React and Redux
• Redux – FlavioCopes
• Redux – Official Documentation

Immutable.js used for initializing the state in immutable data structure.In the reducer file, initialize the state with immutable object and in every action, reducer will create a new instance the existing data.

There are three important data structures in Immutable.js

• An Iterable is a set of key/value entries that can be iterated (e.g. using .map(), .filter(), .reduce(), …). All collections in Immutable.js, like Map and List, use Iterable as a base class
• Map – Think of Map as an object. It stores values using keys. Let’s create a Map that represents a data structure of a book in an online store. To make things a little easier for ourselves, we’ll use the .fromJS() method provided by Immutable.js
• List – List is similar to Javascript Array. they are ordered and indexed. we can do operations such as .push(),.pop() and .unshift() just like the javascript array operations

To Read and Modify Data in Map

Mainly, To read data in the immutable.js. we need to get the data from the array (or) object

Reading Data

state.get('items').get('title')

Mainly, to get an nested object. we have to go from the top level to the level we want to get the value. this will be cumbersome to get nested object. To simplify this structure, we can use something like this

state.getIn(['items','title'])

both will return the same value. later will be a simple and readable than the former one.

Modifying the Data

state.setIn(['items','title'],'Hola')

modifying the data is similar to reading the data. only difference here is we need to use setIn instead of get,getIn

Reading and Modifying Data in Lists

List in immutable.js is similar to standard javascript arrays. they are ordered and indexed. we can access the list using operations such as .push(),.pop() and .unshift()

state.getIn(['items',1])

we can also access the list with an index

state.getIn(['items',0,'test'])

Modifying the Data in Lists

it is similar to modifying the data in map. In addition to that, we can modify the data with index.

state = state.setIn(['items', 0], 'Fantasy');

Meanwhile, Immutable.js also has other ways to modify the data in the lists. they are .update() and .updateIn() . these are much simpler and readable when compared with .set() and .setIn()

state = state.update('items', items => items.push('Wizards'));

For Example,Let’s imagine for a second that we’d need to update Amazon’s price to $6.80. This could be done using .setIn() and the right key path

state = state.setIn(['storeListings', 0, 'price'], 6.80);

However, we usually don’t know the index that we want to update.to solve this problem by using .findIndex()

const indexOfListingToUpdate = state.get('storeListings').findIndex(item => {
  return item.get('id') === 'amazon';
});
state = state.setIn(['storeListings', indexOfListingToUpdate, 'price'], 6.80);

Meanwhile , To Read more about Immutable.js for ReactJS .

• Redux Documentation
• Redux and Immutable.js
• Immutable Data Structure in javascript

To Read more about Web development –

• Nginx for Front End Development – Part 1
• Nginx for Front End Development – Part 2