Dva 介绍#

Dva 是一个基于 redux 和 redux-saga 的数据流方案，可以理解为一个轻量级的应用框架。

官网：https://dvajs.com/

Dva 的本意，是将基于 React 技术栈中常用到的库集成到一起。当时，React 社区中最流行的应用架构方案如下：

• 路由： React-Router
• 状态管理： Redux
• 异步操作： Redux-saga

上面的架构中，除了 Redux-saga 我们没有介绍，前面两个我们都是有所接触的。

而 Dva 则是将上面三个 React 工具库包装在一起，简化了 API，让开发 React 应用更加方便和快捷。因此：

Dva = React-Router + Redux + Redux-saga

Redux-saga 主要是为了处理数据流中异步操作的问题，虽然我们没有前面没有介绍，但是并不影响我们学习 Dva。

Dva 中提供的数据流方案如下图：

数据流图1:

数据流图2:

Dva 中的核心概念如下：

• app.model
  • namespace: 当前 Model 的名称。整个应用的 State，由多个小的 Model 的 State 以 namespace 为 key 合成
  • state: 该 Model 当前的状态。数据保存在这里，直接决定了视图层的输出
  • reducers: Action 处理器，处理同步动作，用来算出最新的 State
  • effects：Action 处理器，处理异步动作，Effect 是一个 Generator 函数，内部使用 yield 关键字，标识每一步的操作（不管是异步或同步）
    • dva 提供多个 effect 函数内部的处理函数，比较常用的是 call 和 put
    • call：执行异步函数
    • put：发出一个 Action，类似于 dispatch

Dva 练习：学生管理系统

目前，Dva 已经被融入到了 Umi 当中，之后我们在 Umi 中可以以插件的形式开启 Dva 来管理应用的数据流。