Global state management

What I need -

  • easily add new data (don’t want to write a lot of boiler plate for each global property)
  • organize global properties into groups (like Redux reducers)
  • easily backup each global group into localStorage or backend database (Redis, user profile), and likewise restore/rehydrate each group from backup to current active state
  • It needs to be much more than just a cache for data responses. I don’t just want to cache data I receive from APIs (or GraphQL, whatever). If it includes functionality to manage API requests, that’s great. But I need to be able to easily modify and manipulate data after receiving the request before pushing it to global state. Apollo, SWR, React Query are great tools, but they are mostly for fetching data. They do a great job caching the fetched data, but that’s only a part of the complete state management solution I need. They are difficult to use as an alternative to Redux actions/reducers.

What I want -

  • Redux, Zustand, and others (I forget about Apollo/ReactQuery, but probably them too) - rerender the entire component (and all child components) when just one variable in it changes. That’s probably as good as I can expect, and might be the best way to do it anyway. I should just write smaller components instead of expecting some complicated solution from a library to manage my component local state. So in order to write smaller components, I’ll need the global state management to be very quick and easy, so I’m not afraid to divide up my React code into many small files.
  • Side effects (this might be bad practice, but is extremely useful!). I do like how Redux actions allow me to modify any part of the global state when any other part of it has changed. It’s useful, when one variable relies on another. Like when one variable changes (user inputs a search term), that triggers some backend API call which then triggers a different global state change.