dva的简介

（1）dva 是基于现有应用架构 (redux + react-router + redux-saga 等)的一层轻量封装，没有引入任何新概念，所有代码不到 100 行。

（2）dva 是 framework，不是 library，很明确地告诉你每一个部件应该怎么写。除了 react 和 react-dom 是 peerDependencies 之外，dva 封装了全部其余依赖。
（3）dva 实现上尽可能不建立新语法，而是用依赖库自己的语法，好比 router 的定义仍是用 react-router 的 JSX 语法。
（4）dva最核心的是提供了 app.model 方法，用于把 reducer, initialState, action, saga 封装到一块儿，好比：
                app.model({
                           namespace: 'products',
                           state: {
                           list: [],
                           loading: false,
                         },
                         subscriptions: [
                           function(dispatch) {
                             dispatch({type: 'products/query'});
                           },
                         ],
                         effects: {
                           ['products/query']: function*() {
                             yield call(delay(800));
                             yield put({
                               type: 'products/query/success',
                               payload: ['ant-tool', 'roof'],
                             });
                           },
                         },
                         reducers: {
                           ['products/query'](state) {
                             return { ...state, loading: true, };
                           },
                           ['products/query/success'](state, { payload }) {
                             return { ...state, loading: false, list: payload };
                           },
                         },
                       });
（5）介绍下这些 model 的 key 
         namespace： reducer 在 combine 到 rootReducer 时的 key 值
         state：reducer 的 initialState
         subscription：是一种从源获取数据的方法，它来自于 elm
         effects： saga，并简化了使用
         reducers：纯函数
（6）来源：https://github.com/dvajs/dva/issues/1

附一：axios 简介（不完整）
（1）从浏览器中建立 XMLHttpRequest
（2）支持 Promise API
（3）拦截请求和响应
（4）自动转换JSON数据

附二：Fetch
（1）Fetch 是一个现代的概念, 等同于 XMLHttpRequest。它提供了许多与XMLHttpRequest相同的功能，但被设计成更具可扩展性和高效性。
（2）Fetch 的核心在于对 HTTP 接口的抽象，包括 Request，Response，Headers，Body，以及用于初始化异步请求的 global fetch。
（3）得益于 JavaScript 实现的这些抽象好的 HTTP 模块，其余接口可以很方便的使用这些功能。
（4）Fetch 还利用到了请求的异步特性——它是基于 Promise 的。
         来源：https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API

附三：redux-saga
（1）在 reducers 中的全部操做都是同步的而且是纯粹的，即 reducer 都是纯函数。
         纯函数是指一个函数的返回结果只依赖于它的参数，而且在执行过程当中不会对外部产生反作用。
（2）在实际的应用开发中，会有一些异步的（如Ajax请求）且不纯粹的操做（如改变外部的状态），这些在函数式编程范式中被称为“反作用”。
（3）Redux 的做者将这些反作用的处理经过提供中间件的方式让开发者自行选择进行实现。
（4）和redux-thunk同样，redux-saga 就是用来处理上述反作用（异步任务）时，redux的一个中间件。r
（5）edux-saga 提供了一些辅助函数，发起特定的 action 到 Store 时，派生任务。

附四：effect
（1）Effect 被称为反作用，在咱们的应用中，最多见的就是异步操做。
（2）它来自于函数编程的概念，之因此叫反作用是由于它使得咱们的函数变得不纯，一样的输入不必定得到一样的输出。
（3）dva 为了控制反作用的操做，底层引入了redux-sagas作异步流程控制，
         因为采用了generator的相关概念，因此将异步转成同步写法，从而将effects转为纯函数。
（4）以 key/value 格式定义 effect。用于处理异步操做和业务逻辑，不直接修改 state。
         由 action 触发，能够触发 action，能够和服务器交互，能够获取全局 state 的数据等等。

附五：数据流向
（1）数据的改变发生一般是经过用户交互行为或者浏览器行为（如路由跳转等）触发的，当此类行为会改变数据的时候能够经过 dispatch 发起一个 action，
（2）若是是同步行为会直接经过 Reducers 改变 State ，若是是异步行为（反作用）会先触发 Effects 而后流向 Reducers 最终改变 State，
（3）因此在 dva 中，数据流向很是清晰简明。

WEB前端学习交流群21 598399936

QQ注册登陆http://www.kgc.cn/index.php?tuin=7123 领取学习资料