Manage Application State with Immutable.js

Creating an Immutable Object Graph with Immutable.js Map()

Modifying an Immutable.js Map()

Querying an Immutable.js Map()

Iterating Over an Immutable.js Map()

Working with Subsets of an Immutable.js Map()

Equality Checking with .is() and More

Using fromJS() to Convert Plain JavaScript Objects into Immutable Data

Differences between the Immutable.js Map() and List()

Exploring Sequences and Range() in Immutable.js

Converting Immutable.js Structures to Javascript and other Immutable Types

Simple Undo/Redo with Immutable.js Data Structures

Maintaining Order in Immutable.js Objects

Transforming Immutable Data with Reduce

Lightning Fast Immutable.js Equality Checks with Hash Codes

Immutable.Record() as data models

Learn how to use Immutable.js

Immutable.js offers the fromJS() method to build immutable structures from objects and array. Objects are converted into maps. Arrays are converted into lists. The fromJS() method can also take a reviver function for custom conversions.

[00:03] Immutable JS offers the from JS method to build immutable structures from objects and arrays. Objects are converted into maps. Arrays are converted into lists. The from JS method can also take a reviver function for customer conversions.

[00:15] Let's start with converting an object into a map. We're going to create a plain JavaScript object. It's going to be called plain JS object. Within this object we're going to provide a few keys such as title, text, I need milk and eggs. Completed, false, and category. We'll make that a nested key of title and we'll say house duties and give it a priority of 10. OK.

[01:00] We have this plain JavaScript object which looks a lot like a to do. Now if we want to convert that into an immutable map, we'll go ahead and create an immutable to do, and we'll say immutable, the immutable namespace.from JS, and just pass in the plain JS object.

[01:18] Now it's taken this plain JS object and converted it into a map. Let's see how this looks. Let's say expect immutable.map.is map immutable to do. Now what this method does it says, "Hey, is this a map?" Each immutable structure type has an is map, is list, is set function that can check to see if it is of that type. Let's see if this is true. To be true, and it still passes, so we're good to go there.

[01:54] Now let's write one other test and say immutable to do.get in. Now we're going to see how this converted. Let's get the nested title. We'll pass in an array to get in, we'll get the key path, the category for the key path up top, and then the second key path will be title. We go category title. That's how get in works if you want to go into a deeply nested structure.

[02:25] Let's see if this is equal to house duties. House duties. Sure enough it is. That worked out really well. We know now that objects convert into maps, but what do arrays convert into? Let's see how that works.

[02:44] Plain JS array. We'll create just a series of to dos. Go to grocery store, buy milk and eggs. Let's do help kids with homework. We'll do a nested set of to dos at the end, just to see how that works. Buy lemons and make lemonade. We'll say those are a series of steps within a series of steps.

[03:19] Now I've got this array and we're going to go ahead and create an immutable list. We'll call it to do list. We'll do immutable just like before from JS, plain JS array. Now it's going to create a list from this array since that's what arrays convert into. Now we'll write an expectation to see if this in fact is a list, so say expect immutable.list is list. Immutable to do list. We'll see if that's equal to true, to be true. Test passed. Great.

[04:05] Now let's see if we can grab an index out of that. Let's do expect immutable to do list.get in. We're going to do a nested index inside of this. We'll do the index of three and one. Zero, one, two, three, and we want it to get the first item inside of that nested structure. We'll say to equal. This is actually the second one. Make lemons, and we're good to go. It passes the test.

[04:43] Now we're going to do this again, but instead of converting into a list, we're going to convert it into a map using a reviver. Let's go ahead and paste in that array. Let's go ahead and create a map, immutable to do map. We'll say immutable.from JS and we're going to pass in that plain JS array.

[05:10] Right now this should have created a list. If we also supply this method with another function, the second argument being a reviver function, we can convert this to whatever we want. The reviver function takes two arguments, a key and a value, and whatever we return is going to actually convert.

[05:30] Let me show you what I mean by that. Return, we'll just take the value and turn it into a map. Now instead of this being a list, it's going to be a map. Let's see if it worked. Write an expectation. Expect immutable.map.is map immutable to do to be true. So it is true. Looking good.

[05:58] Now let's write a second expectation. We'll say does the immutable to do map have a key in it just like the array did? We'll say get three one. We'll do the same thing. Now, this is something to note. When you convert a list to a map, it goes to an index-based key. Now it's going to look the same, but the keys are going to be the indexes that the array once had. We'll see if this is equal to the same value up top. Sure enough it is.

Course

Learn how to use Immutable.js

Using fromJS() to Convert Plain JavaScript Objects into Immutable Data

Share this video with your friends