场景:
在组件中使用了useEffect,每当某一依赖项变化,就需要将model中的另一state自增1,这种需要该如何实现?
解决思路分析:
如果我们在useEffect中添加了自增项依赖,这会造成循环依赖问题:
即当model中state更新,useEffect会执行,去更新model的state,而后者更新又会造成useEffect再次执行,从而再次更新model的state...... 形成循环执行。
那是否可以不添加依赖呢?不添加依赖的话,又拿不到当前的值,难以实现自增。
破局:使用reducer
在上面的场景中,核心问题是使model的state自增1,那其实我们不用在useEffect中获取最新值,也可以实现,那就是使用reducer。
使用reducer时,useEffect中调用reducer不用添加model的state依赖,因此不会引起循环依赖,下面是一示例代码:
// 组件中
useEffect(() => {
dispatch({type: 'aaa/selfAddB'});
},[a,dispatch]);
// model中
{
state:{
a: 0,
b: 0,
}
reducers:{
selfAddB(state) {
return {
...state,
b: state.b + 1
};
},
},
...
}
这样,当a变化时,会调用reducer,使b自增1,但又不会引起循环执行问题。