Manage Application State with Immutable.js

Learn how Immutable.js data structures are different from native iterable Javascript data types and why they provide an excellent foundation on which to build your application's state.

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

3:15 immutablePRO

Learn how to create an Immutable.Map() through plain Javascript object construction and also via array tuples.

Modifying an Immutable.js Map()

5:22 immutablePRO

We will now look at five methods that modify an 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, so let's get to know them well.

Querying an Immutable.js Map()

4:47 immutablePRO

Learn how to query an Immutable.Map() using get, getIn, has, includes, find, first and last. These are powerful operators that make finding data in an object graph pain free.

Iterating Over an Immutable.js Map()

6:31 immutablePRO

Immutable.js provides several methods to iterate over an Immutable.Map(). These also apply to the other immutable structures found within the Immutable.js family, such as Set and List. The primary methods are map and forEach, but we will also cover filter and groupBy.

Working with Subsets of an Immutable.js Map()

7:43 immutablePRO

Immutable.js offers methods to break immutable structures into subsets much like Array--for instance it has the all powerful slice()--and unlike Array it offers functional methods like take() and skip(). You get the best of both the imperative and functional worlds.

Equality Checking with .is() and More

4:02 immutablePRO

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.

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

6:39 immutablePRO

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.

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

4:02 immutablePRO

The Immutable.js Map() is analogous to a Javascript Object or Hash since it is comprised of key-value pairs. The Immutable.js List() is analogous to a Javascript Array and contains many of the same native methods. Let's compare the two and dive into the basics of List().

Exploring Sequences and Range() in Immutable.js

6:59 immutablePRO

Understanding Immutable.js's Map() and List() structures will likely take you as far as you want to go with immutable programming. They have only small semantic differences between each other and the remaining structures in the Immutable.js family. Sequence, however, has one major difference: it's lazy--which opens a new realm of functional possibilities. Let's write a simple sequence to start.

Converting Immutable.js Structures to Javascript and other Immutable Types

5:57 immutablePRO

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.

Simple Undo/Redo with Immutable.js Data Structures

8:35 immutablePRO

Implementing Undo/Redo can be tricky business. Consider two strategies to simplify implenting undo/redo: 1) use immutable data 2) react to that data with a top-down approach. Let's build a simple drawing app that will draw circles on a canvas and allow us to undo/redo our drawing.

Maintaining Order in Immutable.js Objects

8:08 immutablePRO

Immutable.js's Map doesn't promise iteration order after a set() operation. When we need a guarantee for iteration order, we can use OrderedMap. This comes at a slight performance cost, or for you computer science people, it is amortized at an unstable O(log32 N). Let's explore ordering.

Transforming Immutable Data with Reduce

8:25 immutablePRO

Immutable.js iterables offer the reduce() method, a powerful and often misunderstood functional operator on which map(), filter(), groupBy(), etc. are built. The concept is simple: reduce transforms your iterable into something else, that's all. The name is misleading as you may or may not actually "reduce" anything. Let's replicate the groupBy() and filter() methods with reduce to illustrate how it works.

Lightning Fast Immutable.js Equality Checks with Hash Codes

2:27 immutablePRO

While Immutable.js offers .is() to confirm value equality between iterables it comes at the cost of referencing each key and value in both objects. For lightning fast equality checks, Immutable.js can produce a hash code based on an iterable's content. If two iterables have the same content, their hash codes will be the same. It's worth noting that this technique is unsuitable for mission critical application development since there is a chance, however slight, that checksums like these might collide. This is outlined here: https://en.wikipedia.org/wiki/Collision_(computer_science)

Immutable.Record() as data models

5:33 immutablePRO

The Immutable.js Record() allows you to model your immutable data much like you would model data with native Javascript classes or objects. It differs from native classes because it cannot be mutated after it's creation and it always has a default value. It's an excellent construct in which to piece together your stores, be them Flux or some other storage implementation. Let's quickly create an Immutable Record().