What is MobX.observe?
Overview
MobX is a state-management JavaScript library that works well alongside React. One of the key features that MobX provides is it makes the objects in the your application observables. These observables are then continuously inspected to detect any change in state. This detection of a change in state lets the application take necessary actions.
Role of MobX.observe
The observe function can be used to inspect changes after they have been committed. You can use it to monitor the observables in the application.
Format
observe(target, propertyName?, listener, invokeImmediately?)
| Argument | Description |
|---|---|
| target | The observable to observe. |
| propertyName? | Optional parameter to observe a specific property of the observable. |
| listener | Callback that will be invoked for each change that is made to the observable. |
| invokeImmediately? | By default, it’s false. Set to true if you want observe to invoke listener directly with the state of the observable (instead of waiting for the first change). |
CAUTION:
observe(target, listener)is fundamentally different fromobserve(target, propertyName?, listener). The first observes the current value inside target, which might not be an observable at all, and the latter observes a specific property of the target.
Example
Let’s take a look at the following code snippet:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app.js';
ReactDOM.render(
<App />,
document.getElementById('root')
);
In the code example above, there are a couple of things to note:
- The object
personhas two observables:firstNameandlastName. disposer: The observe function has two arguments:person(target) andchange(callback).disposer2: The observe function has three arguments:person(target),lastName(property), andchange(callback).
As soon as the firstName updates from Maarten to Martin, the disposer() is called and outputs the following string specified in console.log():
update firstName from Maarten to Martin
Later, when the lastName field updates from Loother to Luther, the disposer2() is called and outputs the following string specified in the console.log():
LastName changed to Luther
Free Resources
