[Javascript] 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.

Instead of them being mutable, they're always immutable, meaning they don't change from underneath you. The reference to them can change, but the data inside them cannot, which means you can build predictable and reliable state models on top of them. It becomes a lot easier to manage your application's state.

console.clear();

const ary = ["todo1", "todo2"];
const ary2 = ary;
console.log(ary[0]); // todo1

ary2[0] = "done1";
console.log(ary[0]); // done1

// Immutable 

function updateState(immutable, pos, value) {
  return immutable.set(pos, value);
}

const immutableState = Immutable.List(["foo1", "foo2"]);
const immutableState2 = immutableState.set(0, "bar1");

console.log(immutableState.get(0)); // foo1
console.log(immutableState2.get(0)); // bar1

Every time you use set() to set a new value, Immutable will return a new array.