1.why Dva
dva 是基于现有应用架构 (redux + react-router + redux-saga 等)的一层轻量封装，没有引入任何新概念，全部代码不到 100 行。dva 实现上尽量不创建新语法，而是用依赖库本身的语法，比如 router 的定义还是用 react-router 的 JSX 语法的方式(dynamic config 是性能的考虑层面，之后会支持)。 他最核心的是提供了 app.model 方法，用于把 reducer, initialState, action, saga 封装到一起
app.model({ namespace: 'products', state: {//State 表示 Model 的状态数据 list: [], loading: false, }, subscriptions: [ function(dispatch) { dispatch({type: 'products/query'});//触发 action 的函数，action 是改变 State 的唯一途径 }, ], effects: {//Effect 被称为副作用，在我们的应用中，最常见的就是异步操作 ['products/query']: function*() { yield call(delay(800)); yield put({ type: 'products/query/success', payload: ['ant-tool', 'roof'], }); }, },//在dva中reducers聚合积累的结果是当前model的state 对象。通过actions中传入的值，//与当前 reducers 中的值进行运算获得新的值（也就是新的 state） reducers: { ['products/query'](state) { return { ...state, loading: true, }; }, ['products/query/success'](state, { payload }) { return { ...state, loading: false, list: payload }; }, },}); 2.简单明了的Dva数据流向
数据的改变发生通常是通过用户交互行为或者浏览器行为（如路由跳转等）触发的，当此类行为会改变数据的时候可以通过 dispatch 发起一个 action，如果是同步行为会直接通过 Reducers 改变 State ，如果是异步行为（副作用）会先触发 Effects 然后流向 Reducers 最终改变 State
3.Dva Router控制
dva 实例提供了 router 方法来控制路由，使用的是react-router
const app = dva();import { Router, Route } from 'dva/router';app.router(({history}) => ); 4.dva 应用的最简结构（带 model)
dva 提供多个 effect 函数内部的处理函数，比较常用的是 call 和 put。 call：执行异步函数 put：发出一个 Action，类似于 dispatch
课堂实战
// 创建应用const app = dva();// 注册 Modelapp.model({ namespace: 'count', state: 0, reducers: { add(state) { return state + 1 }, }, effects: { *addAfter1Second(action, { call, put }) { yield call(delay, 1000);//异步操作 yield put({ type: 'add' });//类似于dispatch发action }, },});// 注册视图app.router(() => 
5.AntDesignPro1.0项目中的Dva
1.index.js
const app = dva({ history: createHistory(),//history可以用来跳转路由内含location属性，这里修改history默认接口，其他接口不变----初始化});// 2. Pluginsapp.use(createLoading());//加载插件这里应该加载的是加载动画插件// 3. Register global modelapp.model(require('./models/global').default);//将src/modles里面的东西灌进去，通过namespace取// 4. Routerapp.router(require('./router').default);//全局挂载路由信息// 5. Startapp.start('#root');export default app._store; 2.router.js
export const getRouterData = app => { const routerConfig = { '/': { component: dynamicWrapper(app, ['user', 'login'], () => import('../layouts/BasicLayout')), }, '/person/personbasetwo': {//添加路径指向引入的组件，这条数据会被getRoutes函数渲染成真正的 包裹的路由 component: dynamicWrapper(app, ['personbaseTwo'], () => import('../routes/Person/PersonBaseTwo')), }, '/person/baseInfo/:id': {//dynamicWrapper函数会吧[]里面数据放到app的model属性里，app是dva的实例 component: dynamicWrapper(app, ['personbase'], () => import('../routes/Person/PersonBase/BaseInfo')), }, ······· 3.connect连接model
/*dva的实例app中应该导入了所有的model，好像是在router中导入的，这里用解构赋值从model中取值，为组件导入props，loading为dva提供的动画插件*/@connect(({ personbaseTwo, loading }) => ({ personbaseTwo, searchLoading: loading.effects['personbaseTwo/getList'],//loding被这个异步函数影响，异步操作中就为ture，结束就为false loading: loading.effects['personbaseTwo/listpage'],}))//从model中取数据生成自己想要的对象结构通过@修饰器放到下面组件中去class personbaseTwo extends Component { constructor(props){ super(props); this.state = { } } componentWillMount(){//组件将要渲染时拿到默认的一页多少条和当前页这些数据 const { personbaseTwo:{pagination} }= this.props; const { page,pageSize } = pagination; this.props.dispatch({//转到namespace为personbaseTwo下面的listpage方法拿到页码为page的数据 type:'personbaseTwo/listpage',//接口根据page只去此页数据 payload:{ page, pageSize, }, }); }······· 4.跳转路由
onOk() {//点击确定执行的函数 const {id}= record; than.props.dispatch(routerRedux.push({//用来跳转路由的 pathname: `/person/baseInfoTwo/${id}`,//用这个pathname重新渲染路由页面并传ID })) },