Is using context.store.getState() in an onClick handler considered as anti-pattern?
<p>I have the following simplified Component for a dashboard. The dashboard object is injected via props. The handleDeleteDashboard action checks if the dashboard isn't the last available one. If it is, you are not allowed to delete it. For this check I need nrOfDashboards which I get from the store in mapStateToProps. So I connected the Component to the redux store.</p>

<pre><code>class Dashboard extends Component {
    constructor(props) {
        super(props);
        this.handleDeleteDashboard = this.handleDeleteDashboard.bind(this);
    }

    handleDeleteDashboard() {
        const { dashboardDeleteAction, dashboard, nrOfDashboards } = this.props;
        if (nrOfDashboards &lt; 2) {
            // NOT Allowed to delete
        } else {
            dashboardDeleteAction(dashboard.id);
        }
    }

    render() {
        const { dashboard } = this.props;
        return (
            &lt;Content&gt;
               &lt;h1&gt;{dashboard.name}&lt;/h1&gt;
               &lt;Button onButtonClick={this.handleDeleteDashboard}&gt;Delete&lt;/Button&gt;
            &lt;/Content&gt;
        );
    }
}
Dashboard.propTypes = {
    dashboard: customPropTypes.dashboard.isRequired,
    nrOfDashboards: PropTypes.number.isRequired
};
function mapStateToProps(state) {
   return {
      nrOfDashboards: selectNrOfDashboards(state)
   }
}
export default connect(mapStateToProps, { dashboardDeleteAction: dashboardActionCreators.dashboardDelete })(Dashboard);
</code></pre>

<p>But now the Component is subscribed to the store and updates whenever nrOfDashboards changes (I know I can perform a shouldComponentUpdate here to prevent if from re-rendering but that is not the point). So I am basically subscribing to changes on nrOfDashboards although I only need this information when I actively click on the delete button.</p>

<p>So I came up with a alternative solution where I disconnected the Component from the store and access the store via context in the handleDeleteDashboard method.</p>

<pre><code>class Dashboard extends Component {
   constructor(props) {
      ...
   }

   handleDeleteDashboard() {
      const { dashboardDeleteAction, dashboard } = this.props;
      const store = this.context;
      if (selectNrOfDashboards(store.getState()) &lt; 2) {
         // NOT Allowed to delete
      } else {
         dashboardDeleteAction(dashboard.id);
      }
   }    
   render() {
        ...
   }
}
Dashboard.propTypes = {
   dashboard: customPropTypes.dashboard.isRequired,
};
Dashboard.contextTypes = {
   store: PropTypes.object
};
export default connect(null, { dashboardDeleteAction: dashboardActionCreators.dashboardDelete })(Dashboard);
</code></pre>

<p>This works fine for me and whenever I actively click the button I ensure to get the fresh state from the store. Anyhow, I have not seen this technique somewhere else before and also read somewhere that accessing the store should not be done outside of mapStateToProps. But my question is if direct access to the store on demand is an anti-pattern and if I better should follow code example one, where I connect the Component to the store?</p>