React Native/Redux: How to pass down updated state to child components every time state changes?
<p>In React Native and Redux, I am using <code>&lt;NavigationCardStack/&gt;</code> as the root component and render routes with <code>_renderScene()</code>. But seems like whenever the root component re-renders with state update, it does not pass the state down every update, because I put <code>console.log(this.props)</code> in the child component and logs the passed state, but it only logs once and that is the first time the app starts up and never logs after even if the root component re-renders with the state update. </p>

<p>Why isn't it passing down the updated state every time the state changes? And why doesn't the child component re-render whenever the root component does? </p>

<p>This is my set up:</p>

<pre><code>  _renderScene (props) {
    const { route } = props.scene

    return (
      &lt;route.component _handleNavigate={this._handleNavigate.bind(this)} state={this.props}/&gt;
    )
  }

    &lt;NavigationCardStack
      direction='horizontal'
      navigationState={this.props.navigation}
      onNavigate={this._handleNavigate.bind(this)}
      renderScene={this._renderScene}
      renderOverlay={this.renderOverlay}
      style={styles.container}
    /&gt;
</code></pre>

<p>In <code>_renderScene</code>, <code>props</code> alone logs:</p>

<p><a href="https://i.stack.imgur.com/x1prK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/x1prK.png" alt="enter image description here"></a></p>

<p>And <code>this.props</code> logs the actually state passed down via Redux:</p>

<p><a href="https://i.stack.imgur.com/jKEPW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jKEPW.png" alt="enter image description here"></a></p>

<p>And in the child component <code>childPage.js</code>, I am simply logging like so, and it logs the props passed down (<code>_handleNavigate</code> and <code>state</code>) correctly but the <code>state</code> just continues to represent initial state even if it gets updated:</p>

<pre><code>  render() {
    console.log(this.props.state)

    return (
</code></pre>

<p>Thank you in advance!</p>

<p><strong>EDIT</strong></p>

<p>This is my reducer and the child component would just log the initialState here even though other properties have been added and updated: </p>

<pre><code>const initialState = {
  meetUp: false,
}

function itemReducer(state = initialState, action) {
  switch(action.type) {


    case ITEM_QUANTITY:
      return {
        ...state,
        quantity: action.quantity
      }

    case ITEM_PRICE:
      return {
        ...state,
        price: action.price
      }

    case ITEM_MEET_UP:
      return {
        ...state,
        meetUp: action.meetUp
      }

     default:
       return state
  }
}

export default itemReducer
</code></pre>

<p>And connected to the root component like so:</p>

<pre><code>function mapStateToProps(state) {
  return {
    itemInfo: state.itemReducer,
    ...
  }
}

export default connect(
  mapStateToProps,
  {
    itemQuantity: (value) =&gt; itemQuantity(value),
    itemPrice: (value) =&gt; itemPrice(value),
    itemMeetUp: (value) =&gt; itemMeetUp(value),
  }
)(NavigationRoot)
</code></pre>

<p>With following actions:</p>

<pre><code>export function itemMeetUp(value) {
  return {
    type: ITEM_MEET_UP,
    meetUp: value
  }
}

export function itemQuantity(value) {
  return {
    type: ITEM_QUANTITY,
    quantity: value
  }
}

export function itemPrice(value) {
  return {
    type: ITEM_PRICE,
    price: value
  }
}
</code></pre>