Sync queryParameters with Redux state and react router for function components

I'm looking for best practices to integrate the following stack

• React functional components
• Redux state
• Query parameters from URL

Basically I have got a search page with a complex filter component that is taking care of the filtering possibilities on the page. These filters are composed of dropdowns and checkboxes. If a filter is selected/deselected, I keep their states via action/event dispatcher/reducer etc.. Once the button submits is clicked there is an async HTTP call to the API, which will display the appropriate results on the page

Everything is working very well for now.

The tricky part is that I want to be able to share these filtered searches via an URL. I thought the best would to update the URL with query parameters. Such as /search?filter1=ok&filter2=true

Once the user entered the URL, the filter components would read the query parameters and update the state. But how can the state append/remove URL query parameters based on the user's actions?

I'm just looking for not overly complex solutions, using if possible the ability of my current dependency (shall I use hooks?)

I found various solutions but mostly based on Container components, where I'm trying to stick to functional components with hooks.

Thanks in advance for your tips, ideas.

Anselme

from Sync queryParameters with Redux state and react router for function components