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

Equality checking deeply nested objects is painful. Fortunately Immutable.js makes this task easy with its .is() and .isSubset() methods. Let's see how we can take two different Immutable Maps() and check for equality.

[00:00] Equality checking deeply nested objects is painful. Fortunately, immutable.js makes this task easy with its is and is subset methods. Let's see how we can take two different immutable maps and check for their equality. Create a constant of map 1 and make it an immutable map with a few keys.

[00:21] The first key will be A and give it a value of one. The second key will be B with a value of one. The third key will be an immutable list of length one. That will be the key of C. Now, we want to make another one of these exactly the same.

[00:44] In reality, these two objects are identical but they're stored separately in memory, but they are actually the same. Let's see if they're different. Let's expect map 1 to not equal map 2. Sure enough, we've a passing test. It does not equal map 2. That's good.

[01:07] What we're concerned about here is actually seeing equality. Let's see if we can make them somehow equal. Immutable comes with a method called is. It's just on the immutable namespace. What you do is you pass in the first immutable and the second immutable and then it will check every key in value inside of those to see if they're equal.

[01:35] This should be true. Sure enough, the tests pass. That's how you find if two immutable objects of the same type are the same. What if we have two immutable objects that they're almost the same? Maybe one contains most of the keys in another one but they don't have the same properties. They may not be considered equal according to some standards.

[02:01] There's also a way to check for subsets. We'll go and make one of those now. We're going to copy these constants up here and we'll edit these. We're going to remove this third key. We've got two different maps with different keys. Map 1 could be considered equal to map 2 if you didn't consider the key that they don't share. Let's see how we can use subset to find that equality.

[02:25] We'll expect map 1 to be a subset, so we use the is subset method and see if this is true. Sure enough, the test passed. Map 1 is a subset of map 2. The reverse should not be true. We should see if map 2 is a subset of map 1. It makes the test fail. We're going to set that to false. That's how it works.

[03:02] These keys are shared, are inside of this map here which in a sense says, "All I want to know is do you have the same properties as me. If so, good to go." That's how is subset works. There's also a method called is superset. Let's put the same thing but in reverse.

[03:21] Let's copy this. We'll do the same thing. Instead of using is subset, we'll say is superset. Now, that isn't going to be correct because map 1 does not contain all of the keys of map 2. Since there are more properties than map 2, map 1 could never be a superset of map 2.

[03:44] Let's see if that's false because it is. Let's see if map 2 is a superset of map 1 since it has more properties. We'll see if the keys that it does share match. We'll say true. Sure enough, we have equality.

Course

Learn how to use Immutable.js

Equality Checking with .is() and More

Share this video with your friends