redux關(guān)聯(lián)react的方法

這篇文章主要介紹redux關(guān)聯(lián)react的方法，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

在react中可以react-redux庫來關(guān)聯(lián)redux；react-redux提供了一些封裝，可以以一種更科學(xué)的代碼組織方式，讓我們更舒服地在React的代碼中使用Redux。

• 該方法適用于所有品牌的電腦。
  

Redux本身和React并沒有之間的關(guān)聯(lián)，它是一個通用Javscript App模塊，用做App State的管理。要在React的項(xiàng)目中使用Redux，比較好的方式是借助react-redux這個庫來做連接，這里的意思是，并不是沒有react-redux，這兩個庫就不弄一起用了，而是說react-redux提供了一些封裝，一種更科學(xué)的代碼組織方式，讓我們更舒服地在React的代碼中使用Redux。

redux和react是怎么配合的？

react-redux提供connect和provider兩個基友，他們connect將組件和redux關(guān)聯(lián)起來，provider將store傳遞給組件，組件通過dispatch發(fā)出action, store根據(jù)action的type屬性調(diào)用對應(yīng)的reducer并傳入state和這個action，reducer對state進(jìn)行處理返回一個新的state放入store, connect監(jiān)聽到store的變化，調(diào)用setState更新組件，此時組件的props也就跟著發(fā)生變化。

Provider:

provider是一個組件，它接受store作為props，然后通過context往下傳，這個react中任何組件都可以通過context獲取store;

connect:

connect(mapStateToProps, mapDispatchToProps, mergeProps, options)是一個函數(shù)，它接受四個參數(shù)并且返回一個函數(shù)—wrapWithConnect，wrapWithConnect它接受一個組件作為參數(shù)wrapWithConnect（component）， 它內(nèi)部定義一個新的組件connect（容器組件）并將傳入的組件作為connect的子組件然后return出去。

mapStateToProps(state.[ownPros]):

mapStateToProps接受兩個參數(shù)，store的state和自定義的props，并返回一個新的對象，這個對象會作為props的一部分傳入UI組件。我們可以根據(jù)組件所需要的數(shù)據(jù)自定義返回一個對象，ownProps的變化也會觸發(fā)mapStateToProps

mapDispatchToProps(dispatch,[ownProps]):

mapDispatchToProps如果是對象，那么會和store綁定作為props的一部分傳入UI組件。如果這個函數(shù)接受兩個參數(shù)，bindActionCreators會將action和dispatch綁定并返回一個對象，這個對象會和ownProps一起作為props的一部分傳入UI組件，所以不論mapDispatchToProps是對象還是函數(shù)，它最終都會返回一個對象，如果是函數(shù)，這個對象的key值是可以自定義的。

以上是“redux關(guān)聯(lián)react的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！