0

I currently have this piece of code:

const handleClick = async () => {
    dispatch(resetFilters());
    if (router.pathname !== '/') {
        await router.push('/');
    }
};

Where resetFilters() is a function to reset all the state in a slice. My problem is that wherever I place this function (before or after the reroute), it will cause data to be fetched twice (since what data is fetched depends on the state).

  • If I place it before, I fetch data based on the reset state on the page I'm rerouting away from (which I won't use)
  • If I place it after, I fetch data based on the old state on the page I'm rerouting to, which then has to be fetched again with the reset state.

I saw that react-router-redux has a LOCATION_CHANGE action which seems to solve my problem. Is there an equivalent version for next-router?

I.e. I need something which allows me to update redux state and redirect with next-router in an atomic step.

Jorgen
  • 93
  • 1
  • 8

0 Answers0