observable.md

title	sidebar_label	hide_title
observable	observable	true

observable

<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CEBD4KQ7&placement=mobxjsorg" id="_carbonads_js"></script>

egghead.io lesson 1: observable & observer

<iframe style="border: none;" width=760 height=427 src="https://egghead.io/lessons/javascript-sync-the-ui-with-the-app-state-using-mobx-observable-and-observer-in-react/embed" ></iframe>

Hosted on egghead.io

egghead.io lesson 4: observable objects & maps

<iframe style="border: none;" width=760 height=427 src="https://egghead.io/lessons/react-use-observable-objects-arrays-and-maps-to-store-state-in-mobx/embed" ></iframe>

Hosted on egghead.io

Usage:

• observable(value)
• @observable classProperty = value

Observable values can be JS primitives, references, plain objects, class instances, arrays and maps. The following conversion rules are applied, but can be fine-tuned by using modifiers. See below.

1. If value is an ES6 Map: a new Observable Map will be returned. Observable maps are very useful if you don't want to react just to the change of a specific entry, but also to the addition or removal of entries.
2. If value is an ES6 Set: a new Observable Set will be returned.
3. If value is an array, a new Observable Array will be returned.
4. If value is an object without prototype, all its current properties will be made observable. See Observable Object
5. If value is an object with a prototype, a JavaScript primitive or function, observable will throw. Use Boxed Observable observables instead if you want to create a stand-alone observable reference to such a value. MobX will not make objects with a prototype automatically observable; as that is considered the responsibility of its constructor function. Use extendObservable in the constructor, or @observable / decorate in its class definition instead.

These rules might seem complicated at first sight, but you will notice that in practice they are very intuitive to work with. Some notes:

• To use the @observable decorator, make sure that decorators are enabled in your transpiler (babel or typescript).
• By default, making a data structure observable is infective; that means that observable is applied automatically to any value that is contained by the data structure, or will be contained by the data structure in the future. This behavior can be changed by using modifiers.
• [MobX 4 and lower] To create dynamically keyed objects use an Observable Map! Only initially existing properties on an object will be made observable, although new ones can be added using extendObservable.

Some examples:

const map = observable.map({ key: "value" })
map.set("key", "new value")

const list = observable([1, 2, 4])
list[2] = 3

const person = observable({
    firstName: "Clive Staples",
    lastName: "Lewis",
})
person.firstName = "C.S."

const temperature = observable.box(20)
temperature.set(25)