结构

 effects: {
    *pageQuery({ payload = {} }, { select, call, put }) {
      const res = yield call(pageQuery, payload);
      const list = yield select((s) => s.commodity.list);
      yield put({
        type: 'save',
        payload: {
          detail: res.result,
        },
      });
    },
}

 

 

 首先确认一点,effects里面的函数都是Generator函数.然后我们对里面的一些关键词进行分类来区分为啥effects里面的函数的函数要这么写.

 

yield

固定关键词,Generator函数自带的关键词,和"*"搭配使用.有点像async和await,使用"*"则表明它是Generator函数,然后每使用一个"yield"就是告诉程序这里是异步,需要等待这个后面的代码执行完成.同步代码可不使用该关键词

 

payload

view端通过dispatch传过来的payload同名参数

 

select, call, put

dva中effects函数的固定传参,他们分别对应不同的功能,用于不用场景

select

拿到model中state的数据

 const list = yield select((s) => s.commodity.list); 

 call

第一个参数是一个异步函数,payload是参数,可以通过call来执行一个完整的异步请求,又因为yield的存在,就实现了异步转同步的方案

const res = yield call(pageQuery, payload)

 put

可以使用同model中的reducers或者effects,通过reducers来实现数据到页面的更新.可以通过put实现effect的嵌套使用

 yield put({
        type: 'save',
        payload: {
          detail: res.result,
        },
      });