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 provides several conversion methods to migrate one structure to another. Each Immutable.js class contains a prefixed "to" method like Map.toList(), Map.toSet(), etc. Converting these types sometimes results in a loss of data, as we will see when converting from Map to List.

https://app.egghead.io/api/v1/lessons/immutable-js-converting-immutable-js-structures-to-javascript-and-other-immutable-types/subtitles

[00:01] Immutable.js provides several conversion methods to migrate one structure to another. Each Immutable.js class contains a prefixed to method, like Map to List and to Set, etc. 

[00:15] Converting these types sometimes results in a loss of data as we will see when converting from Map to List. 

[00:22] I have a test here that we're going to want to see Map converted to List. We're creating a very basic map with two keys. OK? To use this method, we're going to create a constant called "Converted List." We're going to use the two list method on Map. 

[00:44] Now, this, see if this is actually a List. Do expect Immutable.list.is list converted list to be true. It passes, that's great. 

[00:57] One thing we'll note though, is that our keys are going to be discarded. Since lists don't have keys, those keys are then converted just to the indexes on the list itself. 

[01:08] Let's see what this looks like. Expect converted list.first, and we should see this to be equal to first item. Sure enough, we have that. We should also see the converted list's last item to equal second item. Sure enough, it does. 

[01:35] Let's do this in reverse. Let's go ahead and convert this list here, this list of first item and second item. There are no keys, keep that in mind, to a converted map. Go List.to Map. List has a corresponding to Map method, just like Map had a two list method. 

[01:55] Let's go ahead and see how these keys are converted. Well, they're converted ascending, so they're going to ascend numerically. Let's see what that looks like.

[02:09] Let's do keys, let's go ahead and grab these keys. We're do a converted Map.keys, which will return all the keys, and see what those look like. 

[02:22] Expect keys.next.value to equal zero. The key's value is equal to zero. Which is what we would expect, because the first item is going to then take on a key of zero, since those ascend numerically. We can also do that for the second just as easily. 

[02:45] Let's see what the next value looks like and it should be one. That key is equal to one. The value is not equal to one, the key itself is equal to one. 

[02:57] Let's also make sure, this is a Map now, so we'll say ImmutableMap.ismap, converted map, and we want to see this to equal true, to be true. It does, a passing test over here. 

[03:13] Now, we also want to see the first and last item in this map are equal to the first item and second item of the List. We can go expect converted Map.first to equal and we'll just copy and paste first item like so. Get a passing test. Then we'll do the same thing with the second one, second item. Call this last. We have a passing test. 

[03:42] That's how you covert between Map and List and it's a very similar process for converting between the other structures. 

[03:47] But what if you want to convert to a native JavaScript structure such as an array? Well, there are to methods, T-O, to methods that actually help out with this, too, and I'll show you what I mean. 

[03:59] We're going to create an array called ARR, Map.to array. We had two Lists and now have two arrays. The map will convert itself to an array. 

[04:08] Let's see that this looks like. Remember the keys are discarded, because an array does not have any keys. Let's expect the array, the first item to equal first item, and it does. We're good.

[04:25] Let's see how this nested bit here, this key three, how that converted over. Let's just go ahead and take that item, which is the third item, and we'll see, and we'll also grab the key on it, the key4. There's a property now called key4 on key3, and see what that's equal to. It should be equal to nested item. Sure enough, it is, passed the test. 

[04:49] It'll just nest them and create objects on those keys and pretty much do as you would expect, converting it from a map to an array. 

[04:58] We can also convert a map to JSON, which is also extremely valuable when sending stuff to a server or converting between function calls. Let's go ahead and create that, so JSON equals map.to JSON, that's the method that we need to call. Lots of tos here. Let's see what we get. Let's expect JSON.key1 to equal first item. 

[05:27] That's how it converts over. It creates properties on this object and now we have an actual JSON bit that we can send to anywhere we want. 

[05:37] Let's see how the nested key works, as well. We'll go expect JSON.key3.key4 since we have key3, which contains a key4, to equal nested item. That's how you get JSON out of a Map. 

Converting Immutable.js Structures to Javascript and other Immutable Types

Share this video with your friends

Course

Learn how to use Immutable.js