dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。
下面的2篇文章：
支付宝前端应用架构的发展和选择：可以知道dva的由来。
redux 最佳实践： 总结目前 react + redux 的最佳实践，解释原因，并提供了可选方案。
构建项目
安装 dva脚手架（dva-cli）
npm install dva-cli -g
然后创建一个应用
dva new dva-quickstart
然后就可以直接开发项目了，就按照文档dva快速上手这一章做就好了，已经很详细简单了。
关于使用dva
dva 中最重要的概念——model 。通过 model 的概念把一个领域的模型管理起来，包含同步更新 state 的 reducers，处理异步逻辑的 effects，订阅数据源的 subscriptions 。
总之把 reducer, initialState, action, saga 封装到一起，写在一个 js 文件里面，不用文件之间来回切换，大大提升了编码体验。
export default {
namespace: 'chestnut', //model 的命名空间，同时也是他在全局 state 上的属性，只能用字符串，不支持通过 . 的方式创建多层命名空间。
state: {}, //初始值，优先级低于传给 dva() 的 opts.initialState。
reducers: {}, //对应redux
effects: {}, //对应saga，并简化了使用
subscriptions:{}, //增加了一个 Subscriptions, 用于收集其他来源的 action, eg: 键盘操作
}
我们可以在model 中触发下面的代码获取到在dva文档中没有提及到的effect：
*chestnut({ payload }, { ...effects }) {
console.log( effects )
},
很眼熟？没错，就是redux-saga的API
dva 没有引入任何新概念，全部代码不到 100 行。实现上尽量不创建新语法，而是用依赖库本身的语法。所以如果有掌握redux（我梳理的redux），redux-saga（ 我梳理的redux-saga）的话，使用dva是非常简单和容易上手的事情。
你看dva官网文档可能忽略的点
-
有关于
dva源码中的一小小部分
从dva源码中，可以发现。默认情况下effects发起的都是takeEvery。如果想要发起的类型为takeLatest，换另一种格式。
//另一种格式
saga:[function*({ payload }, { put, select }) {
//....逻辑
},
{ type: 'takeLatest' }
],
- 从state 里获取数据
// select 的参数为空，会取得完整的 state
const chestnut= yield select();
// 获取对应 model 的 namespace 为 chestnut 的全部 state
const chestnut= yield select(state => state.chestnut);
使用dva中可能会遇到的问题：
-
在最开始安装 dva-cli （执行npm install dva-cli -g）时候出现这个报错：npm ERR! Unexpected end of JSON input while parsing near '...tarball":"https://reg'。
执行npm cache clean --force清理下npm的缓存即可。 -
dva默认用的是roadhog（是基于 webpack 的封装工具，目的是简化 webpack 的配置），可能会遇到引入第三方库之后编译打包失败，会报错Failed to minify the bundle. Error: 2.async.js from UglifyJs。我在引入react-spring的时候，出现过这个问题
最后，建议把dva文档所有内容看一遍，内容不多，讲的很细，也很简单。
网友评论