Observable maps

You can make an observable map with the observable.map() API. In principle, it works the same way as observable.array() and observable.object(), but it is meant for ES6 Maps. The observable map instance shares the same API as a regular ES6 Map. Observable maps are great for tracking dynamic changes to the keys and values. This is in stark contrast to observable objects, which do not track properties that are added after creation.

In the following code example, we are creating a dynamic dictionary of Twitter-handles to names. This is a great fit for an observable map, as we are adding keys after creation. Take a look at this code block: 

import { observable } from 'mobx';

// Create an Observable Map
const twitterUserMap = observable.map();

console.log(twitterUserMap.size); // Prints: 0

// Add keys
twitterUserMap.set('pavanpodila', 'Pavan Podila');
twitterUserMap.set('mweststrate', 'Michel Weststrate');

console.log(twitterUserMap.get('pavanpodila')); // Prints: Pavan Podila
console.log(twitterUserMap.has('mweststrate')); // Prints: Michel Weststrate

twitterUserMap.forEach((value, key) => console.log(`${key}: ${value}`));

// Prints:
// pavanpodila: Pavan Podila
// mweststrate: Michel Weststrate