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
Iterableis a set of key/value entries that can be iterated (e.g. using.map(),.filter(),.reduce(), …). All collections in Immutable.js, likeMapandList, useIterableas a base class - Map - Think of
Mapas an object. It stores values using keys. Let’s create aMapthat 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)
Meanwhile , To Read more about Immutable.js for ReactJS .
To Read more about Web development -
Want to stand out from the Crowd?
No spam, ever. Unsubscribe anytime.
To Read More
