App.jsx

import React from 'react'
import { Provider } from 'mobx-react'
// Importing our own stores
import { UserStore, ContactStore } from '../stores'

const state = {
  userStore: UserStore,
  contactStore: ContactStore
}

export default function App() {
  return (
    <Provider state={state}>
      <ContactList />
    </Provider>
  )
}

ContactList.jsx

import React from 'react'
import { observer } from 'mobx-react'
// Importing our custom connect function from above
import connect from '../mobx-connect'

@observer
class ContactList extends React.Component {
  render() {
    return (
      <div>
        <p>Welcome, { this.props.user.name }</p>
        <p>You have { this.props.contacts.length } contacts</p>
      </div>
    )
  }
}

const mapStateToProps = (state => {
  return ({
    user: state.userStore.user,
    contacts: state.contactStore.contacts
  })
})

export default connect(mapStateToProps)(ContactList)

mobx-connect.js

import { inject } from 'mobx-react'

const connect = (mapStateToProps) => {
  return (component) => {
    return inject((stores, props, context) => { return mapStateToProps(context.mobxStores.state) })(component)
  }
}

export default connect