Question

我有2个表组件，分别显示Org1和Org2中的用户列表。我将两个列表都保持在redix状态。

redux：

{
org1: [{}, ...],
org1Filters: {}
org2: [{}, ...],
org2Filters: {}
}

我的组件使用useEffect调用API并从两个组织中获取用户

function Component() {

useEffect(() => {
 getOrg1Users(org1Filters).
 then((result) => {
 dispatch(updateOrg1Users(result))
});
}, [org1Filters]);


useEffect(() => {
 getOrg2Users(org2Filters).
 then((result) => {
 dispatch(updateOrg2Users(result))
 });
}, [org2Filters]);

return(
<>
<Org1table/>
Org2Table/>
</>
);

}

因此，无论如何，每当Org1和Org2的过滤器发生变化时，我都希望API触发并获取用户列表。但是，当我更新org1过滤器时，会触发两个组织的API调用。

我认为这可能是由于过滤器更改时在redux状态下进行的更新（因为redux将在每次更新后返回一个新对象）。 useEffect正在比较对象实例而不是对象值。

我通过这样做解决了这个问题

const prevOrg2Filters = usePrevious(org2Filters);
useEffect(() => {
 if(!_isEqual(prevOrg2Filters, org2Filters)){
  getOrg2Users(org2Filters).
  then((result) => {
  dispatch(updateOrg2Users(result))
 });
}
}, [org2Filters]);

有人可以确认我的理解吗？有什么更好的方法吗？

Answer 1

当您在redux存储中更新状态时，您将克隆其余状态变量并更新所需的状态，结果是org2Filters的引用发生了变化，导致useEffect再次运行。

现在解决此问题的一种方法是usePrevious并比较先前值和当前值，这是一个非常好的解决方案

另一种解决方案是将org1Filters和org2Filters取出到单独的减速器中

combineReducers({
   org1Filters,
   org2Filters,
   filtersData,
});

这样做将确保在更新org1Filters或filtersData和ViceVersa时，org2Filters对象的引用不会更改。

每当redux状态发生其他变化时，都会执行具有redux状态和dep的useEffect

1 个答案: