So far we have used the observable decorator extensively. Let's take a closer look on what it does and see how the extendObservable and observable functions can be used to create observable objects, arrays and maps.
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.
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.
Now, we have the same app, but this time we didn't use classes. Use whatever style you prefer.
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.
What we do first is giving the temperature an ID field because we need this later for [inaudible 1:19] 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.
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 1:43] uses that to reconcile the [inaudible 1: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 2:03] . 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.
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.
Most important functions are our get, set, and has.
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.