I have a React/Redux/Router/Reselect app in which I am syncing some parts of the redux state with the URL. As an interim, hacky measure (I've only been learning how to write wepapps for about 6 months so I'm very much a n00b right now) I’m currently implementing that sync as follows:
A selector provides the parts of the state which deviate from the default (e.g. the tab has changed from default and the filter bar is open and one of the filters has been changed from the default):
export const getStateConfiguration = createSelector(
[getAllActiveFilters, getFilterBarVisible, getSelectedChart, getCurrentTab],
(filters, filterBarVisible, selectedChart, currentTab) => {
// inspect filters to create for deviations to default and return a config object with the stuff i need to write to the URI
return config;
}
);
A useEffect()
in App.js
is listening to that selector and when it changes calls a function in which JSON stringifies the selector's result to history
. (I get that history object from router
, because if I use uesHistory()
from, say, BrowserRouter
, I can't seem to escape infinite loop dependencies in useEffect()
.)
useEffect(() => {
// some lines omitted for brevity
writeToHistory(currentJsonConfig, stateConfiguration);
}, [dispatch, dbStatus, currentJsonConfig, decodedPathname, stateConfiguration]);
At app startup, another useEffect()
in App.js
calls a function which inspects the location and passes that to initialise the Redux reducers.
useEffect(() => {
// some lines omitted for brevity
dispatch(initialise(config));
}
}, [dispatch, dbStatus, currentJsonConfig, location]);
As you can probably already see, all of this performs horrifically. Every time a single thing in state changes, the selector has to examine the whole state model, reparse it, provide that to useEffect()
, which stringifies the whole thing again and writes it to history
.
Due to performance and the hacky nature of my bespoke solution, I now plan to refactor it all to use a 3rd party library(s) which does all this for me. I’ve looked at things like use-query-params (https://github.com/pbeshai/use-query-params) and connected-router (https://www.npmjs.com/package/connected-react-router) but I was wondering if anyone has any experience, guidance, or opinions they can offer on the subject, for the most efficient, straightforward and current solution to the problem.
If it helps, you can see my source code here. The most relevant files which contain my hacky solutions are probably /App.js
, /state/selectors/StateConfigurationSelector.js
and /HistoryWriter.js
. More generaly, if you do take a look and see any other n00b issues, do feel free to tell me!
Thanks :)