Mobx transaction example
Shows mobx's transaction value feature and how it batches updates author(s): Matt Ruby
by Matt Ruby
HTML
<div id="react-log"></div>
<script src="https://cdn.jsdelivr.net/g/[email protected](react.min.js+react-dom.min.js),[email protected]"></script>
<script src="https://npmcdn.com/[email protected]/lib/mobx.umd.js"></script>
<script src="https://npmcdn.com/[email protected]"></script>
<script src="https://rawgit.com/mattruby/mobx-examples/master/logging-utils.js"></script>
<script>
wrapConsole();
</script>JavaScript
console.clear();
var person = mobx.observable({
firstName: 'Matt',
lastName: 'Ruby',
age: 0,
fullName: function () {
console.count('fullName');
return this.firstName + ' ' + this.lastName;
}
});
mobx.autorun(function () {
console.log(person.fullName + ' ' + person.age);
});
// this will print Matt NN 1 times
mobx.transaction(function () {
_.times(10, function () {
person.age = _.random(40);
});
});
person.firstName = 'Mike';
person.firstName = 'Lissy';
mobx.transaction(function () {
person.firstName = 'Jon';
person.lastName = 'Smith';
});