dva

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

使用dva

定义一个模型，有点像redux-toolkit。
使用connect连接

像redux的connect一样连接。

启动。
然后如何派发action。

通过对应的指令找到对印的reducer，派发。

dva的基本操作就是这样，使用起来比较轻便。

实现dva

思路：封装一个函数，创建store，通过model收集reducer和state，改变reducer中的方法名字。

首先是model。因为有多个model，所以我们要收集起来。

先通过namesapce改变rducer中的方法名字。

再将其保存起来。

然后通过Provider就可以注入进去。

改造model的reducer,返回redux接受的reducer。此时model的state是不会变的，他只是初始的state，组件真正接受的是redux中的state。
这个getReducer只会调用一次，用来返回真正的reducer。

初步实现完毕。

支持异步

dva是集成redux-saga的，所以用法也类似。

在创建model的时候可以通过effects创建saga中间件。然后派发对应的action

实现

思路：处理每个model的effects，转会为对应的saga函数，采用takeEvery监听每个属性名（如asyncADD，转化为takeEvery(‘asyncADD', ()=>{})等等），然后通过redux-saga提供的createSagaMiddleware创建一个中间件，利用run方法执行各个model中的effects转化后的saga函数。
代码：

通过getSagas转化每个model的effects并且存在一个数组里面，然后通过forEach一个个run起来。
看如何转化

可以看到，每个model的effects会在getSaga被转化为function*(){}，然后遍历单个model的effects，对每个属性都做比如*asyncADD(){}处理，如图通过getWatcher返回个saga函数，通过fork开启一个子进程，不会干扰主进程的运行。

而每个getWatcher返回的就是saga函数（generator函数）他会通过takeEvery监听当前的属性（key）并且执行后面那个effects。这里需要改造一下redux-saga的Put方法，使他单独做一些prefixType的逻辑。
这样就基本完成，每个model的effects都会被处理城saga函数去run，而且effects的每个方法都转化为了key，通过takeEvery去监听。这里还需要对effect的每个方法名加上前缀

这样就大功搞成了。

可以正常运行。

router的实现

使用没什么区别
dva是继承了connected-react-router的

所以用法跟其差不多，注意，异步的逻辑只能写在effects,reducer是同步的，不能继续派发的。

实现：

基于connectd-react-router

还记得connectd-react-router怎么使用吗，第一步，创建router对象。

第二步，使用中间件。

传入api给app._router作为参数。这样就完成了。

当他派发push的时候会被路由中间件拦截处理，push到另一个页面去。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• JavaScript中的数组拍平是什么意思，如何进行数组拍平处理

  数组扁平化是指将一个多维数组变为一维数组,下面这篇文章主要给大家介绍了关于JavaScript面试之如何实现数组拍平（扁平化）方法的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下

• Set与WeakSet集合是什么，Set集合遍历有几种方法

  这篇文章主要给大家介绍了关于ES6中Set与WeakSet集合的相关资料,Set是ES6给开发者带来的一种新的数据结构,你可以理解为值的集合,WeakSet结构同样不会存储重复的值,但它的成员必须是对象类型的值,需要的朋友可以参考下

• vue怎么给对象数组赋值？this.$set方法帮你解决

  vue怎么给对象数组赋值？在vue中，想要实现给对象数组赋值，我们可以使用this.$set（）这个方法，那么具体怎样实现呢？为何用this.$set（）？下面我们一起来详细的了解一下。

• 用Vue框架怎么写一个简易的购物车

  这篇文章主要为大家详细介绍了Vue.js框架实现购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• Promise静态实现是怎样的，有哪些要点

  这篇文章主要为大家介绍了Promise静态四兄弟实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪