React+Redux容器實戰,原來redux是這樣用的!


如今我寫一個簡單登陸的功能作爲教程,幫助更好地理解上面的流程圖!

起點在React腳手架建立的index.js中開始(只展現部分重要代碼,代碼僅供思路參考,請勿copy)react



再看看App.js,這裏的App組件就是流程圖裏的component模塊this



好了,再來編寫action.jsspa



那麼如今會想store怎麼連通action的呢? 如今再去編寫reducer.jscomponent



如今再將reducer添加到store樹中運行起來,開始編寫store.jscdn



如今整個簡單的登陸功能就完成了,來梳理一下整個React運行的流程:

用戶進入這個react登陸頁面,未點擊登陸按鈕時,控制檯打印出的this.props.isLogin的值爲store裏初始化的默認值也就是undefined。blog

當點擊登陸按鈕之後觸發this.props.login事件,事件被傳到store樹後返回到mapStateToProps裏再去觸發action請求,而後把服務端返回數據dispatch到reducer中。教程

因爲登陸功能的reducer被combineReducers組合在一塊兒了,這時store樹的reducer啓動登陸reducer去更新store樹裏的initState裏的數據,而後store樹的數據再被傳回到mapStateToProps裏,這時this.props.isLogin的值也就改變成服務端返回的數據了。事件

若有錯誤,歡迎指點。it

相關文章
相關標籤/搜索