在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中文網其他相關文章!