客服热线:
400-661-1313
  • 亿升财富 财富易升
行业新闻标题

dva理论到实践——帮你扫清dva的知识盲点

作者:幸运娱乐-幸运娱乐app-幸运娱乐网址    发布时间:2020-01-07 21:32:25    来源:幸运娱乐-幸运娱乐app-幸运娱乐网址    浏览:24

  本文中我会介绍一下相应的dva的相应知识点和实战练习。

  同时我也会介绍使用dva的流程,以及介绍使用dva中的坑。希望大家通过这篇文章,能大致了解dva的使用流程。

  1,仅有 5 个 API,仅有5个主要的api,其用法我们会在第三节详细介绍。

  这里最常见的就是dva-loading插件的配置,

  但是一般对于全局的loading我们会根据业务的不同来显示相应不同的loading图标,我们可以根据自己的需要来选择注册相应的插件。

  modal是dva里面与我们真正进行项目开发,逻辑处理,数据流动的地方。这里面涉及到的namespace、Modal、effects和reducer等概念都很重要,我们会在第四部分详细讲解。

  但是如果你的项目特别的庞大,我们就要考虑到相应的性能的问题,但是入门可以先看一下这个。对于如何做到按需加载大家可以看10分钟 让你dva从入门到精通,里面有简单提到router按需加载的写法。

  初始值,我们在dva()初始化的时候和在modal里面的state对其两处进行定义,其中modal中的优先级低于传给dva()的

  action的格式如下,它需要有一个type,表示这个action要触发什么操作;payload则表示这个action将要传递的数据

  其实我们可以构建一个Action创建函数,如下

  model是dva中最重要的概念,Model非MVC中的M,而是领域模型,用于把数据相关的逻辑聚合到一起,几乎所有的数据,逻辑都在这边进行处理分发

  这里的state跟我们刚刚讲的state的概念是一样的,只不过她的优先级比初始化的低,但是基本上项目中的state都是在这里定义的。

  model的命名空间,同时也是他在全局state上的属性,只能用字符串,我们发送在发送action到相应的reducer时,就会需要用到namespace。

  以key/value格式定义reducer,用于处理同步操作,唯一可以修改state的地方。由action触发。其实一个纯函数。

  用于处理异步操作和业务逻辑,不直接修改state,简单的来说,就是获取从服务端获取数据,并且发起一个action交给reducer的地方。

  其中它用到了redux-saga,里面有几个常用的函数。

  在项目中最主要的会用到的是put与call。

  subscription是订阅,用于订阅一个数据源,然后根据需要dispatch相应的action。在app.start()时被执行,数据源可以是当前的时间、当前页面的url、服务器的websocket连接、history路由变化等等。

  当我们将action发送给Effect,基本上是取服务器上面请求数据的,服务器返回数据之后,effect会发送相应的action给reducer,由唯一能改变state的reducer改变state,然后通过connect重新渲染组件。

  1,首先全局安装dva-cli,我的操作在桌面进行的,大家可以自行选择项目目录。

  2,接着使用dva-cli创建我们的项目文件夹

  3,进入myapp目录,安装依赖,执行如下操作。

  5,首先是前端的页面,我们使用class形式来创建组件,原例子中是使用无状态来创建的。react创建组件的各种方式,大家可以看React创建组件的三种方式及其区别

  8,接下来我们来使用effect模拟一个数据接口请求,返回之后,通过yield put()改变相应的state

  这里的delay,是我这边写的一个延时的函数,我们在utils里面编写一个utils.js,一般请求接口的函数都会写在servers文件夹中。

  在这里你需要安装keymaster这个依赖

  10,例子中我们看到当我们不断点击+按钮之后,我们会看到current会不断加一,但是1s过后,他会自动减到零。

  官方的demo的代买没有实现gif图里面的效果,大家看下图:

  要做到gif里面的效果,我们应该在effect中发送一个关于添加的action,但是我们在effect中不能直接这么写:

  因为如果这样的话,effect与reducers中的add方法重合了,这里会陷入一个死循环,因为当组件发送一个dispatch的时候,model会首先去找effect里面的方法,当又找到add的时候,就又会去请求effect里面的方法。

  我们应该更改reducers里面的方法,使它不与effect的方法一样,将reducers中的add改为add1,如下:

  至此我们的简单的demo就结束了,通过这个例子大家可以基本上了解dva的基本概念。

  如果还想深入了解dva的各个文件夹中文件的特性,大家可以看快速上手dva的一个简单demo,这里面会很详细的讲到我们该怎么写model、怎么使用effect请求接口数据等等。

  这段时间我也利用业余时间,使用dva+thinkphp构建一个类似boss直聘的手机端web应用,项目还没全部做完,大家如果感兴趣的话,可以下载下来看看,一起探讨相关思路哦。