[Immutable,js] Immutable.Record() as data models

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().

 

Create a Record class:

let TodoRecord = Immutable.Record({
  id: (+new Date() + Math.floor(Math.random() * 999999)).toString(36),
  title: "Default Title",
  items: Immutable.List(),
  completed: false
});

Inside the Recode class, you can define the default value. But you cannot add any method!

 

New a instance:

// Create a new instance
let imTodo = new TodoRecord({
  title: "New Title",
  items: Immutable.List(),
  completed: false
});

 

Update and get an value:

// Update the title
imTodo = imTodo.updateIn(['title'], val => "Immutable");
console.log(imTodo.get('title'));

 

Read the value:

console.log(imTodo.title);

let items = imTodo.items;
let newItem = "New Item";
let updatedItems = imTodo.push(newItem);

let newTodo = imTodo.set("items", updatedItems );

 

As you can see, the advantage by using Record instread of Map is that we can access the value directly by using:

imTodo.title;

instead of:

imTodo.get("title") //Of course this also works