dva的学习

dva的学习

技术杂谈小彩虹2021-08-23 2:50:51170A+A-

今天注意到,公司的项目使用了dva搭建了项目,于是思考学习一下dva。
首先dva是一个基于redux和redux-saga的数据流方案,它还内置了react-router和fetch,所以也可以理解为一个轻量级的应用框架。说人话就是,这个一个基于redux和react-saga以及react-router的一层轻量封装,全部代码不到100行,使得之前每个割裂的action到现在变成了类似vuex这些状态管理工具这样简明易懂的数组对象。

model

在dva中,model代替了之前store和reducer的一大部分功能。在原先的redux中,数据是被统一存储到store中,然后由reducer进行数据的加工,这些在dva中全被放在了model里面。代码如下

const model = {
    namespace:'product',
    state:[],
    reducers:{
        'delete'(state,{payload:id}){
            return ...
        }
    },
    setup({ dispatch, history }) {  
      window.onresize = () => {  
        dispatch (type:"save")  
      }
    },
}

export default model

在上述代码中:

  • namespace 表示在全局state上的key,也就是为了单独命名用的
  • state 是初始值,相当于redux中的store的功能
  • reducers 等同于redux中的reducer,接收action,同步更新state
  • effect 用来做一些异步的操作,有点像加了中间件的action,相当于是对redux-saga的一个封装

以上就是model中各个属性的作用了,接下来就是在代码中使用model,y也就是导入app.model(...)

  • subscriptionsa 用于订阅一个数据源,然后根据条件去dispath一个action,也就是所谓的监听器,如上面的代码所展示的,就是一个当页面大小调整的时候会触发的事件

conncet

类似于react-redux,dva也有一个connect方法,它的功能也就在于将组件和model连接起来,每当要进行一个action发布时候,就dispatch一个方法,如下代码:

//控制删除id
function handleDelete(id) {
   dispatch({
     type: 'products/delete',
     payload: id,
   });
 }

还有要做的就是初始化数据,对应也就是接收一堆发送一堆请求以及处理一堆响应,最后让代码能够顺利的运行。

dva的数据流向

dva的数据流是单向的,每次用户在页面进行交互时,我们都会通过dispath发起一个action,然后进行操作。如果是同步操作,则会直接通过reducers改变state中的值,如果是异步操作,则dva会先触发effects然后流向reducers最终改变state中。这是dva官网的图

image.png 以上就是我对dva的大概理解

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示 | 支付宝红包
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们