React挂钩，在卸载组件时，重置Redux数据

Question

应用程序中的每个页面都包含排序选择选项。有些页面具有预先选择的默认排序选项：ranking。但是，当我输入一个特定的组件并更改排序类型时，例如latest。之后，如果我导航到另一个特定页面，我必须将其重置为ranking。

下面是我的做法：

const Events = ({ history }) => {
const dispatch = useDispatch();
const { sorting } = useSelector(({ filters }) => filters);
useEffect(() => {
dispatch(getEvents(sorting));
return () => {
history.listen(location => {
if (location.pathname !== '/events') {
dispatch({ type: 'UPDATE_SORTING_TYPE', payload: 'ranking' });
}
});
};
}, [sorting]);
return (
<Wrapper>
{/* more jsx here */}
</Wrapper>
);
};
export default withRouter(Events);

这似乎工作得很好，然而，当我启动应用程序并转到这个页面组件时，我将排序类型更改为latest，我导航到另一个页面，侦听器不是第一次触发的，而是每隔一次我返回并重复这个过程，除了第一次

注意：在位置更改时，我无法重置减速器中的排序类型，如下所示：

case '@@router/LOCATION_CHANGE': {
return {
...state,
sorting: 'ranking',
};
}

因为并非所有页面都具有默认的排序类型ranking。如何在组件卸载前正确重置排序选项？

Answer 1

如果你使用react路由器，你可以使用useLocation来观察url的变化。

const location = useLocation()
useEffect(()=> {
// here you code
},[location]]

Answer 2

您仅在unMount上附加侦听器。第一次它不执行侦听器，而是在后续侦听器上执行。此外，您将为每次unMount该组件添加几个侦听器。

我想说，您应该将您的历史记录onMount附加到另一个useEffect上，添加到变量unlisten。然后返回unlisten以删除unMount:上的侦听器

useEffect(() => {
const unlisten = history.listen(location => {
if (location.pathname !== '/events') {
dispatch({ type: 'UPDATE_SORTING_TYPE', payload: 'ranking' });
}
});
return unlisten
}, []);