React/redux子更新プログラムの子（<select>更新<select>）

Question

私のコンテナには、私の店にconnect（）でバインドされたコンテナがあります。

// GetActiveAccount.jsx 
const VisibleActiveAccountsList = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(ActiveAccountsSelector) 

ActiveAccountsSelectorは、プレゼンテーションコンポーネントです。このプレゼンテーションコンポーネントの中に私が唯一

//activeAccountSelector render method 
    return(
      <div> 
        <GatewaySelector gateways={gateways} onSelectGateway={ (e) => { 
          console.log(e.target.value); 
         } 
        }/> 
        <PairSelector gateway={gateways[0]} onSelectPair={ (e) => { 
          console.log(e.target.value); 
         } 
        }/> 

      </div> 
     ) 

私が欲しいものです2つのプレゼンテーションコンポーネントをロードgatewaySelector上の選択した値がPairSelectorに渡された値を決定し、変更されたときに、それを更新することです。

これを行う正しい方法は何ですか？単純なセレクトチェンジのアップデートでは、アクションを過度に過小評価するようです。

私は親（activeAccountSelector）でマネージャーになっていると思いますが、どうですか？それは、すべてのプロセス（アクション、レデューサー...など）を経ることなく状態を変更するようにアドバイスされていないようだ私は親の小道具を変更するか？

Answer 1

はい。親コンポーネントのstateでそれを管理する必要があります。単に、gatewayの値を親のstateからPairSelectorの値に変更し、GatewaySelectorでゲートウェイが変更されたときにstateを変更することができます。

Reduxは、グローバルにアプリケーションに関係のない状態に反応状態を使用することをお勧めします。詳細については、Reduxの著者からcommentをお読みください。

class ActiveAccountSelector extends React.Component{ 

    contructor(props){ 
    super(props); 
    this.state = { selectedGateway: null}; 
    this.onSelectGateway = this.onSelectGateway.bind(this); 
    } 

    onSelectGateway(e){ 
    this.setState({ selectedGateway: e.target.value }); 
    } 

    render(){} 
    .... 
    return(
     <div> 
     <form> 
      <GatewaySelector gateways={gateways} onSelectGateway={ this.onSelectGateway} 
      }/> 
      <PairSelector gateway={this.state.selectedGateway} onSelectPair={ (e) => { 
      console.log(e.target.value); 
      }}/> 
      </form> 
     </div> 
    ); 
    } 

}