MobX-Recomse-Meduim.js

//// MyComponent/MyComponent.js
const MyComponent = ({class, text, setText}) => (
  <div 
    className={class} 
    onClick={setText}
  >{text}</div>
)

export default MyComponent
////

                      
                      
//// stores/MyStore.store.js
import { observable } from 'mobx'

const MyStore = observable({
  class: '',
  text: '' 
})

export default MyStore
////



//// stores/MyStore.actions.js
import { action } from 'mobx';

const MyStoreActions = store => {
  const setClass = action((value) => store.class = value)
  const setText = action((value) => store.text = value)
  return {
    setClass,
    setText
  }
}

export default MyStoreActions;
////



// MyComponent/index.js
import { inject, observer } from 'mobx-react';
import  { compose, withProps, withHandlers } from 'recompose';
import MyComponent from './MyComponent'
import MyStoreActions from './MyStore.actions'

const enhance = compose(
  inject('MyStore'),
  observer,
  withProps(({MyStore}) => {
    class: MyStore.class,
    text: MyStore.text,
    actions: MyStoreActions(MyStore)
  }),
  withHandlers({
    setClass: ({actions}) => (classToUpdate) => { actions.setClass(classToUpdate) }, 
    setText: ({actions}) => (textToUpdate) => { actions.setText(textToUpdate) },
 }),
)
export default MyComponent
////



//// App.js
import { observer, Provider } from 'mobx-react';
import myStore from '../stores/MyStore'

const stores = {
  myStore,
  ...
};

const App = () => {
  return (
    <Provider {...stores}>
      <MyComponent />
      ...
    </Provider>
  )
}

export default observer(App);