Mobx + React Experimetns

by ramnathv

HTML

<script src="https://npmcdn.com/[email protected]/lib/mobx.umd.js"></script>
<script src="https://npmcdn.com/[email protected]/index.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"></script>
<body>
  <div id="mount">
  
  </div>
</body>

Babel + JSX

const {observable, computed, extendObservable} = mobx;
const {observer} = mobxReact;
const {Component} = React;
const {render} = ReactDOM


class ObservableTodoStore {
  @observable todos = []
  addToDo(task){
		this.todos.push({ 
			task: task,
			completed: false,
			assignee: null
		}); 
  }
}

const App = observer(({store}) => {
    const onNewToDo = () => store.addToDo("New")
    const onNewToDo2 = () => store.todos.push({
      task: "Newer", completed: false, asignee: null
    })
    return(
      <div>
        <ul>
          {store.todos.map((d, i) => {
            return <li key={i}>{d.task}</li>
          })}
        </ul>
        <button onClick={onNewToDo}>+</button>
        <button onClick={onNewToDo2}>x</button>
      </div>
    ) 
})






const observableTodoStore = new ObservableTodoStore();
observableTodoStore.addToDo("read MobX tutorial"); 
observableTodoStore.addToDo("read MobXxx tutorial");
                        
                        
render(
  <App store={observableTodoStore} />,
  document.getElementById("mount")
)



/*
@observer
class App2 extends Component {
  onNewToDo = () => {
    console.log(this.props.store.addToDo)
    this.props.store.addToDo("New")
  }
  render(){
    const todos = this.props.store.todos
    return(
      <div>
        <ul>
          {todos.map((d, i) => {
            return <li>{d.task}</li>
          })}
        </ul>
        <button onClick={this.onNewToDo}>+</button>
        <button onClick={this.onNewToDo}>x</button>
      </div>
    ) 
  }
}

class ObservableTodoStore {
	@observable todos = [];
  @observable pendingRequests = 0;

  constructor() {
      mobx.autorun(() => console.log(this.report));
  }

	@computed get completedTodosCount() {
    	return this.todos.filter(
			todo => todo.completed === true
		).length;
  }

	@computed get report() {
		if (this.todos.length === 0)
			return "<none>";
		return `Next todo: "${this.todos[0].task}". ` + 
			`Progress:...