Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 986 of the free egghead.io lessons, plus get React content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

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

3:46 React lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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.

Avatar
Parker

It seems like getting the Kelvin and Fahrenheit reversed is going to be an ongoing thing... Is there any way to fix this? It is pretty distracting to the otherwise great lesson.

Avatar
Michel Weststrate

Saddly not without re-recording all the videos. It is a really stupid mistake (I'm only used to Celsius myself ;-)) so I hope it is not too much in the way!

In reply to Parker

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.

[pause]

Most important functions are our get, set, and has.

[pause]

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.

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.



HEY, QUICK QUESTION!
Joel's Head
Why are we asking?