57 lines
2.3 KiB
Markdown
57 lines
2.3 KiB
Markdown
# *Dva* 介绍
|
||
|
||
*Dva* 是一个基于 [redux](https://github.com/reduxjs/redux) 和 [redux-saga](https://github.com/redux-saga/redux-saga) 的数据流方案，可以理解为一个轻量级的应用框架。
|
||
|
||
官网：*https://dvajs.com/*
|
||
|
||
*Dva* 的本意，是将基于 *React* 技术栈中常用到的库集成到一起。当时，*React* 社区中最流行的应用架构方案如下：
|
||
|
||
- 路由： [React-Router](https://github.com/ReactTraining/react-router/tree/v2.8.1)
|
||
- 状态管理： [Redux](https://github.com/reactjs/redux)
|
||
- 异步操作： [Redux-saga](https://github.com/yelouafi/redux-saga)
|
||
|
||
|
||
|
||
上面的架构中，除了 *Redux-saga* 我们没有介绍，前面两个我们都是有所接触的。
|
||
|
||
而 *Dva* 则是将上面三个 *React* 工具库包装在一起，简化了 *API*，让开发 *React* 应用更加方便和快捷。因此：
|
||
|
||
> ***Dva = React-Router + Redux + Redux-saga***
|
||
|
||
|
||
|
||
*Redux-saga* 主要是为了处理数据流中异步操作的问题，虽然我们没有前面没有介绍，但是并不影响我们学习 *Dva*。
|
||
|
||
*Dva* 中提供的数据流方案如下图：
|
||
|
||
数据流图1:
|
||
|
||
<img src="https://xiejie-typora.oss-cn-chengdu.aliyuncs.com/2022-11-05-082108.png" alt="image-20221105162108061" style="zoom:50%;" />
|
||
|
||
数据流图2:
|
||
|
||
<img src="https://xiejie-typora.oss-cn-chengdu.aliyuncs.com/2022-11-05-082152.png" alt="image-20221105162152274" style="zoom:50%;" />
|
||
|
||
*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* 来管理应用的数据流。
|
||
|
||
|
||
|
||
|
||
|
||
|