大家好，我是讯享网，很高兴认识大家。



dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。

数据的改变发生通常是通过用户交互行为或者浏览器行为（如路由跳转等）触发的，当此类行为会改变数据的时候可以通过 dispatch 发起一个 action，如果是同步行为会直接通过 Reducers 改变 State ，如果是异步行为（副作用）会先触发 Effects 然后流向 Reducers 最终改变 State，所以在 dva 中，数据流向非常清晰简明，并且思路基本跟开源社区保持一致（也是来自于开源社区）

讯享网

刚开始学react代码的时候总会想，这种全局数据流有什么用，直接ajax请求响应，操作页面元素，一步走到头，清晰明了，这些数据流并没有什么卵用

• 1.react页面渲染都是通过修改state进行页面渲染的，而state只能控制当前页面
• 2.使用react代码开发，要抛弃之前ajax的理念（通过数据以及操作dom进行页面调整），使用state、props数据流进行页面开发，如果直接操作dom，不更新state在没玩明白数据流的情况下可能会出问题，需要时间去积累经验
• 3.这时候当前组件想要操作别的组件的state尤为困难，这时候就需要全局数据流方案redux

Redux 是 JavaScript状态容器，提供可预测化的状态管理，可以让你构建一致化的应用，运行于不同的环境（客户端、服务器、原生应用），并且易于测试

因为对于react来说，同级组件之间的通信尤为麻烦，或者是非常麻烦了，所以我们把所有需要多个组件使用的state拿出来，整合到顶部容器，进行分发

在react的数据交互理念中，只能进行父子组件的通信，无法想和谁通信就和谁通信，redux做到了将数据传递添加到了全局，任何地方都可以进行接收使用。

将需要修改的state都存入到store里，发起一个action用来描述发生了什么，用reducers描述action如何改变state树。创建store的时候需要传入reducer，真正能改变store中数据的是store.dispatch API

---

State

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

Action

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

dispatch 函数

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

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

Reducer

Reducer（也称为 reducing function）函数接受两个参数：之前已经累积运算的结果和当前要被累积的值，返回的是一个新的累积结果。该函数把一个集合归并成一个单值。

Effect

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

Subscription

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

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

• 项目index.js

• 1.创建页面组件，文件以及组件命名大驼峰，开发相应的逻辑以及UI界面
• 2.添加路由，按项目规则命名（eg:列表页面：/list,添加列表页面：/list/listAdd）
• 3.定义model
• 4.定义service以及api地址
• 5.连接model和组件

1.创建页面组件Primary.js

里面开发对应的页面逻辑以及UI

2.添加路由

注意：需要在福禄管家将对应菜单添加到自己的商户应用下，否则系统会进行控制，也是无法打开

3.创建model文件primary.js

4.创建service文件primary.js

请求的地址都从service.js进行传递

axios.js

5.api.js添加

（查看后端服务地址进行配置）

6.连接model和组件

• 流程图

1.页面组件的定义

1. 页面的基础搭建

2.state定义

1. 定义查询的postData
2. 定义搜索的配置项searchConfig（使用SearchForm组件库）
3. 定义selectedRowKeys（用于批量删除）
4. 定义弹窗的开发关闭showModal

3.事件的定义

1. getData：异步请求查询函数
2. search：查询获取表单数据更新postData的函数并调用查询函数
3. batchDeleteInfo：批量删除获取点击的选中行并调用删除函数
4. deleteInfo：异步请求删除函数

4.render的定义

1. 获取state
2. 设置table的列配置、分页配置、多选
3. html加载面包屑、查询组件、新增按钮、批量删除按钮、表格、弹窗子组件

5.页面导出并连接全局数据流

流程如图：

查询交互：点击查询获取查询数据->调用search查询组装数据->调用getData公用函数->获取返回数据->修改state，渲染页面

新增编辑交互：点击父组件操作功能，调用弹窗->表单数据完成，并按后端要求组装好数据，提交新增、编辑->获取返回数据->调用查询，关闭弹窗

删除交互：点击删除->确认删除交互->获取返回数据->调用查询

• 查询

• 新增、编辑

• 删除

• 父子组件传值

新增、编辑、删除成功后都需进行查询

如何使用dva全局数据

观察代码发现我们使用返回值要么用的是.then，要么用的callback回调函数，如何使用dva数据流处理页面数据或者做某些事

例如我们在子组件新增、编辑成功后，可以在父组件接受，子组件的成功行为做操作