Dva入门

# Dva 入门

概念：dva是体验技术部开发的react应用框架，将react-router/redux/redux-saga(异步操作)三个工具库包装在一起，简化API,让react应用更加方便、快捷。

dva是framwork,不是library，类似emberjs,使用依赖库本身的语法。简化开发，相当于一个大的语法糖。

数据流图：start-(connect)->view-(dispatch)->action

state:通过创建一个state对象，保存整个应用状态，

action：是一个对象，用来描述事件；

connect方法：一个函数，绑定state到view；返回的也是react组件，成为容器组件，是原始的UI组件的容器在外面包裹一层state。接收两个参数mapStateToProps函数，mapStateToProps函数返回一个对象，用于建立state到props的映射关系。

dispatch方法：一个函数，发送action到state；被connect的component会自动在props中拥有dispatch方法。

Provider和connect()非常优雅的将全局store提供给了每一个组件。让每一个组件可以非常方便的去使用全局的数据。

roadhog(如同webpack)

1. Model对象的属性

namespace:当前Model的名称。整个应用的state，由多个晓得Model的state以namespace为key合成。

state:该Model当前的状态，数据保存在这里，直接决定了试图层的输出。

reducer:Action处理器，处理同步动作，用来算出最新的state；

effects:Action处理器，处理异步动作；基于redux-saga实现，典型的就是I/O操作、数据库读写。不能直接修改state，由action触发。

Generator函数：effect是一个Generator函数，内部使用yield关键字，表示每一步的操作（不管是异步还是同步）

call和put:dva提供多个effect函数内部的处理函数，常用的是call和put. call是执行异步操作，put发出一个action，类似dispatch.

```

{

namespace: 'count',

state: 0,

reducers: {

add(state) { return state + 1 },

},

effects: {

*addAfter1Second(action, { call, put }) {

yield call(delay, 1000);

yield put({ type: 'add' });

},

},

}

```

2. dva安装

一、开始新项目的准备工作：

1、安装dva-cli并确保版本在0.9.1或以上版本：

npm install dva-cli -g

检测版本号： dva -v

2、创建项目名为‘wmz’的新项目：

dva new wmz

3、安装antd 和 babel-plugin-import ,babel-plugin-import 是用来按需加载 antd 的脚本和样式的，需要用tnpm 去下载ant插件。

 

下载tnpm：有的不需要也可以

npm install tnpm -g --registry=http://registry.npm.alibaba-inc.com

tnpm install

下载antd:

npm install antd babel-plugin-import --save

注意：下载完插件后，需要在.webpackrc文件中添加以下内容，才能使 babel-plugin-import 插件生效。

"extraBabelPlugins": [

["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]

]

4、准备工作做完之后，开始启动项目：

npm start

二、新项目实战

1、创建路由，路由可以想象成是组成应用的不同页面。文件的位置：routes文件夹里面。

2、添加路由信息到路由表，在router.js中进行编辑，先引入路由文件，再设置文件路径.

此时，就已经可以在http:127.0.0.1:8000,看到页面信息了；

3、编写UI Component，文件位置：component文件夹里；场景：在多个页面分享UI元素（或者在一个页面使用多次），在dva里可以把这部分抽成component。

4、定义model，dva通过model的概念把一个领域的模型管理起来，包含同步更新state的reducer，处理异步逻辑的effects，订阅数据源的subscriptions。文件的位置在models文件夹里。

 

在这个model里：

namespace：表示在全局state上的key；

state： 是初始值；

reducer： 等同于redux里的reducer，接收action，同步更新state；

最后记得一定要在index.js文件里载入model：

 

app.model(require(‘./models/文件名’).default);

5、connect方法：把model和component串联起来。文件位置：routers文件夹里。

6、最后需要在index.js 中添加初始数据让项目run起来；

const app = dva();

三、项目模块安排

项目的整体设计模式：

1. 先设计model

namespace 是 model state 在全局 state 所用的 key，state 是默认数据。

异步处理：dva 通过对 model 增加 effects 属性来处理 side effect(异步任务)，call,put;

键盘订阅事件：subscription和model绑定,用于订阅一个数据源，然后根据dispatch需要的action，数据源可以是当前时间、服务器的websocket、keyword输入、geolocation变化、history路由变化等。

2. 再设计component

通过 props 传入两个值，count 和 dispatch，count 对应 model 上的 state，在后面 connect 的时候绑定，dispatch用于分发 action

更新state是通过reducer处理的，也是唯一可以更新state的地方。

3. 最后链接model和component

router:写组件，接收dispatch和products两个参数；

小案例：
import React from 'react';
import {connect} from 'dva';
import ProductList from '../components/ProductList';

const Products = ({dispatch,products}) => {
function handleDelete(id){
dispatch({//调用dva中的方法
type:'products/delete',
payload: id,
})
};
return(
<div>
<h2>list of products</h2>
{/*给组件绑定两个时间，删除事件和同步处理数据dva */}
<ProductList onDelete={handleDelete} products={products}/>
</div>
 
)
}
 
export default connect(({ products})=>({
products,
}))(Products);
```
models:定义model,对state进行管理,处理组件中的同步的方法;
```
//在组件中调用
export default {
namespace : 'products',
state : [],
reducers : {
'delete'(state,{payload:id}){//接收两个参数state和delete接收的参数
return state.filter(item =>item.id !== id);//filter返回true或者false,是否保留该数据。
}
}

}
```
components:一个对象，接收父组件绑定在子组件上的方法和models；
```
import React from 'react';
import PropTypes from 'prop-types';//设置数据类型
import {Table,Popconfirm,Button} from 'antd';

const ProductList = ({onDelete,products}) =>{//接收方法
const columns = [{
title:'Name',
dataIndex:'name'
},{
title:'Actions',
render:(text,record)=>{ //编辑单元格
return(
//气泡框 onConfirm确认的
<Popconfirm title="删除?" onConfirm={()=>onDelete(record.id)}>
<Button>Delete</Button>
</Popconfirm>
);
}
}];
return(
<Table //表格
dataSource = {products}
columns = {columns}
/>
)
}
export default ProductList;

## Dva源码解析

1. roadhog 起的是 webpack 自动打包和热更替的作用。

2. dva是一个杉树，返回一个app对象；目前 dva 的源码核心部分包含两部分，dva 和 dva-core。前者用高阶组件 React-redux 实现了 view 层，后者是用 redux-saga 解决了 model 层。

3. src/index.js

在这里，dva 做了三件比较重要的事情：

使用 call 给 dva-core 实例化的 app(这个时候还只有数据层) 的 start 方法增加了一些新功能（或者说，通过代理模式给 model 层增加了 view 层）。

使用 react-redux 完成了 react 到 redux 的连接。

添加了 redux 的中间件 react-redux-router，强化了 history 对象的功能。

4. provider本质上是一个高阶组件，也是一种代理模式，接收 redux 生成的 store 做参数后，通过上下文 context 将 store 传递进被代理组件。在保留原组件的功能不变的同时，增加了 store 的 dispatch 等方法。

5. connect 也是一个代理模式实现的高阶组件，为被代理的组件实现了从 context 中获得 store 的方法。

6. initialState 是 state 的初始数据，优先级高于 model 中的 state，默认为 {}。

7. createLoading() 加载状态，在app.use(CreateLoading());根据state.loading.global指示全局loading状态。如果在组件中直接使用this.props.locading

## Dva

1. 解决的主要问题

简化了react-redux的部署文件的复杂度，能够快速上手；

2. 主要接口：

(1)后端接口：

配置路由，在点击按钮后，在componentWillMount中通过this.props.dispatch派发，在model中执行effects、reducer等操作；在servers的文件夹下发送网络请求需要通过request.js文件，后台接收：

export function patch(id, values) {

return request(`/api/users/${id}`, {

method: 'PATCH',

body: JSON.stringify(values),

});

}

(2)mock数据：在.roadhogrc.mock.js中添加配置

export default {

'GET /api/users': { users: [{ username: 'admin' }] },

}

export default {

'POST /api/users': (req, res) => { res.end('OK'); },

}

在roadhogrc中进行配置proxy;若是get请求，则可以直接在url后面进行拼接；

3. 主要执行路径

用户操作后或者路由跳转->dispatch(action),同步直接通过reducer更改state,异步先触发effects,然后通过reducer最终改变state.

4. 可配置及修改的类、函数和文件

(1)路由：通过浏览器的History API可以监听浏览器url的变化，从而控制路由相关操作

(2)在入口文件index.js中 可配置plugin/model/router

state:model的状态数据，对象形式；

action：是一个javascript对象，改变state的唯一途径。必须带有type属性，需要注意的是 dispatch 是在组件 connect Models以后，通过 props 传入的；

dispatch:payload是需要传递的信息；通过props传入的dispatch函数；

reducers:{ save(state,{payload: }){ return { }}}返回一个新值；

effects:{fetch({payload},{call,put})} 不能直接修改state，由action触发。call是执行异步操作， put发出一个action，类似dispatch.

import * as 自定义名 from '../services/service';

effects: {

*供组件调用的方法名({ payload: { 参数 }}, { call, put }) {

const result = yield call(自定义名.service中的方法名, 参数);//如果使用 {参数} ，则是一个对象

//把请求的数据保存起来

//数据更新会带动页面重新渲染

yield put({

type: 'save', //reducers中的方法名

payload:{

data: result.data //网络返回的要保留的数据

}

})

}

},

监听路由变化，当进入 /user 页面时，执行 effects 中的 fetch，以从服务端获取用户列表，然后 fetch 中触发 reducers 中的 save 将从服务端获取到的数据保存到 state 中。

effects: {
*fetch(action, { put, call }) {
const users = yield put(fetchUsers, action.data);
yield put({ type: 'save', data: users });
},
},
*create({ payload: values }, { call, put }) {
yield call(usersService.create, values);
yield put({ type: 'reload' });
},
*reload(action, { put, select }) {
const page = yield select(state => state.users.page);
yield put({ type: 'fetch', payload: { page } });
},

Subscription ：语义是订阅，用于订阅一个数据源，然后根据条件 dispatch 需要的 action。数据源可以是 当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等等。

(3)在.webpackrc中通过添加字段来进行自定义antd主题；

CSS Modules配置,