通過獨立組件之間的數據反應和redux

Question

我是非常新的反應和redux.I試圖將數據從一個組件傳遞到另一個。但它沒有親子關係，並且彼此獨立。任何人都可以幫助我做到這一點？以下是我的代碼。

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); 

另一個文件是我要發送的EmpNumber低於，

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); 

我真的希望這會有所幫助，它是如此難以解釋這個，當你看不到的地方，這是要結束了！