阿里react整合库dva demo分析

 

前言

因工作需要，最近在努力学习react全家桶相关内容，最近发现阿里有个dva项目，是基于redux,redux-sage和react-router 的一个轻量级框架，跟着网上一个整合demo坐下来后，打算写一下整个系统的分析，以备日后查看。

系统分析

概述

整个项目使用 react+dva+antd 的技术栈，主要实现了一个CURD 的应用。功能不复杂，主要是熟悉这个技术栈的思维方式。

入口

项目的入口文件为 index.js文件。 在该文件中首先实例化一个dva应用，然后设置该应用的model和router，最后启动（start） 在model中主要用来编写整个应用的业务逻辑，包括redux的整个流程，同步、异步获取数据等操作。 在router中底层应该是使用了react-router来负责整个系统的路由，然后在路由中配置各自路由对应的页面，也就是组件（components）

model

model类似于mvc结构中控制器的角色，其中主要有五个配置项。

1. namespace
   model 的命名空间，同时也是他在全局 state 上的属性，只能用字符 串，不支持通过 . 的方式创建多层命名空间。
2. state
   state的初始值，优先级低于传给 dva() 的 opts.initialState。
3. reducers key/value 格式定义 reducer，用于处理同步操作，唯一可以修改 state 的地方。由 action 触发
4. effects
   以 key/value 格式定义 effect。用于处理异步操作和业务逻辑，不 直接修改 state。由 action 触发，可以触发 action，可以和服务 器交互，可以获取全局 state 的数据等等。
5. subscrip
   以 key/value 格式定义 subscription。subscription 是订 阅，用于订阅一个数据源，然后根据需要 dispatch 相应的 action。在 app.start() 时被执行，数据源可以是当前的时间、服 务器的 websocket 连接、keyboard 输入、geolocation 变化、 history 路由变化等等。

简单来说，就是在state中设置初始化的组件状态，在reduce中处理同步的action，在effect中处理异步的action，并发出同步的action去更新state。最后可以在subscrip中添加事件监听等操作。

service

service 模块负责的内容同一班意义上的一样，就是用来获取数据的服务，可以把跟服务器通讯的代码放到这里来。

router

配置路径对应的组件，也就是不同路径下展示不同的页面。

组件

一个常规的react，用来将model中的state映射到组件的prop上并展示。

后记

整个dvademo看下来，对于一个比较熟悉react全家桶的人来说，相对于原来那一套redux+redux-saga+react确实简化许多，但如果不是很熟悉上面提到的那些东西，看这个demo的时候可能会一头雾水。 总而言之，dva大大方便了熟手的开发进度，减少了烦冗的代码，但是学习曲线还是过于陡峭，不是很适合上手。

参考 【https://github.com/dvajs/dva/blob/master/docs/API_zh-CN.md#model】 【https://github.com/sorrycc/blog/issues/18】