title: MobX not updating React view when pushing to an array
body: <p>My Store.js:</p>
  
  <pre><code>import { observable, useStrict, action } from 'mobx';
  
  useStrict(true);
  
  export const state = observable({
  
      contacts: []
  
  });
  
  export const actions = {
  
      addContact: action((firstName, lastName) =&gt; {
          state.contacts.push({
              id: Math.floor((Math.random() * 1000) + 1),
              firstName: firstName,
              lastName: lastName
          });
      })
  
  };
  </code></pre>
  
  <p>My index.js:</p>
  
  <pre><code>import React from 'react';
  import { Provider } from 'mobx-react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';
  import registerServiceWorker from './registerServiceWorker';
  import { state, actions } from './Store';
  
  ReactDOM.render(
      &lt;Provider state={state} actions={actions}&gt;
          &lt;App /&gt;
      &lt;/Provider&gt;,
      document.getElementById('root')
  );
  registerServiceWorker();
  </code></pre>
  
  <p>My App.js:</p>
  
  <pre><code>import React, { Component } from 'react';
  import ContactList from './components/ContactList';
  import ContactAdder from './components/ContactAdder';
  import { observer, inject } from 'mobx-react';
  
  const App = inject('state', 'actions')(observer(class App extends Component {
    render() {
      return (
        &lt;div&gt;
  
          &lt;h1&gt;Contacts&lt;/h1&gt;
  
          &lt;ContactList
            contacts={this.props.state.contacts}
            onDelete={this.props.actions.removeContact}
          /&gt;
  
          &lt;ContactAdder onAdd={this.props.actions.addContact} /&gt;
  
        &lt;/div&gt;
      );
    }
  }));
  
  export default App;
  </code></pre>
  
  <p>And finally my ContactAdder.js:</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class ContactAdder extends Component {
  
      render() {
          return (
              &lt;div className='ContactAdder'&gt;
                  &lt;input type='text' value='' placeholder='First Name' /&gt;
                  &lt;input type='text' value='' placeholder='Last Name' /&gt;
                  &lt;button onClick={this.props.onAdd.bind(this, 'Test', 'Testerson')}&gt;Add&lt;/button&gt;
              &lt;/div&gt;
          );
      }
  
  }
  
  export default ContactAdder;
  </code></pre>
  
  <p>After <code>addContact()</code> runs in <code>Store.js</code> I can see, when I do a console log, that the array does get mutated. But for some reason my view isn't reacting. What am I doing wrong?</p>