We are using react-connected-router, and in our react page components, we fetch state from the server, and dispatch actions to update the Redux state (we are just using hooks, no thunks nor saga middleware).
However, when we use the redux devtools for time travel debugging, the component will dispatch actions again when we rewind to the corresponding state...
I don't want to dispatch new actions when doing time travel debugging.
To be honest, I never want to do anything but rendering in my components, I typically do async fetches in event handlers (like click), but this approach doesn't work with React Router. Ideally when the browser history is changed by the user, some event should be fired, and async fetches should be done by handling that event, and not when rendering the page component, but I can't find documentation of how to do that.
My general question is, how does one write code that plays nicely with the devtools time travel debugger, so that new actions are not dispatched when just replaying state?
As far as I understand, middleware like Redux thunk or saga doesn't solve this problem either, unless the devtools would completely ignore Redux thunks being dispatched when doing time travel debugging. Maybe this is already the case, and I should just use these middlewares
