import { observer, inject } from 'mobx-react';

export function connect(selectorFunction, component) {
  return inject(selectorFunction)(observer(component));
}

import React from 'react';
import { connect } from 'utils';

const selector = (stores) => {
  console.log(stores);
  return {
    counter: stores.counterStore.counter,
    double: stores.counterStore.double,
    increment: stores.counterStore.increment
  };
};

const Counter = ({ counter, double, increment }) => {
  console.log(increment);
  return (
    <div className="counter">
      <p>{ counter }</p>
      <p className="double">{ double }</p>
      <button onClick={increment}>+1</button>
    </div>
  );
};

export default connect(selector, Counter);

import { observable, computed, action } from 'mobx';

export default class Counter {
  @observable counter = 0;

  @action
  increment = () => {
    this.counter++;
  }

  @computed
  get double() {
    return this.counter * 2;
  }
}