MobX is a library that uses functional reactive programming to simplify state management in applications. It uses decorators like @observable, @computed, and @action to transparently observe state changes and automatically update dependent views. MobX ensures state and views remain consistent by deriving all values and automatically running reactions when the source data changes. MobX also includes tools for debugging observable state and integrating with React applications.

1. MobX

2. “MobX is a battle tested library that makes state
management simple and scalable by transparently
applying functional reactive programming”
MobX docs

5. Actions State Views
Modify Updates
Σ

6. Everything Should Be Derived
Automatically
Define derivations & reactions
MobX ensures efficiency & consistency

7. Decorators (ES.next)
@doSomething
myFunction () {
}
doSomething( myFunction () {
})

8. @action

9. @observable
enables MobX to observe your data
@observer
MobX ensures that this component is consistent with the state
@computed
MobX ensures that this value is consistent with the state

10. @observable
Observable values can be:
● Observable Map
● Observable Array
● Observable Object
● Boxed Observable

11. @computed
reactively produce a value that can be used by other observers

12. Autorun

13. useStrict(false)

14. mobx-react

15. Create observer View

16. mobx-react-devtools

17. Demo