独立したコンポーネントとデータの間のデータの受け渡し

Question

私は非常に反応しており、還元しています。あるコンポーネントから別のコンポーネントにデータを渡そうとしています。親子関係はなく、お互いに独立しています。誰も私にこれをするのを助けることができますか？以下は私のコードです。私はEMPNUMBERの送信先

export class EmpSearch extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     Empnumber: '' 
    }; 
    } 

    updateEmpNumber(e) { 
    this.setState({Empnumber: e.target.value}); 
    } 

    render() { 
    return (
     <div className="row"> 
     <form> 
      <div className="form-group"> 
      <label htmlFor="Empnumber">Emp Number</label> 
      <input type="text" className="form-control" id="Empnumber" placeholder="Emp Number" value={this.state.Empnumber} onChange={this.updateEmpNumber.bind(this)}/> 
      </div> 
     </form> 
     </div> 
    ); 
    } 
} 

function mapStateToProps(state){ 
    return{ 
    Empnumber: state.Empnumber 
    }; 
} 

export default connect(mapStateToProps)(EmpSearch); 

他のファイルがあるので、ここでは、以下の[OK]を

class EmpDetail extends React.Component { 
    render() { 
    return (
     <div className="container"> 
     <input type="text"/> 
     </div> 
    ); 
    } 
} 

export default EmpDetail; 

Answer 1

ある例です。私はあなたが既に設定されているすべてのReduxストア、つまりストアが作成された、rootReducerなどを持っていると仮定します。それはそれが別々のポストであるからです。

だから基本的な考え方は、あなたの再来ストアの状態を更新したいときにが減速にアクションを派遣し、それに伴ってデータのペイロードを送信することです。これは混乱していますが、本質的には減速機にあなたに何をしたいかを伝えるだけです。「ちょっと減速してください。あなたはUPDATE_EMP_NUMBERにしてください。ここにデータがあります。

減速機は、基本的に、あなたの与えられた動作に基づいて状態の新しい部分を返すだけの大規模なswitch文です。

もう一度あなたのアーキテクチャや店舗などについては何も知らないので、これはすべての仮定に基づいていますが、ここではあなたのように見えます。

念頭において上記でリデューサー

export default function employeeReducer(state = [], action) { 
    switch (action.type) { 
     case UPDATE_EMP_NUMBER: 
      { 
       const Empnumber = action.payload; 
       return { 
        ...state, 
        Empnumber 
       }; 
      } 
      case ANOTHER_ACTION: 
      { 
       // etc... 
      } 
     default: 
      return state; 
    } 
} 

、あなたはそうのようにコードを更新することができます。

EmpSearch

export class EmpSearch extends React.Component { 
     // Not needed anymore as state going to Redux and not local component state 
    /* 
     constructor(props) { 
     super(props); 
     this.state = { 
      Empnumber: '' 
     }; 
     } 
    */ 

    updateEmpNumber(e) { 
     // No need to set state here as you are now passing this data to Redux store 
     // this.setState({Empnumber: e.target.value}); 

     // Instead we will dispatch an action and send the empNumber to the reducer 
     this.props.dispatch({ 
       type: 'UPDATE_EMP_NUMBER', 
       payload: e.target.value 
      }); 
    } 

    render() { 
    return (
     <div className="row"> 
     <form> 
      <div className="form-group"> 
      <label htmlFor="Empnumber">Emp Number</label> 
      <input type="text" className="form-control" id="Empnumber" placeholder="Emp Number" value={this.props.Empnumber} onChange={this.updateEmpNumber.bind(this)}/> 
      </div> 
     </form> 
     </div> 
    ); 
    } 
} 

function mapStateToProps(state){ 
    return { 
     Empnumber: state.Empnumber 
    } 
} 

export default connect(mapStateToProps)(EmpSearch); 

その後、あなたのEmpDetailクラスがちょうどストアに接続する（または小道具としてデータを渡すことが、簡単にそれを接続するために）必要があります。

EmpDetail

class EmpDetail extends React.Component { 
    render() { 
     const empNumber = this.props.Empnumber; 
     return (
      <div className="container"> 
       Empnumber = {empNumber} 
      </div> 
     ); 
    } 
} 

function mapStateToProps(state){ 
    return { 
     Empnumber: state.Empnumber 
    } 
} 

export default connect(mapStateToProps)(EmpDetail); 

私は本当にこれは、役立ちます、それはあなたが、これが終わるために起こっている場所を見ることができないとき、これを説明するのは難しいですね！