一、dva 框架介绍
dva 是阿里前端架构师 sorrycc 带 team 研发的一套轻量级前端框架，其目的是尽量避免前端重复性劳动，简化开发流程。
实际上也确实如此，一个简单的 CRUD 模块只需要1-2个小时即可完成前端作业。
前面说到 dva 是一个框架，那么 dva 脚手架就是这个框架的具体表现。
我们习惯于称：创建一个 dva 脚手架，实际上就是创建一个项目目录。
3、安装 dva-cli 用于初始化项目：
npm install -g dva-cli
# 或
yarn global add dva-climkdir your-project 创建项目目录
cd your-project 并进入该目录dva init 初始化项目4、目录结构
二、项目结构分析
基础概念
1、Model
Model 是 dva 最重要的部分，可以理解为 redux、react-redux、redux-saga 的封装。
通常项目中一个模块对应一个 model，一个基本的 model 如下：
namespace 是该 model 的命名空间，同时也是全局 state 上的一个属性，只能是字符串，不支持使用 . 创建多层命名空间。
state 是状态的初始值。
reducer 类似于 redux 中的 reducer，它是一个纯函数，用于处理同步操作，是唯一可以修改 state 的地方，由 action 触发，它有 state 和 action 两个参数。
effects 用于处理异步操作，不能直接修改 state，由 action 触发，也可触发 action。它只能是 generator 函数，并且有 action 和 effects 两个参数。第二个参数 effects 包含 put、call 和 select 三个 字 段，put 用于触发 action，call 用于调用异步处理逻辑，select 用于从 state 中获取数据。
subscriptions 用于订阅某些数据源，并根据情况 dispatch 某些 action，格式为 ({ dispatch, history }, done) => unlistenFunction。
如上的一个 model，监听路由变化，当进入 /user 页面时，执行 effects 中的 fetch，以从服务端获取用户列表，然后 fetch 中触发 reducers 中的 save 将从服务端获取到的数据保存到 state 中。
注意，在 model 中触发这个 model 中的 action 时不需要写命名空间，比如在 fetch 中触发 save 时是 { type: ‘save‘ }。而在组件中触发 action 时就需要带上命名空间了，比如在某个组件中触发 fetch 时应该是 { type: ‘user/fetch‘ }。
connect 方法，其实它就是 react-redux 的 connect。用法如下：
connect 后的组件除了可以获取到 dispatch 和 state，还可以获取到 location 和 history。
原文：https://www.cnblogs.com/meng95/p/9483048.html