react-mobx-1

import {observable} from 'mobx';

var appState = observable({
    timer: 0
});

import {observer} from 'mobx-react';

@observer
class TimerView extends React.Component {
    render() {
        return (
            <button onClick={this.onReset.bind(this)}>
                Seconds passed: {this.props.appState.timer}
            </button>
        );
    }

    onReset() {
        this.props.appState.resetTimer();
    }
};

ReactDOM.render(<TimerView appState={appState} />, document.body);

appState.resetTimer = action(function reset() {
    appState.timer = 0;
});

setInterval(action(function tick() {
    appState.timer += 1;
}), 1000);

1 . State (state) 
state is data-driven applications, like data excel spreadsheet.

2 . Derivations (derived from) 
any derived state and will not have any further interaction thing is derived. The user interface derived data number for the task, such as the rest.
Back-end integration , such as to send changes to the server. 
MobX distinguishes between two types of derivatives:

Values Computed (calc) - they are never pure function can be used (pure function) can be derived from the current observation state value. Reactions (Reaction)

 - Reactions side effects is to be automatically occurs when a state changes. 
There is a need to bridge connection command programming (imperative programming) and reactive programming (reactive programming). 
They ultimately are required to implement the I / O operations. 
Golden Rule: If you want to create a state based on the current value, use computed.

. 3 . The Actions (operation) 
operation status code may be changed. User event, the back-end data push, scheduled events, and so on. 
If you are using MobX in strict mode, then, MobX will only be forced to modify the state in action.

in principle:

MobX supports one-way data flow, that is, action to change the status, change of status will update all affected views. 

When the state changes, all derivatives will automatically update the atomic level, are all updated simultaneously derived default. 

Calculated delay is updated, all calculated values should be pure. They should not be used to change the state

eg:

Observable {Import, Autorun} from  ' mobx ' ; 

var todoStore = Observable ({
     / * number of observed state * / 
    Todos: [], 

    / * derived value * / 
    GET completedCount () {
         return  the this .todos.filter (= TODO > todo.completed) .length; 
    } 
}); 

/ * function observation state change * / 
Autorun (function () { 
    the console.log ( " the Completed% D% D of items " , 
        todoStore.completedCount, 
        todoStore.todos.length 
    ); 
}); 

/ *.. and some changes in the operation state * / 
todoStore.todos [ 0 ] = { 
    title: " the Take A Walk " , 
    Completed: to false 
}; 
// -> synchronous print 'of the Completed 0. 1 items' 

todoStore.todos [ 0 ] = .completed to true ;
 // -> synchronous print 'Completed 1 of 1 items'

Guess you like