Use model with Immutable.JS

script.js

console.clear();

// Define User model
const defaultValues = {
  // Should be `undefined` value at all
  id: undefined,
  name: undefined,
  dob: undefined,
  friends: undefined,
};
class User extends Immutable.Record(defaultValues) {
  get age() {
    return moment().diff(this.get('dob'), 'years');
  }
}

const merger = (old, v) => (_.isUndefined(v) ? old : v);

// create users
const alice = new User({
  id: 1000,
  name: 'Alice',
  dob: moment('1996-03-01T00:00:00+00:00'),
  unknownProp: 'foo',
});
const bob = new User({
  id: 1001,
  name: 'Bob',
  dob: moment('1996-08-01T00:00:00+00:00'),
  friends: Immutable.Map(),
});
const carol = new User({
  id: 1002,
  name: 'Carol',
  dob: moment('1997-06-01T00:00:00+00:00'),
  friends: Immutable.Map().set(alice.id, alice.id),
});

let store = Immutable.Map();
function updateStore(user) {
  const targetStore = Immutable.Map().set(user.id, user);
  store = store.mergeDeepWith(merger, targetStore);
}

console.info('Step 01');
console.log(alice);
console.log(alice.age);
console.log(store);

console.info('Step 02');
updateStore(alice);
console.log(JSON.stringify(store, null , '  '));

console.info('Step 03');
updateStore(bob);
console.log(JSON.stringify(store, null , '  '));

console.info('Step 04');
updateStore(carol);
console.log(JSON.stringify(store, null , '  '));

console.info('Step 05');
const newCarol = new User({
  id: 1002,
  friends: Immutable.Map().set(bob.id, bob.id),
});
updateStore(newCarol);
console.log(JSON.stringify(store, null , '  '));

scripts

<script src="//codepen.io/nullobject/pen/cngzI.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/immutable/3.8.2/immutable.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.14/moment-timezone.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>

styles

<link href="//codepen.io/nullobject/pen/cngzI.css" rel="stylesheet" />

use-model-with-immutable-js.markdown

Use model with Immutable.JS

A Pen by satoruk on CodePen.

License.