Dva 是 一個 ！自動化！搭建 react ！開發工具！的框架
主要是對 redux react-dux 和 redux-saga 的 整合優化。
Dva 又是 建立在 Roadhog 工具之上。
Roadhog 是 atool-build 和 dora 的整合。（也被稱爲 可配置的 create-react-app）
- atool-build 是對webpack.js 二次封裝( 內置了常用的 babel---（js轉換，css轉換，file,包括 生產環境的 css分離，js壓縮，公共文件提取。統統囊括。） )
- dora 是對 類似web-dev-server(nodejs) 服務相關封裝（通過中間件的方式引入）
Dva 初始化 在一個空的文件夾裏 dva init 就會自動 生成 基礎的開發環境 （具體可以查看 dva的開發文檔， 基礎命令可以通過 dva -h 來查看）
Dva 主要配置集中在 .src/models/xxx.js 這裏集中配置了 redux 相關 和 fetch 相關的 邏輯
- 比如說redux 配置部分(以計數器爲例)。
- namespace : 'count' // 這個可以理解爲 action 和 reducer 裏 共同使用的 type命名
- State: {count : 0} // 這個就是 ruducer 裏的初始 state
// 傳入 初始狀態 。。 得到 新的狀態
//dva 中省略了 switch(){ case:… } 的寫法
|
add (state) { return {count:state.count +1} }, minus (state) { return {count:state.count -1} } },
其中 形參 state 對應 state ={count:0} 返回 新的狀態值
|
//Reduce
|
|
Store.dispatch( {type : 'add'} }
|
在頁面中 使用 connect ( mapStateToProps)( Indexpgage ) ； 來獲取 新的狀態值。
（state）=> { return { propsCount（新值） : state.[命名空間].count } } //state 其實就是 組件的最新的 props
mapStateToProps ： 顧名思義 就是 映射 state 狀態 到 組件的 props裏。（而且是全局的props） 所以 讀取映射的新狀態用 state.count….. ，映射關係用鍵值對
|
Dva 自定義 配置
- 既然是基於 roadhog 工具。所以 配置 方法 參考 roadhog 文檔就可以了
- 注意一點： roadhog 是基於 af-webpack ， 配置文件 有兩種格式 （roadhog2.0 之前用的是 .roadhogrc ,）
- 第一種 創建 .webpackrc 在項目根目錄（dva 自動生成）。裏邊的語法 是JOSN 格式。 修改後，最好重啓服務生效。
- 第二種 創建 .webpackrc.js 在項目根目錄， 但語法要用 export 方式。
Dva 2.0
依賴-- roadhog2.0
默認 開啓 熱更新 （hmr ) -- 依賴 babel-plugin-dva-hmr
默認 頁面展示錯誤 -- 依賴 redbox-react
默認 自動格式化代碼 -- 依賴 husky
新增
1.Dispatch (action) => promise
2.新增 dva/dynamic 接口，配合 react-router@4 處理組件的按需加載
3.take自動補全 namespace 前綴
4. 路由基於react-router4.0
更多詳情請訪問 https://github.com/sorrycc/blog/issues/48