dva

DVA 简介

    dva是基于现有应用架构（redux+react-router+redux-saga等）的一层轻量封装，没有引入任何新的概念。

一 整个程序的入口文件是根目录下的index.js 文件

import dva from 'dva';import { browserHistory } from 'dva/router';import './index.css';// 1. Initializeconst app = dva({  history: browserHistory,});// 2. Plugins// app.use({});// 3. Modelapp.model(require('./models/example'));// 4. Routerapp.router(require('./router'));// 5. Startapp.start('#root');

dva-cli生成的文件给我们写的注释已经写的很清楚了

先初始化，在加载插件，在加载Model,在加载路由，最后启动程序

MVVC

（1）app.model(obj)

• namespace : model 的命名空间
• state: 初始state
• reducers: 同步的修改状态的操作，由actions触发(state,action) => state
• effects:异步的操作，并不直接修改state，由action触发，也可以调用actions。(action,{put,call,select})
• subscriptions:异步的只读操作，并不直接修改state，可以调用actions。({ dispatch, history })
  

put(action)和dispatch(action)
这里effects中的put(action)等同于subscriptions中的dispatch(action)，它们的作用都是分发一个action。

yield put({ type: actionType, payload: attachedData, error: errorIfHave});dispatch({ type: actionType, payload: attachedData, error: errorIfHave});

call(asyncFunction)
调用一个异步函数

const result = yield call(api.fetch, { page: 1 });

select(function)
从全局状态中选择数据

const count = yield select(state => state.count);

（2）app.router(({ history }) => routes)

import { Router, Route } from 'dva/routes';app.router(({ history } => ({  <Router history={ history }>    <Route path="/" component={App} />  </Router>});