什么是dva model

dva 是一个基于 Redux 和 React Router 的数据流方案，它提供了对 Redux 和 React Router 的封装，使得在使用 dva 时可以更方便地进行状态管理和路由操作。

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

学习参考：dvajs快速上手

前期安装antd--定义路由--编写ui组件component--定义model（所有的数据和逻辑用model处理）--通过connect连接component和model

数据的改变发生通常是通过用户交互行为或者浏览器行为（如路由跳转等）触发的，当此类行为会改变数据的时候可以通过 dispatch 发起一个 action，如果是同步行为会直接通过 Reducers 改变 State ，如果是异步行为（副作用）会先触发 Effects 然后流向 Reducers 最终改变 State

model.js

1. state。表示 Model 的状态数据，通常表现为一个 javascript 对象。可以通过app._store查看，但很少会用到；
2. Action 是一个普通 javascript 对象，它是改变 State 的唯一途径。必须要通过 dispatch 函数调用一个 action（必须使用type指明行为），才能改变对应的数据。
3. Dispatch是一个用于触发 action 的函数
4. Reducer函数接受两个参数：之前已经累积运算的结果和当前要被累积的值，返回的是一个新的累积结果。通过 actions 中传入的值，与当前 reducers 中的值进行运算获得新的值（也就是新的 state）。必须是“纯函数”，同样的输入必然得到同样的输出，不应产生任何副作用。
5. Effect 被称为副作用，最常用于异步操作，同样的输入不一定获得同样的输出。
6. Subscriptions 是一种订阅数据源的方法，数据源可以是当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等等。
7. Router：Route 的核心作用就是建立 URL 路径（path）和组件（component）的绑定关系，这样当 URL 匹配时自动渲染对应组件，可以集中式声明路由，让路由管理变得非常方便和直观。
8. Route Components：在 dva 中我们通常将其约束为 Route Components，因为在 dva 中我们通常以页面维度来设计 Container Components。通常需要 connect Model的组件都是 Route Components，组织在/routes/目录下，而/components/目录下则是纯组件（Presentational Components）。

dva react组件设计

一般来说，我们的组件有两种设计：

1. Container Component
2. Presentational Component

Container Component 一般指的是具有监听数据行为的组件，一般来说它们的职责是绑定相关联的 model 数据，以数据容器的角色包含其它子组件，通常在项目中表现出来的类型为：Layouts、Router Components 以及普通 Containers 组件。

更像是状态管理器，它表现为一个容器，订阅子组件需要的数据，组织子组件的交互逻辑和展示。

//index.tsx
import React, { Component, PropTypes } from 'react';

// dva 的 connect 方法可以将组件和数据关联在一起
import { connect } from 'dva';

// 组件本身
const MyComponent = (props)=>{};
MyComponent.propTypes = {};

// 监听属性，建立组件和数据的映射关系
function mapStateToProps(state) {
  return {...state.data};
}

// 关联 model
export default connect(mapStateToProps)(MyComponent);

Presentational Component 的名称已经说明了它的职责，展示形组件，一般也称作：Dumb Component，它不会关联订阅 model 上的数据，而所需数据的传递则是通过 props 传递到组件内部。

只完成自己独立的任务，需要的数据通过 props 传递进来，需要操作的行为通过接口暴露出去。

import React, { Component, PropTypes } from 'react';

// 组件本身
// 所需要的数据通过 Container Component 通过 props 传递下来
const MyComponent = (props)=>{}
MyComponent.propTypes = {};

// 并不会监听数据
export default MyComponent;