在dva中实现两个effect方法互相使用,即方法A处理完了接口请求,拿到相关数据再去用另外一个getor方法。像下面这样的效果
业务需求
effects: {*getA({ type, payload }, { put, take }) {yield put({ type: "getB" });yield put({ type: "add", payload });},*getB({ payload }, { call, put }) {yield put({ type: "minus" });},},
页面上点击异步增加按钮,dispatch
中getA
方法,getA
再去调用getB
,这种需求应该很常见。
可以看到,我们在点击是时候,数据是会不断减少的。
扩展需求
effects: {*getA({ type, payload }, { put, take }) {console.log("aa");yield put({ type: "getB" });console.log("bb");yield put({ type: "add", payload });},*getB({ payload }, { call, put }) {yield put({ type: "minus" });console.log("cc");},}
上面我们看到,执行顺序是aa => bb => cc =>,也就是说明put方法是非阻塞的,在getA
里面执行完同步的方法,再去执行getB
,但是如果我们要实现在getB方法执行完成才继续执行后面的业务。就是 期望这个demo打印的顺序是,aa => cc => bb。
增加一个监听yield take("getB/@@end");
就可以
effects: {*getA({ type, payload }, { put, take }) {console.log("aa");yield put({ type: "getB" });yield take("getB/@@end");console.log("bb");yield put({ type: "add", payload });},*getB({ payload }, { call, put }) {yield put({ type: "minus" });console.log("cc");},}
因为put
是一个非阻塞的方法,put
的使用效果和在外部使用dispatch是一样的,如果我们想等待getB
执行完再接下去执行a里面的业务,就要用到take
,它是redux-saga
的方法,在dva
中也有,他是用来一次性监听dispatch
过来的action
的,而再effect
前后会额外触发 /@@start
和 /@@end
的 action
,我们就可以监听/@@end
,从而来监听effect的执行完成状态.
官网这里也给我们做了解释,大家可以仔细阅读下。