redux如何關聯react？

在react中可以react-redux函式庫來關聯redux；react-redux提供了一些封裝，可以以更科學的程式碼組織方式，讓我們更舒服地在React的程式碼中使用Redux。

本教學操作環境：windows7系統、React17版，此方法適用於所有品牌電腦。

Redux本身和React並沒有之間的關聯，它是一個通用Javscript App模組，用做App State的管理。要在React的專案中使用Redux，比較好的方式是藉助react-redux這個函式庫來做連接，這裡的意思是，並不是沒有react-redux，這兩個函式庫就不弄一起用了，而是說react-redux提供了一些封裝，一種更科學的程式碼組織方式，讓我們更舒服地在React的程式碼中使用Redux。

redux和react是怎麼配合的？

react-redux提供connect和provider兩個基友，他們connect將元件和redux關聯起來，provider將store傳遞給元件，元件透過dispatch發出action, store根據action的type屬性呼叫對應的reducer並傳入state和這個action，reducer對state進行處理回傳一個新的state放入store, connect監聽到store的變化，呼叫setState更新元件，此時元件的props也跟著變化。

Provider:

   provider是一個元件，它接受store當props，然後透過context往下傳，這個react中任何元件都可以透過context取得store;

connect: 

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

mapStateToProps(state.[ownPros]):

mapStateToProps接受兩個參數，store的state和自訂的props，並傳回一個新的對象，這個物件會作為props的一部分傳入UI元件。我們可以根據元件所需的資料自訂傳回一個對象，ownProps的變化也會觸發mapStateToProps

mapDispatchToProps(dispatch,[ownProps]):

mapDispatchToProps如果是對象，那麼會和store綁定作為props的一部分傳入UI元件。如果這個函數接受兩個參數，bindActionCreators會將action和dispatch綁定並傳回一個對象，這個物件會和ownProps一起作為props的一部分傳入UI元件，所以不論mapDispatchToProps是物件還是函數，它最終都會傳回一個對象，如果是函數，這個物件的key值是可以自訂的。

更多程式相關知識，請造訪：程式設計教學！ ！

以上是redux如何關聯react？的詳細內容。更多資訊請關注PHP中文網其他相關文章！