dva的简介_dva是什么-CSDN博客

（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：纯函数

附一：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 的。

附三：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 领取学习资料