React Native & Redux: Why aren't child components re-rendering on every state update?

Question

In React Native and Redux, I have a <NavigationCardStack/> as a root component. And every time state has been updated, the redux-logger updates correctly with the next/new state.

And after the state change, when newly updated state is console logged in a child component, it doesn't console log the updated state but rather console logs the initial state (in the child component childPage.js and logging: render(){ console.log(this.props.state) return(...) ...).

Could it be that I am hooked up to Redux incorrectly or missing something? Because, everything seem to work perfectly fine and makes sense.

Thank you in advance!

Here are some snippets of my code:

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

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

And connected to the root component like so:

function mapStateToProps(state) {
  return {
    itemInfo: state.itemReducer,
    ...
  }
}

export default connect(
  mapStateToProps,
  {
    itemQuantity: (value) => itemQuantity(value),
    itemPrice: (value) => itemPrice(value),
    itemMeetUp: (value) => itemMeetUp(value),
  }
)(NavigationRoot)

With following actions:

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
  }
}

state={this.props} represent the state and how it is supposed to be passed down to child components

  _renderScene (props) {
    const { route } = props.scene

    return (
      <route.component _handleNavigate={this._handleNavigate.bind(this)} state={this.props}/>
    )
  }

    <NavigationCardStack
      renderScene={this._renderScene}
      ...
    />

Answer 1

Could this issue be related? It seems similar in that NavigationCardStack won't update even though the redux state changes, and redux-logger logs the change. I can't tell from your code sample, but one way to test this might be to connect the children or one child directly to your redux store instead of having NavigationCardStack pass the store state in as props? That github issue above also has some hacky workarounds, but I'm not very familiar with react-native so I can't be much help there.