react dva实现

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

猜你喜欢

转载自blog.csdn.net/lin_fightin/article/details/121180250