dva 基础教程-- 简介

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} 返回 新的状态值 reducers: {

//Reduce function counter(state = { count: 0 }, action) {    const count = state.count     switch (action.type) {          case 'add':             return { count: count + 1 }          default:             return state      } }

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 ,）
  1. 第一种  创建  .webpackrc 在项目根目录（dva 自动生成）。里边的语法 是JOSN 格式。 修改后，最好重启服务生效。
  2. 第二种 创建  .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