通过 npm 安装 dva-cli 并确保版本是 0.9.1 或以上。
安装完 dva-cli 之后，就可以在命令行里访问到 dva 命令（ 不能访问？ ）。现在，你可以通过 dva new 创建新应用。
这会创建 dva-quickstart 目录，包含项目初始化目录和文件，并提供开发服务器、构建脚本、数据 mock 服务、代理服务器等功能。
然后我们 cd 进入 dva-quickstart 目录，并启动开发服务器：
几秒钟后，你会看到以下输出：
在浏览器里打开 http://localhost:8000 ，你会看到 dva 的欢迎界面。
通过 npm 安装 antd 和 babel-plugin-import 。 babel-plugin-import 是用来按需加载 antd 的脚本和样式的，详见 repo 。
编辑 .webpackrc ，使 babel-plugin-import 插件生效。
[图片上传中...(-e0b96d-1532076307190-0)]
我们要写个应用来先显示产品列表。首先第一步是创建路由，路由可以想象成是组成应用的不同页面。
新建 route component routes/Products.js ，内容如下：
添加路由信息到路由表，编辑 router.js :
然后在浏览器里打开 http://localhost:8000/#/products ，你应该能看到前面定义的 <h2> 标签。
随着应用的发展，你会需要在多个页面分享 UI 元素 (或在一个页面使用多次)，在 dva 里你可以把这部分抽成 component 。
dva 通过 model 的概念把一个领域的模型管理起来，包含同步更新 state 的 reducers，处理异步逻辑的 effects，订阅数据源的 subscriptions 。
新建 model models/products.js ：
这个 model 里：
然后别忘记在 index.js 里载入他：
到这里，我们已经单独完成了 model 和 component，那么他们如何串联起来呢?
dva 提供了 connect 方法。如果你熟悉 redux，这个 connect 就是 react-redux 的 connect 。
编辑 routes/Products.js ，替换为以下内容：
最后，我们还需要一些初始数据让这个应用 run 起来。编辑 index.js ：
优点：简化redux操作流程，集成redux-saga中间件
在effects中
函数接受两个参数（接收到的数据，{此参数可以解构出call，put等方法}）
然后使用reducers异步修改state中的数据
reducers中的函数的第二个参数就是put传过来的对象，可以解构出payload
return 返回的状态会合并到state中
回到页面组件补充connect()()第一个圆括号中的参数
[图片上传失败...(image-57ff75-1611135362899)]
课堂实战
1.index.js
2.router.js
3.connect连接model
4.跳转路由
发dispatch的时候带一个callback
当判断code成功的时候 执行回调
dispatch函数执行后返回是一个Promise
effects里面调用的函数可以返回值
返回值相当于这个Promise里resolve(这个值)。可以被.then的第一个回调参数拿到
