DvaJS的數據流向和Model、connect使用

dva = React-Router + Redux + Redux-saga
Dva的數據流向:改變發生通常是通過用戶交互行爲或者瀏覽器行爲(如路由跳轉等)觸發的,當此類行爲會改變數據的時候可以通過 dispatch 發起一個 action,如果是同步行爲會直接通過 Reducers 改變 State ,如果是異步行爲(副作用)會先觸發 Effects 然後流向 Reducers 最終改變 State。
Model對象的屬性
1.namespace: 當前 Model 的名稱。整個應用的 State,由多個小的 Model 的 State 以 namespace 爲 key 合成
2.state: 該 Model 當前的狀態。數據保存在這裏,直接決定了視圖層的輸出
3.reducers: Action 處理器,處理同步動作,用來算出最新的 State,在 dva 中,reducers 聚合積累的結果是當前 model 的 state 對象。通過 actions 中傳入的值,與當前 reducers 中的值進行運算獲得新的值(也就是新的 state)。
4.effects:Action 處理器,處理異步動作,Effect常被稱爲副作用,最常見的就是異步操作,Effect 是一個 Generator 函數,內部使用 yield 關鍵字,標識每一步的操作(不管是異步或同步)
5.Subscription:Subscription 語義是訂閱,用於訂閱一個數據源,然後根據條件 dispatch 需要的 action。數據源可以是當前的時間、服務器的 websocket 連接、keyboard 輸入、geolocation 變化、history 路由變化等等。
connect的使用:connect 是一個函數,綁定 State 到 View,connect 方法傳入的第一個參數是 mapStateToProps 函數,mapStateToProps 函數會返回一個對象,用於建立 State 到 Props 的映射關係
dispatch 方法被connect 的 Component 會自動在 props 中擁有 dispatch 方法。可以通過以下方法來調用model中的effects

dispatch({ type: 'namespace/getList', payload })
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章