Modifying an Immutable.js Map()

[00:00] We will now look at five methods that modify and immutable map. I highly encourage you to visit the immutable JS documentation where I am now. They are Set, Delete, Clear, Update and Merge. These are used often, let's get to know them well.

[00:18] In this JS bin, I've gone ahead and created a TODO class, which we will use in our application state. Here are four pure functions that apply the Set, Delete, Update, Merge and Clear methods to an immutable map, and return the new reference.

[00:35] This is key, since immutable data cannot be mutated, it must return a new reference to which the application will then refer.

[00:43] In the first test, let's add a simple TODO. Let's go ahead and create the map. Let TODOs equal immutable.map, we'll make it empty, because we're going to add a TODO to it.

[00:55] The TODOs will be added to by applying the addto method to the TODOs, with the new TODO. This should add the TODO to the TODOs method, which passes the reference back to the new variable, we've overwritten our state. Now, let's write a quick expectation to see if the first ID in the TODOs equals the original TODO.

[01:20] We'll do expect TODOs.get, TODO.ID to equal TODO. There you have it, a passing test. An ID is generated when the TODO is instantiated, and now, we are looking that up inside of the immutable map and seeing that it's equal to TODO. That's awesome.

[01:47] Let's run this second test. We should be able to remove a TODO from state, as well. Let's go ahead and copy this, and instantiate a map. Then, we're going to go ahead and add a TODO, just like we did before, copy, paste. Now, we should be able to write the same expectation before and see this pass, which we do.

[02:11] Let's go ahead and remove it, and see what happens. We'll go TODOs equals remove TODO, and see what happens. Now, we're seeing this fail, because the new TODO has been deleted. We say not equal, and we're good to go. Let's update a TODO now. We do what we do before, go ahead and instantiate an immutable map.

[02:37] We're going to add a TODO to it. We're going to update the title on the original TODO, which will not update inside of our immutable map, because it's immutable. Then we'll just go ahead and do an update. TODOs equals update TODO, TODOs, TODO. Lots of TODOs.

[02:57] What that will do, is it will run the update method. In this update method, we pass in a function that says, "What should this new ID, what should this new key look like?" And return that value to me. We're simply just updating with whatever I pass into the function, we're going to return the exact same TODO.

[03:20] We've updated the TODO, we should see, "New Title" on the first item. Let's go ahead and try that. Here, we want to see if that title.tile is equal to new title, and we have a passing test. Now, let's go ahead and remove all of the TODOs. We're going to do something a little bit different.

[03:43] We're going to create 10 TODOs, and I'm going to paste this in here to save some time. We're going to create 10 TODOs and add them to the map. We've just added them to the map there. Now, we should be able to expect the TODOs.size to equal 10.

[04:01] I'm going to go ahead and get rid of this. We see that there are, indeed 10, but we want to actually remove them all now. Let's go ahead and go, TODOs equals clear all TODOs. Let's take a look at that method real quick. Clear all just runs the clear operation on the immutable data.

[04:26] Now, this is no longer passing, we should see zero, and boom, all of the TODOs have been removed. Pretty convenient. A final method I want to go over is the merge. Let's have two immutable maps. We have TODOs, and TODOs2.

[04:43] Let's go ahead and create 10 TODOs, each using the same lodash each and range as before. Now, we've got TODOs and TODOs2, having added 10 to each.

[05:00] Now, let's go ahead and merge them, and see where we land. We'll say TODOs equals merge TODOs, TODOs1, TODOs2. Now, TODOs.size should equal 20. There you have it, we've merged both those TODOs.