Mobx presentation

Mobx

Simple, scalable state management

Mobx explained in two lines

1. Define observables
2. Observe them

observable

defines observable

• observable(value)
• @observable classProperty = value

could be js primitive, reference, plain object, class instance, array and map

autorun

tracks observable

• autorun(function)

example

computed

			@computed get propertyName() {
			   // return value based on other observables
			}
		

computed usage example

Integration with react

Define observable

			import { observable } from 'mobx';
			 
			class Store {
				@observable name = '';
			}
			 
			const store = new Store();
		

Define observer component

			import { observer } from 'mobx-react';
			 
			@observer
			class View extends React.Component {
				render() {
					return <div>{store.name}</div>
				}
			}
		

Stateless components

			import { observer } from 'mobx-react';
			 
			const View = observer(() => <div>{store.name}</div>)
		

React example

action

			@action method() {
			   // change observable state
			}
			 
			@action.bound method() {
				// binds method (useful in react components)
			}
		

action.bound react example

Now that's your turn

Implement todo list using mobx

Good luck

Use this jsbin as starting point