How best to clear redux values on react-router navigation?

[steinarb]

I have been using redux-first-history to hook react-router navigation into redux.

It let me do stuff like e.g. have an RTK listener listening for router navigation and close an alert when there is a react router navigation.

But redux-first-history fails when building with vite >=6.0.0. The last commit on react-first-history is 8 months old, so redux-first-history is starting to look abandoned.

I am therefore trying to remove my use of redux-first-history to be able to continue with newer versions of vite.

Most of the redux-first-history stuff I use, is straightforward to replace.

But this "listening for navigation and set redux value" usage was a tricky one to replace... I haven't figured out a way yet.

Any and all ideas are welcome!

Thanks!

[markerikson]

FWIW, it looks like redux-first-history's React Router integration is pretty trivial and limited to one (compiled) file - you could probably replace this with a few lines of code in your own codebase and see if you end up with only one React Router version bundled:

https://github.com/salvoravida/redux-first-history/blob/master/rr6/index.js

[steinarb]

Here is my first experiment: steinarb/handlereg@eda14f2

I put a "location detector" in one of the components, dispatching a redux action every time the location changes.

Not sure if this has any side effects...? (useEffect always leaves me somewhat confused...)

[steinarb]

I switched the listener to listen to the LOCATION_CHANGE redux action dispatched in the above change and the behaviour was identical to LOCATION_CHANGE from redux-first-history: steinarb/handlereg@fa38ac1

So if you, like me, have existing RTK listeners listening to LOCATION_CHANGE redux actions from redux-first-history, and wants to get rid of redux-first-history since it is abandoned, here is what you need to do:

1. Create a redux action LOCATION_CHANGE

   export const LOCATION_CHANGE = createAction('LOCATION_CHANGE');

2. In one of the existing components in the router tree add the following code (the rest of the component left out for simplicity)

   import React, { useEffect } from 'react';
   import { useDispatch } from 'react-redux';
   import { useLocation } from 'react-router';
   import { LOCATION_CHANGE } from '../actiontypes';
   
   export default function Home() {
       const dispatch = useDispatch();
       const location = useLocation();
       useEffect(() => {dispatch(LOCATION_CHANGE(location))}, [location]);
       return (<div/>)
   }

   (in my case it was two lines of additional import and two lines of code, since the Home component was already importing and using useDispatch())
3. Switch the listener to use locally defined LOCATION_CHANGE instead of the LOCATION_CHANGE from redux-first-history, ie change this

   import { LOCATION_CHANGE } from 'redux-first-history';

   to this

   import { LOCATION_CHANGE } from './actiontypes';