這篇文章主要為大家展示了“react-redux怎么實現(xiàn)react組件之間數(shù)據(jù)共享的方法”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學習一下“react-redux怎么實現(xiàn)react組件之間數(shù)據(jù)共享的方法”這篇文章吧。
利用react-redux實現(xiàn)react組件數(shù)據(jù)之間數(shù)據(jù)共享
1.安裝react-redux
$ npm i --save react-redux
2.從react-redux導入Prodiver組件將store賦予Provider的store屬性,
將根組件用Provider包裹起來。
重慶分公司
重慶分公司
import {Provider,connect} from 'react-redux'
ReactDOM.render(
這樣根組件中所有的子組件都可以獲得store中的值
3.connect二次封裝根組件
export default connect(mapStateToProps,mapDispatchToProps)(Wrap)
connect接收兩個函數(shù)作為參數(shù)，一個mapStateToProps定義哪些store屬性會被映射到根組件上的屬性（把store傳入react組件），一個mapDispatchToProps定義哪些行為action可以作為根組件屬性（把數(shù)據(jù)從react組件傳入store）
3.定義這兩個映射函數(shù)
function mapStateToProps(state){
return {
name:state.name,
pass:state.pass
}
}
function mapDispatchToProps(dispatch){
return {actions:bindActionCreators(actions,dispatch)
}
}把store中的name,pass映射到根組件的name,pass屬性。
actions是一個包含了action構(gòu)建函數(shù)的對象，用bindActionCreators把對象actions綁定到根組件actions屬性上。
4.在根組件引用子組件的位置用
5.在子組件中調(diào)用actions中的方法來更新store中的數(shù)據(jù)
先將actions作為屬性傳入子組件
子組件調(diào)用actions中的方法創(chuàng)建action
//Input組件
export default class Input extends React.Component{
sure(){
this.props.actions.add({name:this.refs.name.value,pass:this.refs.pass.value})
}
render(){
return (
姓名:登錄
)
}
}因為我們采用了bindActionCreators函數(shù)，創(chuàng)建action后會立即自動調(diào)用store.dispatch(action)將數(shù)據(jù)更新到store.
這樣我們就利用react-redux模塊完成了react各個組件之間數(shù)據(jù)共享。
以上是“react-redux怎么實現(xiàn)react組件之間數(shù)據(jù)共享的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
