Skip to content

Use global Zustand store for shared application state

Administrator requested to merge fkling/26656-global-zustand-store into main

Created by: fkling

We are evaluting how to store shared application state and decided to use Zustand with a single global store via React context. This PR migrates the existing query state store to a global one.

Please consider this PR as an initial/suggested attempt. Everything is up for discussion. I just tried to find a solution that works.

With this approach...

  • I'm still separating out the query state related store logic into a separate file, I think it's more maintainable this way.
  • I preserved the existing useNavbarQueryState API, primarily to show that components don't have to be affected if the actual storage implementation changes. I think this is a good thing but maybe this defeats the whole purpose of having a global store.
    • Switched to using useGlobalStore everywhere.
  • I'm not happy that I had to update the tests. If we go the global store route we should probably provide a default wrapper component that provides all the contexts. These cases are actually OK because all those components are actually accessing the query state. I'm more concerned about the case where some component is contained in various subtrees of other components, and the component is now updated to use global/shared state. Now the tests of all the other components would have to be updated and that is (a) annoying to do and (b) somehow violates separation of concerns.
    • Not an issue if we use the store directly and not via context. I added a Jest mock that resets the store after every test.

Merge request reports

Loading