dva笔记

1. dva框架设计初衷

由于React主要是一个视图层框架，在解决参数和数据传递上面有很大的缺陷，只有父子组件之间才能直接传递数据，后来就出现了Redux。
Redux可以很好的解决React只能在父子组件之间直接参数和数据的弊端，可以通过store来存储state，通过ActionCreators派发action给store，store将state和action传给Reducer，然后通过Reducer改变state，将新的state传给store，state发生变化后就可以渲染，改变视图。
而dva框架设计就是为了将繁琐的redux-saga进行封装（默认是model文件夹），而且还内置了react-router，可以很好的运行react和redux，而且也很好的将路由（router）拆分到一个文件（通常是routes）里面，可以很好的管理路由。所以dva是一个数据流方案，也是一个轻量级的应用框架。

2.models文件夹

dva 通过 model 的概念把一个领域的模型管理起来，包含同步更新 state 的 reducers，处理异步逻辑的 effects，订阅数据源的 subscriptions 。

2.1 State

State 表示 Model 的状态数据，通常表现为一个 javascript 对象（当然它可以是任何值）；操作的时候每次都要当作不可变数据（immutable data）来对待，保证每次都是全新对象，没有引用关系，这样才能保证 State 的独立性，便于测试和追踪变化。

2.2 Action

Action 是一个普通 javascript 对象，它是改变 State 的唯一途径。无论是从 UI 事件、网络回调，还是 WebSocket 等数据源所获得的数据，最终都会通过 dispatch 函数调用一个 action，从而改变对应的数据。action 必须带有 type 属性指明具体的行为，其它字段可以自定义，如果要发起一个 action 需要使用 dispatch 函数；需要注意的是 dispatch 是在组件 connect Models以后，通过 props 传入的。

2.3 dispatch 函数

dispatching 函数是一个用于触发 action 的函数，action 是改变 State 的唯一途径，但是它只描述了一个行为，而 dipatch 可以看作是触发这个行为的方式，而 Reducer 则是描述如何改变数据的。

在 dva 中，connect Model 的组件通过 props 可以访问到 dispatch，可以调用 Model 中的 Reducer 或者 Effects，常见的形式如：

dispatch({
  type: 'who/do', // 如果在 model 外调用，需要添加 namespace
  payload: {}, // 需要传递的数据或数据
});

2.4 Reducer

Reducer（也称为 reducing function）函数接受两个参数：之前已经累积运算的结果和当前要被累积的值，返回的是一个新的累积结果。该函数把一个集合归并成一个单值。
在 dva 中，reducers 聚合积累的结果是当前 model 的 state 对象。通过 actions 中传入的值，与当前 reducers 中的值进行运算获得新的值（也就是新的 state）。需要注意的是 Reducer 必须是纯函数，所以同样的输入必然得到同样的输出，它们不应该产生任何副作用。并且，每一次的计算都应该使用immutable data，这种特性简单理解就是每次操作都是返回一个全新的数据（独立，纯净），所以热重载和时间旅行这些功能才能够使用。

2.5 Effect

Effect 被称为副作用，在我们的应用中，最常见的就是异步操作。它来自于函数编程的概念，之所以叫副作用是因为它使得我们的函数变得不纯，同样的输入不一定获得同样的输出。

dva 为了控制副作用的操作，底层引入了redux-sagas做异步流程控制，由于采用了generator的相关概念，所以将异步转成同步写法，从而将effects转为纯函数。

2.6 Router

这里说的路由（Router）通常指的是前端路由，由于现在的应用通常是单页应用，所以需要前端代码来控制路由逻辑，通过浏览器提供的 History API 可以监听浏览器url的变化，从而控制路由相关操作。

dva 实例提供了 router 方法来控制路由，使用的是react-router。例如：

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

现在的dva通常和umi一起使用，可以很好的自动化管理路由，dva+umi就是现在主流的应用框架。使用起来非常方便与智能。