title: How to track mobx global store changes in componentDidUpdate
body: <p>I am playing around with <code>react</code> + <code>mobx</code> + <code>mobx-react</code> library. I have created mobx store to store the app settings(<code>appSettingsStore</code>). My react app has 2 components namely<code>AppHeader</code> &amp; <code>AppBody</code>. The AppHeader has dropdown and onChange value is store in mobx store. In my AppBody component, I call API to get data in <code>componentDidMount</code>. The AppBody component is wrapped around the router where different page have different API calls as value changes in <code>AppHeader</code> dropdown.</p>
  
  <p>I would like to call API in the AppBody component every time I change the selection in my dropdown. Is there any way I can track the change in my mobx store <code>appSettingsStore</code> in <code>componentDidUpdate</code>?</p>
  
  <p>I have created codesandbox for reference - <a href="https://codesandbox.io/s/gracious-flower-vu1js?file=/src/App.tsx" rel="nofollow noreferrer">https://codesandbox.io/s/gracious-flower-vu1js?file=/src/App.tsx</a></p>
  
  <p>App.tsx</p>
  
  <pre class="lang-js prettyprint-override"><code>export default function App() {
    return (
      &lt;React.Fragment&gt;
        &lt;AppHeader /&gt;
        &lt;Router&gt;
          &lt;Switch&gt;
            &lt;Route to="/" component={AppBody} exact /&gt;
          &lt;/Switch&gt;
        &lt;/Router&gt;
      &lt;/React.Fragment&gt;
    );
  }
  
  </code></pre>
  
  <p>AppSettingsStore.ts (Mobx store for storing global app settings)</p>
  
  <pre><code>import { observable, action } from "mobx";
  
  export class AppSettingsStore {
    @observable
    settings = "";
  
    get getAppSettings() {
      return this.settings;
    }
  
    @action
    setAppSettings(settings: string) {
      this.settings = settings;
    }
  }
  
  export const appSettingsStore = new AppSettingsStore();
  </code></pre>
  
  <p>Header.tsx</p>
  
  <pre><code>@observer
  export class AppHeader extends Component {
    render() {
      return (
        &lt;div&gt;
          My React App header component
          &lt;select
            onChange={e =&gt; appSettingsStore.setAppSettings(e.target.value)}
            style={{ width: 200, float: "right" }}
            value={appSettingsStore.getAppSettings}
          &gt;
            &lt;option value="" /&gt;
            &lt;option value="one"&gt;One&lt;/option&gt;
            &lt;option value="two"&gt;Two&lt;/option&gt;
            &lt;option value="three"&gt;Three&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Body.tsx</p>
  
  <pre><code>@observer
  export class AppBody extends Component {
    async componentDidMount() {
      // API calls
    }
  
    async componentDidUpdate() {
      // Check if mobx store value is different
      // from previous then call API otherwise ignore
      console.log(appSettingsStore.getAppSettings);
      // API calls
    }
  
    render() {
      return &lt;div style={{ padding: "5rem" }}&gt;This is App body component&lt;/div&gt;;
    }
  }
  
  </code></pre>
  
  <p>I would appreciate the help.</p>