- philosophy
- overview
- observables
- reactions: autorun
- derived values: computed
- actions
Making things observable
- observable.box
- observable.object
// -- app.js -- | |
import { AbstractNode } from './internal' | |
/* as is */ | |
// -- internal.js -- | |
export * from './AbstractNode' | |
export * from './Node' | |
export * from './Leaf' |
export class AbstractNode { | |
/* as is */ | |
} | |
import { Node } from './Node' | |
import { Leaf } from './Leaf' |
// -- AbstractNode.js -- | |
import { Leaf } from './Leaf' | |
import { Node } from './Node' | |
export class AbstractNode { | |
/* as is */ | |
} | |
// -- Node.js -- | |
import { AbstractNode } from './Node' |
export class AbstractNode { | |
constructor(parent) { | |
this.parent = parent | |
} | |
getDepth() { | |
if (this.parent) return this.parent.getDepth() + 1 | |
return 0 | |
} |
Object.defineProperty(observable([]).constructor.prototype, Symbol.isConcatSpreadable, { | |
enumerable: false, configurable: true, value: true | |
}) |
Making things observable
import { decorate, observable, flow, onBecomeObserved, onBecomeUnobserved } from 'mobx' | |
import { log } from './log' | |
const APPID = '<secret>' | |
export class City { | |
location | |
temperature | |
interval |
import { when } from "mobx" | |
async() => { | |
await when(() => user.loggedOut) | |
alert("You have been successfully logged out!") | |
} |
import { decorate, observable, flow } from "mobx" | |
/** | |
with decorator syntax enabled | |
*/ | |
class City { | |
@observable location | |
@observable temperature | |
@action.bound |
const CityView = observer(({ city }) => ( | |
<li> | |
City: {city.location} - Temperature in ℃: {city.temperature || 'Loading'} | |
</li> | |
)) |