dva框架-快速了解

0 1

dva的介绍

官方文档：

https://dvajs.com/guide/

背景：

使用redux-saga需要在action , reducers,saga三个文件中切换，而可以使用dva框架来简化这一个过程.

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

0 2

dva的安装

通过 npm 安装 dva-cli 并确保版本是 0.9.1 或以上。

安装dva

创建项目

0 3

dva的目录结构

0 4

models文件介绍 

model模块的写法：

namespace: 命名空间，后续我们取得数据的时候要注意加上命名空间

state: 状态，即数据

subscriptions：这里的方法，直接就会执行，一般用于数据的初始化

reducers: 纯函数，如果有异步，必须借助effect 

effects：副作用（业务逻辑，包含同步和异步）

       这里的键名，就是action中type的字段

      payload: action传参数，都放在这里

      call() :  表示调用异步函数

                如果yield call的是一个Promise对象，那只有在Promise返回的是resolve方法的情况下，下面跟着的yield put及后面的代码才会执行，若返回了rejector则后面的代码则全部停止执行

      put 表示 dispatch action，其他的还有 select, take, fork, cancel 等

      注：yield put直接调用reducer，是堵塞的，同步,

             调用非reducer函数，是非堵塞的，异步

             使用put.resolve ，堵塞的，同步

model模块的写法，如下：

0 5

services 请求数据

将请求后台数据的方法，全部提取到services文件夹中

代码如下：

0 6

util 公共文件

将提取的一些公共方法放在此文件夹中

如：封装的请求方法request.js：

0 7

router.js 路由设置文件

与react-router-dom v5 语法相似，只是已经将其它封装到dva中，所以要从dva中去引用router.

代码如下：

0 8

组件中的路由跳转

NavLink, Route,Redirect等，与react中的react-router-dom v5 语法一致

注: 最新的react-router-dom v6的语法与v5还是有很大的不同

0 9

index.js 入口文件

model()：注入数据，需要哪一个models中的数据 ，就必须在入口中对其进行注入，可以与之的Provider关联起来

router(): 引用设置路由的文件

0 9

routes文件夹，类似pages

和react 组件的写法一样，对于model中的状态使用，也使用connect方法，与redux的使用方法相似

代码如下：

总结 

dva框架介绍完成，希望通过本文能让大家对dva框架有个基本了解

更多内容，请关注公主号：bug收集