How do you keep algolia searchstate when unmounting some widgets?

Hi there,

My use case is for mobile web application.

Because mobile screen is small, it is not possible to show refinementlist widget and the searchresults all in the same page.

So, I show only the searchresults (hits) on the page and keep a button which onclick will open a dialog to help you refine the search using the refinementlist.

I am using redux in a controlled manner to apply searchstate. ie I am using searchstate and onsearchstatechange parameters on my instantsearch widget.

However, when I have closed the dialog - expecting the searchstate will be maintained and apply the refinement (as searchstate) to my instantsearch results - the searchstate is rather reset and the state which was changed by the refinementlist dialog is lost.

How can I maintain the state in the dialog created via the refinementlist and have applied to my instantsearch results?

If you need code sample to make it clear kindly let me know. It is a lot of code though as I have redux maintaining the searchstate and applying it via the onsearchstatechange prop.

Thanks.

BR
Alex

1 Like

Hi @alexofob!

With React InstantSearch, refinements are applied if the corresponding widget is mounted. Therefore, when you have a leave the dialog, the refinement disappear with it.

To keep that refinement, you’ll need to use the Virtual Widget concept. We explained the principle in our Getting Started React Native tutorial showing how you can use a modal. Check this: https://community.algolia.com/react-instantsearch/Getting_started_React_native.html#putting-our-filters-in-a-modal

You can also see this principle in action looking at our bigger React Native demo: https://github.com/algolia/react-instantsearch/tree/master/packages/react-instantsearch/examples/react-native

Both are for React Native, but the exact same pattern can be applied to a regular mobile web React app.

Let me know if this help.