Example of integration with other "external" state managers (Zustand, Jotai, Valtio, Redux, etc)

[isBatak]

Is there already any examples of integrations with Zustand or similar external state managers?

integration with other "external" state managers (Zustand, Jotai, Valtio, Redux, etc)
#375

cc @franky47

[franky47]

Thanks for opening this discussion!

There aren't any examples yet, I started experimenting with Jotai (which has an atom that reacts to URL changes, but isn't type-safe), and overall it feels like the path to integration could be:

1. A method for reading & parsing the search params as a one-off thing
2. A way to know when search params have been updated, to recompute any store items that may depend upon them.

Jotai has this reactivity concept with Atoms, but in traditional stores like Zustand & Redux, I'm not sure how that would look for computed states that depend on external reactivity sources.

Some concrete examples of external state management usage that depends on search params would be great to have a better understanding on how to compose them with nuqs.

[isBatak]

Both options, 1 and 2, would be a great addition to the library. They will allow users to manually connect external libraries like Zustand to the query state.

Zustand has an example that describes how to persist external state in query search parameters: Zustand URL Parameters Example.

Regarding Zustand's reactivity, you can always manually update the state like this: useFishStore.getState().increaseFishes().

Here is my example of external state management use-case:

1. The user clicks on an item, the app saves it to the Zustand store, which persists it to LocalStorage, and we set it as the active item. Currently, we are not saving this information in the URL, but we want to do it using nuqs.
2. If the user returns to the same page, we read from LocalStorage and set the default Zustand value.
3. The third case is when we want to redirect the user from another page to a specific "active" item. We want to transfer this information via a URL query parameter, and this is where nuqs comes into play.

It's also acceptable if in the 1. step we update the URL search param.

[leedia-tech]

A Zustand example would be very useful

[franky47]

Do you have a use-case in mind?

[flaviolivolsi]

Zustand suggests this method to sync the state with the URL, which works well but the outcome is quite ugly unfortunately. It would be nice to use the nuqs way with Zustand