Use observable objects, arrays, and maps to store state in MobX

[00:00] Let's take a closer look at the observable decorator. The decorator is just convenient for extending the object in the constructor using the extend observable methods. What the extend observable function does is creating a new property with the getter and setter for each key value pair which you provide to it.

[00:19] As you can see, it works just the same. This extend observable function, in turn, is used by the observable function with scan and one-go make a complete object observable by enumerating the object and creating new observable properties for each existing key value pair. If we pass the function without arguments, MobX will introduce advantically a computed property instead of an observable, so we can simply rewrite our temperature class into an object like this.

[00:53] Now, we have the same app, but this time we didn't use classes. Use whatever style you prefer.

[01:01] Let's revert to our temperature class. Let's take a look at arrays. What if we want a collection of values? Let's see if we can put class instances into an observable array.

[01:13] What we do first is giving the temperature an ID field because we need this later for [inaudible] to be able to render a collection. We introduce a new variable, temps, and we initialize it with an observable array. We simply push a new temperature onto that array.

[01:34] Let's change our array component a bit. We map over the temperatures. We render each temperature, and we also assign a key to the diff because [inaudible] uses that to reconcile the [inaudible] .

[01:45] Let's run that. We see we can change items inside the array and those changes are reflected, but we can also push new temperatures onto the array. We can supply [inaudible] . We can even assign one, any one, to an index. Although, observable arrays are not really arrays; they do implement the array interface faithfully. If you need to pass them to some external library, you can always slice them and you get a real array back.

[02:28] Finally, if you need a dynamically keyed collection you can use observable maps. Observable maps work like normal ES6 maps. We can use entries to loop over the key value pairs inside the temperature, so we can adjust our components and render this as well.

[02:47] [pause]

[02:54] Most important functions are our get, set, and has.

[02:58] [pause]

[03:05] These are the important observable types in MobX. You might be wondering, "Can I also make primitives observable?" Well, in principle not. While JavaScript primitives are immutable and hence not observable, you can, however, pass a primitive to observable. In that case, MobX creates a boxed or a reference value.

[03:26] A simple object that wraps your primitive value and which offers a get and set method to reach or update the value. In practice, you probably never need those, but these are objects that are used internally by extend observable. That concluded the introduction to the three important observable data structures in MobX; objects, arrays, and maps.