dva的学习

今天注意到，公司的项目使用了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官网的图

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