import * as React from 'react' ; import * as ReactDOM from 'react-dom' ; import { useLocalObservable , Observer , observer } from 'mobx-react-lite' ; /**
 * Global Store
 */ const StoreContext = React . createContext ( ) ; function StoreProvider ( { children } ) { const store = useLocalObservable ( ( ) => { return { count : 0 , increment : ( ) => { store . count ++ ; } , decrement : ( ) => { store . count -- ; } , } ; } ) ; return < StoreContext . Provider value = { store } children = { children } / > ; } /**
 * App Tree
 */ function App ( ) { return ( < StoreProvider > < Layout /> < /StoreProvider>); } function Layout ( ) { return ( < div className = "spacing-small" > < Counter /> < Report / > < /div>); } function Counter ( ) { const store = React . useContext ( StoreContext ) ; return ( < div className = "horizontal-spacing" > < button onClick = { ( ) => store . decrement ( ) } className = "button" > Decrement < /button> < button onClick = { ( ) => store . increment ( ) } className = "button" > Increment < /button> < /div>); } function Report ( ) { const store = React . useContext ( StoreContext ) ; return ( < Observer > { ( ) => { return ( < div > Count : { store . count } { } < /div>); } } < /Observer>); } ReactDOM . render ( < App />, document.getElementById('root'));