dva-loading源码思路解读

    昨天晚上睡觉的时候,小编无意中想得到了一个问题,dva-loading如何监听页面的请求完成及渲染,带着问题,小编看了看源码,豁然开朗。

    其实,监听的难点在于如何确定多个ajax请求已经完成,传统的方法是轮询加判断,但是dva-loading给了我们另外一个思路。

    首先看dva-loading返回,看下图:
    dva-loading源码思路解读

    这个函数返回了2个方法,我们先来看第一个方法

    dva-loading源码思路解读

    大家别看代码这么多,主要看switch那段,大家都知道,dva的思路是每个路由都和redux-saga库连接,也就是只要你进入某个页面,路由对应的组件会自动关联redux-saga,方便进行操作。extraReducers这段代码的作用其实就是路由对应的组件触发相应的reducer方法,从而witch控制loading的显隐。

    接下来我们来看onEffect
    dva-loading源码思路解读

    大家主要看那3句yield,第一句显示loading,第二句进行各种副作用(数据)的处理,第三句处理完后隐藏loading。
    总结如下,调用dva-loading,使其返回的extraReducers和onEffect关联到dva其他组件和方法,然后通过onEffect关联的方法触发onEffect方法,通过3个yield完成loading显隐和数据操作。值得一提的是,触发onEffect的时候,yield put会触发extraReducers,通过redux-saga管理最终的显隐状态。