React结合Ant Design Pro开发项目理解（service、model、index等文件逻辑关系）

组件中传值

react——值写在了视图层
Antd pro——值写在model层，通过saveState扩展表达式，把值更新到state后会触发视图层的render方法【通过props获取model中的值】

下图是整个项目各模块的关系

大概流程是UI组件间的交互操作，首先调用Model中的effects，Model通过effects调用Service（封装了request请求）中的请求函数来发起请求，获取服务端返回的响应后，调用reducers来改变state，更新View

1）service文件编写对应的请求操作

此处为对应的请求函数，其中的request请求是基于fetch的封装，便于统一处理POST、GET等请求参数、请求头以及错误提示信息等

2）model文件编写对应的Effect操作（及Reducers）

此处相当于redux的middleware，在effects里面可以调用service文件中请求方法进行异步请求

effects 用于处理异步操作，不能直接修改 state，由 action 触发修改state，也可触发 action。
它只能是 generator 函数（ES6文档），并且有 action 和 effects 两个参数。第二 个参数 effects 包含 ==put、call 和 select ==三个字段，

put 用于触发 action
call 用于调用异步处理逻辑
select 用于从 state 中获取数据

namespace: 'test',
state: {
	list: [],
},
effects: {
	*init({ payload }, { put, call, select }) {
    	const res = yield call(request, {
        	...
      	})
      	if (res && res.status === 200) {
        	yield put({
          		type: 'save',
          		payload: {
            		...
          		}
        	})
      }
}

拿到异步请求数据，触发reducer修改state的数据（唯一修改model层state数据的方式就是触发reducer）

3）index文件负责页面路由实现

此处编写整个项目的路由配置

全局的路由关系是：src/index.js 中通过 app.router(require(’./router’).default)，将 src/router.js 绑定到 dva 实例的 router 方法上。而在 src/router.js 中又引入了 src/common/router.js 中的 getRouterData 作为数据源

4）各组件页面index文件负责UI的展示

此处负责组件的编写及页面的展示。

首先，页面设计到交互的逻辑，由dispatch发起Model里的action请求，其中dispatch接收两个参数——type 与 payload

如果state数据变化，触发所有连接此state的容器组件调用render方法进行重新渲染

//连接model层的state数据，然后通过this.props.state名（namesapce）访问model层的state数据
@connect(({ list }) => ({
  list
}))

其中，组件写法中调用了 dva 所封装的 react-redux 的 @connect 装饰器——用来接收绑定的 list 这个 model 对应的 redux store。connect的使用介绍如下：

connect(({ list, loading }) => ({
  list,                          //①
  loading: loading.models.list,  //②
}))

1）connect 有两个参数，mapStateToProps以及mapDispatchToProps，一个将状态绑定到组件的props，另一个将方法绑定到组件的props
2）代码①：将实体list中的state数据绑定到props，注意绑定的是实体list整体，使用时需要list.[state中的具体变量]
3）代码②：通过loading将models中list的key对应的value读取出来，赋值给loading，以方便使用，如表格是否有加载图标。除此之外还可通过key value编写：loading.effects[“list/fetch”]

参考：
Ant Design Pro 网络请求流程
ant design pro 页面加载原理及过程，@connect 装饰器