ImmutableJS for React Developers
Tags: showdev, tutorial, react, javascript
Published: 2019-06-07 16:42:02

---
title: ImmutableJS for React Developers
published: true
description: Immutable.js plays a vital role in the state immutability of React and Redux application. in this article we will see immutable.js for reactjs developers
tags: showdev,tutorial,react,javascript
canonical_url : https://cloudnweb.dev/2019/06/immutablejs-for-react-developers/
---
<!-- wp:paragraph -->
<p>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</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>What's Immutability</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>According to wikipedia,</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>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. </code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Immutability is something that <strong>cannot be changed after it is created</strong>. Immutable Object cannot be modified after it is created.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>For Example, let's say, we have a constant variable in javascript.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>const getValue = "Some Value"</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>we cannot modify the constant variable after it is assigned. it will throw an error. it is immutability</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>getValue = "Change Value"</code></pre>
<!-- /wp:code -->

<!-- wp:heading {"level":3} -->
<h3>Why Immutability is Important?</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Purpose of Redux </h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>To solve this problem, redux comes into play. but, there is one more problem exists. though, redux solves the problem of managing the state.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>But, managing the data immmutability is upto us. For Example, if we have a value like</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>item = {
 "id" : 1,
  "name" : "Ganesh"
}</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To make data structure immutable in javascript. Immutable.js comes into play.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Introduction to Immutable.js</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p> Immutable.js provides many Persistent Immutable data structures including:&nbsp;<code><a href="https://immutable-js.github.io/immutable-js/docs/#/List">List</a></code>,&nbsp;<code><a href="https://immutable-js.github.io/immutable-js/docs/#/Stack">Stack</a></code>,&nbsp;<code><a href="https://immutable-js.github.io/immutable-js/docs/#/Map">Map</a></code>,&nbsp;<code><a href="https://immutable-js.github.io/immutable-js/docs/#/OrderedMap">OrderedMap</a></code>,&nbsp;<code><a href="https://immutable-js.github.io/immutable-js/docs/#/Set">Set</a></code>,&nbsp;<code><a href="https://immutable-js.github.io/immutable-js/docs/#/OrderedSet">OrderedSet</a></code>&nbsp;and&nbsp;<code><a href="https://immutable-js.github.io/immutable-js/docs/#/Record">Record</a></code>. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Let's see how we can implement immutable.js in React/Redux application.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>I assume that you are familiar with React and Redux. if you are new to React and Redux, you can refer this excellent articles.</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><a href="https://daveceddia.com/redux-tutorial/">Complete React and Redux</a></li><li><a href="https://flaviocopes.com/redux/">Redux - FlavioCopes</a></li><li><a href="https://redux.js.org/introduction/getting-started">Redux - Official Documentation</a></li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->
{% codesandbox reduximmutable-vrtdn %}
<!-- wp:html -->
<iframe src="https://codesandbox.io/embed/reduximmutable-vrtdn?codemirror=1&amp;fontsize=14&amp;module=%2Fsrc%2Freducer.js" title="redux-immutable" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
<!-- /wp:html -->

<!-- wp:paragraph -->
<p>There are three important data structures in Immutable.js</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li> An&nbsp;<code>Iterable</code>&nbsp;is a set of key/value entries that can be iterated (e.g. using&nbsp;<code>.map()</code>,&nbsp;<code>.filter()</code>,&nbsp;<code>.reduce()</code>, …). All collections in Immutable.js, like&nbsp;<code>Map</code>&nbsp;and&nbsp;<code>List</code>, use&nbsp;<code>Iterable</code>&nbsp;as a base class </li><li><strong>Map</strong> -  Think of&nbsp;<code>Map</code>&nbsp;as an object. It stores values using keys. Let’s create a&nbsp;<code>Map</code>&nbsp;that represents a data structure of a book in an online store. To make things a little easier for ourselves, we’ll use the&nbsp;<code>.fromJS()</code>&nbsp;method provided by Immutable.js </li><li><strong>List</strong> - 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</li></ul>
<!-- /wp:list -->

<!-- wp:heading {"level":3} -->
<h3>To Read and Modify Data in Map</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Mainly, To read data in the immutable.js. we need to get the data from the array (or) object</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Reading Data</h3>
<!-- /wp:heading -->

<!-- wp:code -->
<pre class="wp-block-code"><code>state.get('items').get('title')</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>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</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>state.getIn(['items','title'])</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>both will return the same value. later will be a simple and readable than the former one.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Modifying the Data</h3>
<!-- /wp:heading -->

<!-- wp:code -->
<pre class="wp-block-code"><code>state.setIn(['items','title'],'Hola')</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>modifying the data is similar to reading the data. only difference here is we need to use <strong>setIn</strong> instead of <strong>get</strong>,<strong>getIn</strong></p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Reading and Modifying Data in Lists</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>List in immutable.js is similar to standard javascript arrays. they are ordered and indexed. we can access the list using operations such as  <strong>.push()</strong>,<strong>.pop()</strong> and <strong>.unshift()</strong></p>
<!-- /wp:paragraph -->
{% codesandbox reduximmutable-vrtdn %}
<!-- wp:html -->
<iframe src="https://codesandbox.io/embed/reduximmutable-vrtdn?fontsize=14&amp;module=%2Fsrc%2Freducer.js" title="redux-immutable" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
<!-- /wp:html -->

<!-- wp:code -->
<pre class="wp-block-code"><code>state.getIn(['items',1])</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>we can also access the list with an index</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>state.getIn(['items',0,'test'])</code></pre>
<!-- /wp:code -->

<!-- wp:heading {"level":3} -->
<h3>Modifying the Data in Lists</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>it is similar to modifying the data in map. In addition to that, we can modify the data with index.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>state = state.setIn(['items', 0], 'Fantasy');</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Meanwhile, Immutable.js also has other ways to modify the data in the lists. they are <strong>.update()</strong> and <strong>.updateIn()</strong> . these are much simpler and readable when compared with <strong>.set()</strong> and <strong>.setIn()</strong></p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>state = state.update('items', items => items.push('Wizards'));</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p> 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&nbsp;<code>.setIn()</code>&nbsp;and the right key path </p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>state = state.setIn(['storeListings', 0, 'price'], 6.80);</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>However, we usually don't know the index that we want to update.to solve this problem by using <strong>.findIndex()</strong></p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>const indexOfListingToUpdate = state.get('storeListings').findIndex(item => {
  return item.get('id') === 'amazon';
});
state = state.setIn(['storeListings', indexOfListingToUpdate, 'price'], 6.80);</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p> Meanwhile , To Read more about Immutable.js for ReactJS . </p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><a href="https://redux.js.org/recipes/using-immutablejs-with-redux#why-should-i-use-an-immutable-focused-library-such-as-immutablejs">Redux Documentation</a></li><li><a href="https://tech.affirm.com/redux-patterns-and-anti-patterns-7d80ef3d53bc">Redux and Immutable.js</a></li><li><a href="https://jlongster.com/Using-Immutable-Data-Structures-in-JavaScript">Immutable Data Structure in javascript</a></li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>To Read more about Web development -</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><a href="https://cloudnweb.dev/2019/05/nginx-for-front-end-developers/">Nginx for Front End Development - Part 1</a></li><li><a href="https://cloudnweb.dev/2019/06/nginx-for-front-end-developers-beyond-the-basics/">Nginx for Front End Development - Part 2</a></li></ul>
<!-- /wp:list -->