今天看前輩寫的代碼,看到mapStateToProps&&mapDispatchToProps處狭魂,不明白澄成,于是又是各種找資料,在CSDN博客中發(fā)現(xiàn)一篇好文肌厨,摘抄到此,方便自己閱讀豁陆!
原文如下:http://blog.csdn.net/genius_yym/article/details/64130120
在react-redux開發(fā)中每個(gè)模塊有自己的state用來統(tǒng)一管理視圖數(shù)據(jù)
(1)將需要的state的節(jié)點(diǎn)注入到與此視圖數(shù)據(jù)相關(guān)的組件上
? ??????使用 React Redux 庫的 connect() 方法來生成容器組件前柑爸,需要先定義 mapStateToProps 這個(gè)函數(shù)來指定如何把當(dāng)前 Redux store state 映射到展示組件的 props 中。
(2)將需要綁定的響應(yīng)事件注入到組件上
? ??????除了讀取 state盒音,容器組件還能分發(fā) action表鳍。類似的方式,可以定義mapDispatchToProps() 方法接收 dispatch() 方法并返回期望注入到展示組件的 props 中的回調(diào)方法里逆。它可以是一個(gè)函數(shù)进胯,也可以是一個(gè)對象用爪。如果mapDispatchToProps是一個(gè)函數(shù)原押,會得到dispatch和ownProps(容器組件的props對象)兩個(gè)參數(shù)。
(3)統(tǒng)籌mapStateToProps和mapDispatchToProps
最后偎血,說一下react-redux開發(fā)的基本結(jié)構(gòu)诸衔。
開發(fā)環(huán)境調(diào)用后臺路徑配置:`proxy.config.js`文件下可以自由定義接口調(diào)用到的后臺地址,業(yè)務(wù)模塊不要出現(xiàn)應(yīng)用路徑(BackGround)颇玷;各個(gè)模塊目錄下:- api.js定義與后臺交互的接口方法- action.js定義頁面操作觸發(fā)的動作(eg. 點(diǎn)擊查詢按鈕)- reducer.js定義觸發(fā)動作后的影響(eg. 查詢完成后將查詢結(jié)果set回state笨农,視圖自動刷新)
補(bǔ)充:自己項(xiàng)目實(shí)例(aec-app):