React Native/Redux：状態が変わるたびに子コンポーネントに更新された状態を渡す方法はありますか？

Question

React NativeとReduxでは、私は<NavigationCardStack/>をルートコンポーネントとして使用し、_renderScene()でルートをレンダリングしています。しかし、私はconsole.log(this.props)を子コンポーネントに入れ、渡された状態をログに記録するので、ルートコンポーネントが状態更新で再レンダリングするたびに状態を渡すことはありませんが、一度だけログに記録されます。アプリケーションが起動し、ルートコンポーネントが状態更新で再レンダリングしてもログに記録されません。

状態が変更されるたびに更新された状態を通過しないのはなぜですか？ルートコンポーネントが実行するたびに子コンポーネントが再レンダリングされないのはなぜですか？

これは私のセットアップです：_renderSceneで

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

、propsのみログ：

そしてthis.props実際に状態が再来を経て受け継がれて記録されます：

と子コンポーネントchildPage.jsに、私は単純にそうようにログインしています、そしてそれは小道具が正しく（_handleNavigateとstate）に通したがstateはちょうどそれが更新される場合でも、初期状態を表現するために続けて記録します。

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

    return (

を

ありがとうございます！

EDIT

これは私の減速で、子コンポーネントがちょうど他のプロパティが追加され、更新されているにもかかわらず、ここでは初期状態が記録されます：

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

最初に推測されるのは、NavigationCardStackは、提示されている小道具が変更されていないと考えているため、再レンダリングしていないことです。再レンダリング（forceUpdate）を強制し、何が起こるかを見てみてください。

Answer 2

親コンポーネントのレンダリング後に子コンポーネントがレンダリングされない理由は1つだけです。コンポーネントのshouldComponentUpdateメソッド、またはコンポーネントと親コンポーネントの間のコンポーネントからfalseが返されます。頻繁に（特にReduxの場合）shouldComponentUpdateメソッドは、プロパティが変更されていない場合に再レンダリングをブロックするように書き込まれます。は浅くです。 Reduxはあなたの状態を変更せずに、あなたのレデューサーからの変更を常に新しいオブジェクトに返します。そうしないと、shouldComponentUpdateの最適化によって予期しない動作が発生します。

新しいオブジェクトを返すのではなく、深い状態を変更するという問題はありますか？詳細については、http://redux.js.org/docs/basics/Reducers.htmlを参照してください。