Mobx - React: Inject and Observe together
<p>Recently I started using mobx with react and mobx-react library.</p>

<p>I want to use functional React components to create my views.</p>

<p>I'd like to create a helper function, that takes selector function and Component, calls inject (with selector function as parameter) and observe on that Component - effectively connecting this component to mobx-react store (taken from Provider context) and providing only needed properties for this Component.</p>

<p>But I can't get it to work. Action is being dispatched, but views doesn't react to this change (store attributes does change, but Component doesn't react to this change).</p>

<p>Here's my helper function:</p>

<pre><code>import { observer, inject } from 'mobx-react';

export function connect(selectorFunction, component) {
  return inject(selectorFunction)(observer(component));
}
</code></pre>

<p>here's my Component:</p>

<pre><code>import React from 'react';
import { connect } from 'utils';

const selector = (stores) =&gt; {
  return {
    counter: stores.counterStore.counter,
    double: stores.counterStore.double,
    increment: stores.counterStore.increment
  };
};

const Counter = ({ counter, double, increment }) =&gt; {
  return (
    &lt;div className="counter"&gt;
      &lt;p&gt;{ counter }&lt;/p&gt;
      &lt;p className="double"&gt;{ double }&lt;/p&gt;
      &lt;button onClick={increment}&gt;+1&lt;/button&gt;
    &lt;/div&gt;
  );
};

export default connect(selector, Counter);
</code></pre>

<p>and here's my store:</p>

<pre><code>import { observable, computed, action } from 'mobx';

export default class Counter {
  @observable counter = 0;

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

  @computed
  get double() {
    return this.counter * 2;
  }
}
</code></pre>

<p>(Not showing Provider and other simple stuff, but it is set up properly).</p>

<p>Thanks! Every answer is much appreciated.</p>