react-mobx-connect

React connector to MobX

This simple HOC easily connects MobX to React components.

You can connect MobX to every ComponentClass | ClassicComponentClass | StatelessComponent components without @inject & @observer of mobx-react.

Usage

• install

npm install mobx-react-connect

• connect store to component

// Toggle.jsx
import connect from 'mobx-react-connect';
 
// [ComponentClass | StatelessComponent | ClassicComponentClass]
class Toggle extends React.Component {
  render() {
    const { toggle, handleToggle } = this.props;
 
    return (
      <div>
        <h1>toggle state: {({ 0: 'close', 1: 'open' })[toggle]}</h1>
        <button onClick={handleToggle}>{({ 0: 'open', 1: 'close' })[toggle]}</button>
      </div>
    );
  }
}
 
export default connect(
  // inject stores as a string array
  ['toggleStore'],
  // map store to props
  (stores) => ({
    toggle: stores.toggleStore.toggle,
    handleToggle: stores.toggleStore.handleToggle,
  }),
)(Toggle);

• create store

// toggleStore.js
import { observable, action } from 'mobx';
 
class ToggleStore {
  @observable toggle = 0;
 
  @action.bound
  handleToggle() {
    this.toggle = +!this.toggle;
  }
}
 
export default new ToggleStore();

• setup App

import { Provider } from 'mobx-react';
import Toggle from './container/Toggle';
import toggleStore from './store/toggleStore';
 
ReactDOM.render(
  <Provider {...{ toggleStore }}>
    <Toggle />
  </Provider>,
  MOUNT_NODE,
);