Redux-Provider與connect

Redux使用的基本思路

1)定義actions.js,其中包括actions type(字符串常量)、actions creators(返回一個json的函數,返回的這個json就是actions)2)定義reducers.js,包含多個reducer(就是一個函數):(state, action)=>{……return newState};最後通過
combineReducers()將多個reducer整合到一起 3)createStore(Reducers) 4)在入口文件中render( , rootElement); 5)React最外層組件中,在事件的回調函數中dispatch(actions creators(data));通過export default connect(select)(App) 綁定Redux與React

Redux執行的基本思路

1)用戶進行點擊(click)、輸入(input)等事件,子組件通過callback調用最外層組件的自定義事件 2)最外層組件自定義事件的callback被觸發,callback中執行dispatch(actions creators(data)) 3)store監聽到action被觸發,執行相應的reducer,
state被改變 4)頁面render

這個過程的一些問題

1)入口文件中,store被傳入Provider,但是子組件中並沒有直接使用store,但是卻具有dispatch方法(dispatch是store對象上的一個方法),Provider做了什麼? 2)最外層組件中,export default connect(select)(App)是怎樣聯繫Redux和React的?
3)dispatch(actions creators(data))是事件的發佈者,但是store是什麼時候被監聽的? 4)reducer中並沒有調用React的this.setState方法,頁面到底是如何被render的? 5)既然Redux可以render頁面,我們還要不要手動在callback中寫this.setState?

解答

Provider乾的事:接收store,並將store傳到子組件中,當store發生變化時,更新store;所以子組件具有store的dispatch方法。問題1)解決。
connect乾的事:定義了一個新的組件Connect,經過一系列的merge後,將各種值掛載props上傳遞到原組件。 Connect組件會保存state狀態,同時監聽Redux Store的變化,從而觸發原組件的更新。在componentDidMount中監聽Provider提供的store的變化。通過Context來訪問store。響應函數爲handleChange,handleChange裏接收到通知後,將Connect組件的state改變爲新的state,這裏會有調用this.setState的操作。問題2)3)4)初步解決。
最後一個問題,官方說法是,既然用了Redux就應該用Redux控制所有狀態,不手動render頁面;也有人說不應該拘泥於API,在合適的時候可以調用this.setState方法,也確實有些例子是這麼做的(https://github.com/emmenko/redux-react-router-async-example/blob/master/lib/components/pages/Login.js);StackOverflow的一個回答(http://stackoverflow.com/questions/34711477/should-you-ever-use-this-setstate-when-using-redux)這麼說:需要保存在全局sore中的state需要使用Redux,但是一些展示性的state(比如一個用來表示下拉框是否顯示的Boolean值)可以使用this.setState來render頁面。問題5)有待繼續探索。

發佈了82 篇原創文章 · 獲贊 82 · 訪問量 44萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章