dva 基础教程-- 简介

Dva 是 一个 ！自动化！搭建  react ！开发工具

主要是对 redux  react-dux 和 redux-saga 的 整合优化。

 

Dva 集成了 命令行的 Roadhog  工具  roadhog 是一个 cli 工具，提供 server、 build 和 test 三个命令

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  简化了  redux  和 redux-saga 引入的方法。

 

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