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到另一个页面去��

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

猜你喜欢

• vuex辅助函数的用法是什么？你知道哪些？

  vuex辅助函数的用法是什么？vue中辅助函数有mapState、mapActions、mapMutations等等，对新手来说可能不是很了解vuex辅助函数的使用，因此这篇文章就给大家来介绍一下vuex辅助函数��

• JS遍历二叉树如何实现，有哪些遍历算��

  众所周知javascript语言中只提供了几种基本类型的数据类型,而二叉树是一种数据结��,在一些查询等操作中能提供较好的性能,这篇文章主要给大家介绍了关于利用JS实现二叉树遍历算法的相关资料,需要的朋友可以参考下

• JS字符串操作方法有哪些？教你四个小技��

  这篇文章给大家分享的是有关JS字符串操作方法的内容，有一些比较实用的小技巧，例如拆分字符串�� JSON格式化和解析、多行字符串和嵌入式表达式和验证字符串数组中是否存在子字符串这些，下文有实现代码，感兴趣的朋友可以了解一下��

• js如何实现消消乐游戏？

  不少朋友应该都有玩过消消乐游戏，如果我们想要自己实现一个消消乐游戏，怎么做呢？下面就给大家分享使用JavaScript实现消消乐游戏代码，感兴趣的朋友可以参考参考��

• JavaScript闭包及其作用是什么，如何用代码说��

  什么是闭包？看看闭包有哪些作用？下面本篇文章带大家聊聊javascript中闭包。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助��