React hooks，卸载组件时，重置Redux数据

Question

我在应用程序中的每个页面都包含排序 select 选项。 一些页面有一个预选的默认排序选项： 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);

这似乎工作正常，但是，当我启动应用程序和 go 到这个页面组件时，我将排序类型更改为latest ，我导航到另一个页面，侦听器不是第一次触发，而是每隔一个触发时间我 go 回来并重复这个过程，除了第一次

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

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

因为不是所有的页面都有默认的排序类型ranking 。 如何在组件卸载之前处理重置排序选项的正确方法？

Answer 1

如果你使用 react-router 你可以使用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
  }, []);