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,

1In 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.

1const getValue = "Some Value"

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

1getValue = "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

1item = {
2  id: 1,
3  name: "Ganesh",
4}

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](https://immutable-js.github.io/immutable-js/docs/#/List), [Stack](https://immutable-js.github.io/immutable-js/docs/#/Stack), [Map](https://immutable-js.github.io/immutable-js/docs/#/Map), [OrderedMap](https://immutable-js.github.io/immutable-js/docs/#/OrderedMap), [Set](https://immutable-js.github.io/immutable-js/docs/#/Set), [OrderedSet](https://immutable-js.github.io/immutable-js/docs/#/OrderedSet) and [Record](https://immutable-js.github.io/immutable-js/docs/#/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.

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

1state.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

1state.getIn(["items", "title"])

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

Modifying the Data

1state.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()

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

we can also access the list with an index

1state.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.

1state = 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()

1state = 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

1state = state.setIn(["storeListings", 0, "price"], 6.8)

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

1const indexOfListingToUpdate = state.get("storeListings").findIndex(item => {
2  return item.get("id") === "amazon"
3})
4state = state.setIn(["storeListings", indexOfListingToUpdate, "price"], 6.8)