title: React: How to access component refs from Redux/Flux actions?
body: <p>When implementing a state container like Redux or MobX, your state and events are usually moved to a separate class or object that no longer can read the refs.</p>
  
  <p>For example, in a normal component:</p>
  
  <pre><code>import Alert from Alert.js;
  
  class Dummy extends React.Component {
    constructor(props) {
      super(props);
  
      this.state = { clicked: false }
    }
  
    handleClick() {
      fetch('api').then(function(){
        this.setState({ clicked: true });
        this._alert.show('Cool response!');
      });
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;Alert ref={a =&gt; this._alert = a} /&gt;
          &lt;Button onClick={this.handleClick}/&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>If I click the button, once the server request is completed, the state is updated and the alert is triggered. Using refs like this is quite common in some modal and alert libraries.</p>
  
  <p>Now, in Redux (or any Flux implementation), that fetch() will live in an action, which lives in a separate file, which doesn't have access to <code>this._alert</code>.</p>
  
  <p>What would be the best way to maintain the functionality without rewriting the external "Alert" library?</p>