title: How to re render sub component on prop change with redux?
body: <p>I have a react native app using redux and immutable js. When i dispatch an action from my main screen, it goes through my actions, to my reducer and then back to my container, however, the view doesn't update and componentWillReceieveProps is never called. Furthermore, the main screen is a list whose items are sub components <strong>Item</strong>. Here's the relevant code for the issue, if you want to see more let me know.</p>
  
  <p>Render the row with the data:</p>
  
  <pre><code>renderRow(rowData) {
      return (
          &lt;Item item={ rowData } likePostEvent={this.props.likePostEvent} user={ this.props.user } removable={ this.props.connected } /&gt;
      )
  }
  </code></pre>
  
  <p>The part of Item.js which dispatches an action, and shows the result:</p>
  
  <pre><code>&lt;View style={{flex: 1, justifyContent:'center', alignItems: 'center'}}&gt;
                          &lt;TouchableOpacity onPress={ this.changeStatus.bind(this, "up") }&gt;
                              &lt;Image source={require('../img/up-arrow.png')} style={s.upDownArrow} /&gt;
                          &lt;/TouchableOpacity&gt;
                          &lt;Text style={[s.cardText,{fontSize:16,padding:2}]}&gt;
                              { this.props.item.starCount }
                          &lt;/Text&gt;
                          &lt;TouchableOpacity onPress={ this.changeStatus.bind(this, "down") }&gt;
                              &lt;Image source={require('../img/up-arrow.png')} style={[s.upDownArrow,{transform: [{rotate: '180deg'}]}]} /&gt;
                          &lt;/TouchableOpacity&gt;
                      &lt;/View&gt;
  </code></pre>
  
  <p>The action dispatched goes to firebase, which has an onChange handler that dispatches another action.</p>
  
  <p>The reducer:</p>
  
  <pre><code>const initialState = Map({
   onlineList: [],
   offlineList: [],
   filteredItems: [],
   connectionChecked: false,
   user: ''
  })
  ...
  ...
  case ITEM_CHANGED:
  list = state.get('onlineList')
  if(state.get('onlineList').filter((e) =&gt; e.id == action.item.id).length &gt; 0){
    let index = state.get('onlineList').findIndex(item =&gt; item.id === action.item.id);
    list[index] = action.item
    list = list.sort((a, b) =&gt; b.time_posted - a.time_posted)
  }
  return state.set('onlineList',  list)
              .set('offlineList', list)
  </code></pre>
  
  <p>The container:</p>
  
  <pre><code>function mapStateToProps(state) {
   return {
      onlineItems: state.items.get('onlineList'),
      offlineItems: state.items.get('offlineList'),
      filteredItems: state.items.get('filteredItems'),
      connectionChecked: state.items.get('connectionChecked'),
      connected: state.items.get('connected'),
      user: state.login.user
    }
  }
  </code></pre>
  
  <p>Where I connect the onChange:</p>
  
  <pre><code>export function getInitialState(closure_list) {
    itemsRef.on('child_removed', (snapshot) =&gt; {
      closure_list.removeItem(snapshot.val().id)
    })
    itemsRef.on('child_added', (snapshot) =&gt; {
      closure_list.addItem(snapshot.val())
    })
  
    itemsRef.on('child_changed', (snapshot) =&gt; {
      closure_list.itemChanged(snapshot.val())
    })
  
    connectedRef.on('value', snap =&gt; {
      if (snap.val() === true) {
        closure_list.goOnline()
      } else {
        closure_list.goOffline()
      }
    })
    return {
      type: GET_INITIAL_STATE,
      connected: true
    }
  }
  </code></pre>
  
  <p>Calling get initial state:</p>
  
  <pre><code>this.props.getInitialState({
          addItem: this.props.addItem,
          removeItem: this.props.removeItem,
          goOnline: this.props.goOnline,
          goOffline: this.props.goOffline,
          itemChanged: this.props.itemChanged
      })
  </code></pre>
  
  <p>Any suggestions are welcome, thanks so much!</p>