title: Child component does not update when parent state changes
body: <p>I have a situation where I am passing props from parent to child component. The parent is connected to the redux store and, from the child (using bindActionCreators), I dispatch some action to change the state in the store which the parent is connected to. Now, when I change the state in the store from the child, the parent gets updated but the child does not. The (logic)/(user action) to cause that change originates in the child. I got around the problem by dispatching the action from the parent itself and sending the necessary information from the child to the parent through a callback. Now, the parent and child both update. The code is too big to post here and I have at least got the code to work. I am just wondering why the child does not update in the case where the action is dispatched from the child, can someone point out if I am missing some basic concept here or it could be something more complicated that could only be resolved by going into the code in detail.</p>
  
  <p>(Simplified code included after edit). This is the version where the child dispatches the action to modify the store, the parent updates but the child does not. If I move the dispatch to the parent itself, then the child starts updating.</p>
  
  <p>Parent:</p>
  
  <pre><code>class Table extends Component {
  render() {
  return (
    &lt;div className = 'table-container'&gt;
        {
        this.props.columns.map((column) =&gt; 
         &lt;div key = {i}&gt;
           {column}
         &lt;/div&gt;
        }
        &lt;TableHeader
        columns = {this.props.columns}
        /&gt;
    &lt;/div&gt;
    )
   }
  }
  
  function mapStateToProps(state){
    return {
      columns: state.columns,
    };
  }
  
  export default connect(mapStateToProps, null)(Table);
  </code></pre>
  
  <p>Child:</p>
  
  <pre><code>class TableHeader extends Component {
  
    constructor(props){
      super(props)
      this.getColumnHeadings.bind(this)
    }
  
  
    onDragStart(ev, i) {
      ev.preventDefault();
    }
  
    onDragOver(ev) {
      ev.preventDefault();
    }
  
    onDrop(ev, i) {
      ev.preventDefault();
      this.props.changeColumns({index: i})
    }
  
  
    getColumnHeadings = (columns) =&gt; {
      return this.props.columns.map((column, i) =&gt;
          &lt;div key = {i}
          draggable
          onDragStart = {(ev) =&gt; this.onDragStart(ev, i)} 
          onDragOver = {this.onDragOver} 
          onDrop = {(ev) =&gt; this.onDrop(ev, i)}
          &gt;
          {column}
          &lt;/div&gt;
      )
    }
  
  
    render() {
      return (
            &lt;div className = 'table-header1'&gt;
              {this.getColumnHeadings(this.props.columns)}
            &lt;/div&gt;
      )
    }
  }
  
  function matchDispatchToProps(dispatch){
    return bindActionCreators({changeColumns: changeColumns}, dispatch)
  }
  
  export default connect(null, matchDispatchToProps)(TableHeader);
  </code></pre>
  
  <p>Action Creator:</p>
  
  <pre><code>export const changeColumns = (changeInfo) =&gt; ({ type: "change columns", payload: changeInfo});
  </code></pre>
  
  <p>Thanks!</p>