Skip to content

Tracking issue: Global state management

Created by: umpox

Motivation

We want to move forward with a global state management solution to address some of the problems in RFC 391.

The two proposed approaches here are either useContextSelector or Zustand.

Our view is that both approaches are actually quite similar. There is an important issue to be solved that is to avoid multiple stores creating non-directional dependencies. This is a potential problem in both libraries and we'll need extra work to make sure we avoid this!

Plan

It's important we decide on a single approach so we can move forward with this, our proposed solution is:

Adapt Zustand to use a single global store, add better linting and improve documentation

How we will do this:

  • Update existing Zustand code to use a global store. This means moving part of this code to be a generic store, similar to how we create the Apollo cache..
  • Add an eslint rule to ban this kind of import: import create from 'zustand'. This is to enforce that we only allow creating a single global store. The one exception to this rule will be where we actually create the global store 😃
  • Add more documentation:
    • Managing different types of state:
      • Global state: shared across the application and should be stored in a single Zustand store.
      • 'Localized' state: Will typically be used for things like reusable components, and may change depending on some configuration, should be stored in a normal React context. Example: Setting a compact state for all FilteredConnection UI components in a tree.
      • GraphQL state: Data fetched from our backend API, should be stored in the Apollo cache.
      • Local state: Normal React state that should be isolated in components, e.g. useState
    • FAQS
      • How to test
      • Common problems
      • ... etc

Tracked issues

@unassigned

@fkling

Completed

@umpox

Completed

Legend

  • 👩 Customer issue
  • 🐛 Bug
  • 🧶 Technical debt
  • 🎩 Quality of life
  • 🛠️ Roadmap
  • 🕵️ Spike
  • 🔒 Security issue
  • 🙆 Stretch goal
  • :shipit: Pull Request