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

Question

Each of my pages in the app contains sorting select options. Some of the pages have a preselected default sorting option: ranking . However, when I enter one specific component and change the sorting type eg. latest . After if I navigate to another specific page, I have to reset it to ranking .

Here's how I do it bellow:

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);

This seemed to be working fine, however, when I start the application and go to this page component, I'm changing the sorting type to latest , I navigate to another page, the listener is not triggered the first time, but only every other time I go back and repeat this process, except the first time

Notice: I can't reset the sorting type in my reducer on location change, like this:

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

Because not all pages have default sorting type ranking . How to handle the correct way of resetting the sorting option before component unmounts?

Answer 1

if you use react-router you can use useLocation to watch url change.

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

Answer 2

You are attaching a listener only on unMount . This way the first time it doesn't execute the listener but executes on subsequent ones. Also, you would be adding several listeners, for every time you unMount that component.

I would say that you should attach your history onMount on another useEffect , adding to a variable unlisten . Then you would return unlisten to remove listener on unMount :

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

    return unlisten
  }, []);