方案1.你可以在model里面操作
在model里面的state里面声明一个变量state,默认是false,effect函数执行开始就将其改为true,然后等call()然后结束后又将其改为false.
state{ isloading:false, isEnd:false //你也可以加一个变量去区分其状态 } yield put({ type: 'save', payload: { isloading: true, isEnd: false, }, }); const res = yield call(query, payload); yield put({ type: 'save', payload: { isloading: false, isEnd: true, }, });
这种方案的好处是我自己写的逻辑,我自己随时可以调节加条件等. 缺点也很明显,需要额外加很多逻辑.
方案2.dva自带的loadingEffect
const loadingEffect = useSelector((state) => state.loading);
我们先看看loadingEffect里面都有些啥
它是一个对象,包含三个属性,models、effect、global.
它反馈了所有dva的在此页面执行了的models和effects,其中global是任何页面都能拿到的.
effects
精确到了某个model下的单一effect函数,当它在执行时,loadingEffect对应的值就是true,执行完了或者未执行就是false.
let isLoading=loadingEffect.effects['baseInfo/queryAccess']
models
指某个models下面的所有effect函数全部执行完成之前就是true,执行完之后或者未执行就是false
let isLoading=loadingEffect.models['baseInfo']
我们需要明确需求,根据需要去决定使用effects还是models,如果页面上使用了models,那页面的组件发起dispatch时会更新loadingEffect的状态,引起页面重新刷新,也就是说,多个组件之间会被影响.我的另一篇博客中有类似的案例:子组件dispatch导致其他页面刷新问题解决