How does persist middleware work with URL and how to test it?

[pucheng-tan]

On this page 'Connect to state with URL': https://docs.pmnd.rs/zustand/guides/connect-to-state-with-url-hash. It shows a nice example of how to use persist middleware to store info within the URL. However, it does not describe how it works, especially I am confused about when removeItem would be triggered and how to test it. It would be nice if someone could provide me with some explanation or show me some code examples.

[dai-shi]

removeItem is called when clearStorage is called explicitly:

zustand/src/middleware/persist.ts

Lines 346 to 348 in 266e864

	clearStorage: () => {
	storage?.removeItem(options.name)
	},

I've never tried it, so can't help much.

[dbritto-dev]

The example is pretty clear about how works. The persist middleware works on any kind of storage (that can persist data). In this case we can use the URL to be more specific we can use URLSearchParams, through this we can serialize and deserialize whatever we want.

So we can test it, actually is pretty easy. Let's say that we have the next query string or search parameters (window.location.search)

• window.location.search: '?version=2&app=zustand&foo=bar'

We can parse them with URLSearchParams

• new URLSearchParams(window.location.search.slice(1))
• we can get version, app and foo using URLSearchParams.get() or URLSearchParams.getAll()
• We can delete foo using URLSearchParams.delete()

If we delete foo the window.location.search now is '?version=2&app=zustand'

So the best way to test it out is by checking window.location.search the example in the docs has all of that

[vogelino]

Hi! Great way to persist the state to the URL. Thx for that.

I have a question related to this. I'm using it in the context of a Next.js application. It supports changing the search parameters when using window.history.pushState as in the demo, however, it does not trigger a rerender on components that use useStore when navigating using the browser back button. The components using useSearchParams() do rerender, as the search parameters did change, but it seems as the state doesn't change in the store. Is there any way to force the store to reflect the changes when navigating via browser history?

I hope my description was clear.

Thank you!

[DavidRamsdale]

I am having the same problem did you find a solution to this @vogelino ?

[vogelino]

I am having the same problem did you find a solution to this @vogelino ?

Unfortunately no. I have move focus from this project so I haven't kept investigating but did not found a way to fix it.