From John Tsevdos / @tsevdos
class Todo {
id = Math.random();
@observable title = "";
@observable finished = false;
}
function Todo() {
this.id = Math.random();
extendObservable(this, {
title: "",
finished: false
});
}
class TodoList {
@observable todos = [];
@computed get unfinishedTodoCount() {
return this.todos.filter(todo => !todo.finished).length;
}
}
store.todos.push(
new Todo("Get Coffee"),
new Todo("Improve Dashboard")
);
Unlike many flux frameworks, MobX is unopinionated about how user events should be handled.
import React, {Component} from "react";
import ReactDOM from "react-dom";
import {observer} from "mobx-react";
@observer
class TodoListView extends Component {
render() {
return (
<div>
<ul>
{this.props.todoList.todos.map(todo => <TodoView todo={todo} key={todo.id} />)}
</ul>
Tasks left: {this.props.todoList.unfinishedTodoCount}
</div>
)
}
}
Custom reactions can simply be created using the autorun, reaction or when functions to fit your specific situations.