MobX takes a different approach than Redux. Rather than applying restrictions to make state changes predictable, it aims to automatically update anything that is derived from the application state. Rather than dispatching actions, in MobX we can directly modify the state object and MobX will take care of updating anything that uses the state.
The MobX life cycle works as follows:
- Events (such as onClick) invoke actions, which are the only things that can modify state:
@action onClick = () => {
this.props.todo.completed = true
}
- State is observable, and should not contain redundant or derivable data. State is very flexible—it can contain classes, arrays, references, or it can even be a graph:
@observable todos = [
{ title: 'Learn MobX', completed: false }
]
- Computed values are derived from state through a pure function. These will be automatically...