title: How can I dispatch from child components in React Redux?
body: <p>My server has code like this:</p>
  
  <p><code>&lt;ReactRedux.Provider store={store}&gt;&lt;Layout defaultStore={JSON.stringify(store.getState())}/&gt;&lt;/ReactRedux.Provider&gt;</code></p>
  
  <p><code>&lt;Layout&gt;</code> obviously has more components which nest more.</p>
  
  <p>I have a class like this deeper down:</p>
  
  <pre><code>import React from 'react';
  
  export default React.createClass({
    render: function(){
      var classes = [
        'js-select-product',
        'pseudo-link'
      ];
  
      if (this.props.selected) {
        classes.push('bold');
      }
  
      return (
        &lt;li className="js-product-selection"&gt;
          &lt;span onClick={this.props.onClick} className={classes.join(' ')} data-product={this.props.id}&gt;{this.props.name}&lt;/span&gt;
        &lt;/li&gt;
      );
    }
  });
  </code></pre>
  
  <p>What I really want to do rather than <code>this.props.onClick</code> is dispatch an event to <a href="http://redux.js.org/docs/basics/Reducers.html" rel="noreferrer">set state in a reducer</a>. I've been some things online about context but I've gotten mixed reviews as that feature was or wasn't going away.</p>
  
  <p><strong>EDIT</strong>
  I see this <a href="https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options" rel="noreferrer">connect method</a> but I could have sworn I'd read not to use <code>connect</code> in children components.</p>