React Native/Redux: Как передать обновленное состояние дочерним компонентам при каждом изменении состояния?

Question

В React Native и Redux я использую <NavigationCardStack/> в качестве корневого компонента и визуализирую маршруты с помощью _renderScene(). Но, похоже, всякий раз, когда корневой компонент повторно обновляется с обновлением состояния, он не передает состояние каждого обновления, потому что я помещаю console.log(this.props) в дочерний компонент и регистрирует переданное состояние, но он регистрируется только один раз, и это первый раз, когда приложение запускается и никогда не регистрируется, даже если корневой компонент повторно отображается с обновлением состояния.

Почему он не передает обновленное состояние при каждом изменении состояния? И почему не реинкарнация дочернего компонента всякий раз, когда выполняется корневой компонент?

Это мой набор вверх:

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

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

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

В _renderScene, props одни журналы:

И this.props регистрирует фактически состояние передается через Redux:

И в детском компоненте childPage.js, я просто войти как это так, и он записывает реквизит передающийся (_handleNavigate и state) правильно, но state только продолжает представлять исходное состояние, даже если он получает обновление:

render() { 
    console.log(this.props.state) 

    return (

Спасибо заранее!

EDIT

Это мой редуктор и компоненты ребенка будет просто войти в InitialState здесь, даже если были добавлены другие свойства и обновления:

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 

И подключены к корневой компонент, как так :

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

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

С следующих действий:

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

Answer 1

Первое, что вы думаете, что ваш навигационный интерфейс не реиндексирован, так как он считает, что реквизит, который ему представлен, не изменился. Попробуйте заставить rerender (forceUpdate) и посмотреть, что произойдет.

Answer 2

Существует только одна причина, по которой дочерний компонент не отображает после родительского рендеринга - его метод toComponentUpdate или один из компонента между ним и родителем возвращает false. Часто (особенно с помощью Redux) shouldComponentUpdate методы записываются, чтобы заблокировать повтор, если свойства не изменились неглубоко. Redux полагается на то, что вы не изменяете состояние, но вместо этого всегда возвращаете новый объект с любыми изменениями от вашего редуктора, в противном случае оптимизация shouldComponentUpdate вызывает неожиданное поведение.

Возможно, проблема в том, что вы изменяете глубокое состояние, а не возвращаете новые объекты? См. http://redux.js.org/docs/basics/Reducers.html для более подробной информации.