MobX

by Igor Saroko

MobX core idea

Simple, scalable state management

MobX philosophy

Anything that can be derived from the application state, should be derived. Automatically.

React and MobX together are a powerful combination.

React renders the application state

MobX provides the mechanism to store and update the application state

Core concepts

Observable state

Computed values

Reactions

Actions

1. Observable state

Example (ES7 or TypeScript, Babel)

                          
                            class Todo {
                                id = Math.random();
                                @observable title = "";
                                @observable finished = false;
                            }
                          
                        

Example (Object with a prototype)

                          
                            function Todo() {
                                this.id = Math.random()
                                extendObservable(this, {
                                    title: "",
                                    finished: false
                                })
                            }
                          
                        

Example (Plain objects, arrays and js primitives)

                          
                            let temperature = observable(20);

                            let list = observable([1, 2, 4]);

                            let person = observable({
                                firstName: "Clive Staples",
                                lastName: "Lewis"
                            });
                          
                        

2. Computed values

Example (ES7 way)



class TodoList {
    @observable todos = [];
    @computed unfinishedTodoCount() {
        return this.todos.filter(todo => !todo.finished).length;
    }
}
                        

Example (Old way)


var name = observable("John");

var upperCaseName = computed(() =>
    name.get().toUpperCase()
);
                        

3. Reactions

Example with React (ES 7 way)

                          
class TodoList {
    @observable todos = [];
    @computed get unfinishedTodoCount() {
        return this.todos.filter(todo => !todo.finished).length;
    }
}
@observer
class TodoListView extends Component {
    render() {
        return <div>{this.props.todoList.unfinishedTodoCount}</div>
    }
}
                          
                        

Example with React (Old way)

                          
const ReactObserver = observer(class TodoListView extends Component {
    render() {
        return <div>{this.props.todoList.unfinishedTodoCount}</div>
    }
})
                          
                        

Example with Autorun function

                          
let numbers = observable([1,2,3]);

let logger = autorun(() => console.log(numbers.length));
                          
                        

4. Actions

Example with action function

                              
let ObservableProperty = observable(20);
let Log = autorun(() => console.log(ObservableProperty));
let setProperty = mobx.action(() => {
    for (let Index = 0; Index < 10; ++Index)
    {
        ObservableProperty = Index;
    }

    ObservableProperty = 50;
})

setProperty();
                              
                            

Output:

50

Example (usual way)

                              
let ObservableProperty = observable(20);
let Log = autorun(() => console.log(ObservableProperty));
let setProperty = () => {
    for (let Index = 0; Index < 10; ++Index)
    {
        ObservableProperty = Index;
    }

    ObservableProperty = 50;
}

setProperty();
                              
                            

Output:

0
1
2
3
4
5
6
7
8
9
50

MobX: Simple and scalable

MobX is one of the least obtrusive libraries you can use for state management.

1. Using classes and real references

2. Easy interoperability

3. Simpler actions are easier to maintain

4. Fine grained observability is efficient

5. Referential integrity is guaranteed

Thank you for your attention