dva 筆記

最簡單的結構

// 建立應用
const app = dva();

// 註冊 Model
app.model({ namespace: 'count', state: 0, reducers: { add(state) { return state + 1 }, }, effects: { *addAfter1Second(action, { call, put }) { yield call(delay, 1000); yield put({ type: 'add' }); }, }, }); // 註冊視圖 app.router(() => <ConnectedApp />); // 啓動應用 app.start('#root');

數據流圖

 

[https://dvajs.com/guide/introduce-class.html#數據流圖-1]

Model 對象的屬性

1. namespace: 當前 Model 的名稱。整個應用的 State，由多個小的 Model 的 State 以 namespace 爲 key 合成
2. state: 該 Model 當前的狀態。數據保存在這裏，直接決定了視圖層的輸出
3. reducers: Action 處理器，處理同步動做，用來算出最新的 State
4. effects：Action 處理器，處理異步動做。基於 Redux-saga 實現。Effect 指的是反作用。根據函數式編程，計算之外的操做都屬於 Effect，典型的就是 I/O 操做、數據庫讀寫。 Effect 是一個 Generator 函數，內部使用 yield 關鍵字，標識每一步的操做（不論是異步或同步）。

call 和 put

Dva 提供多個 effect 函數內部的處理函數，比較經常使用的是 call 和 put。

• call：執行異步函數
• put：發出一個 Action，相似於 dispatch