State Management in React

Why?

(N.B. Do check your component structure before despairing)

Multiple Providers & Consumers (needed by functional components)

(Which gave us useReducer)

There is a store where data is held
- (It is often broken down into parts/slices)
It is passed using context (provider)
Components hook into it to get
- data (using selectors)
- CRUD access (using action creators)
  - Async (lots of options: Sagas, Observables): Thunks
The store has a reducer which controls how it updates when it receives...
Actions - signals sent to the reducer to effect changes to a store
- Usually a simple object with
  - type: required
  - payload (name convention): data needed to do the update
Dispatch - the way we send them

Recoil
- Facebook's newer internal state management solution
- Divide state into tiny atoms to minimise re-renders
  - each item has its own state (atom family)
- docs
Zustand
- a more modern lightweight version of Redux
- docs
  - Overmind (zustand + immer)
- demo repo
Jotai
- Lightweight simpler version of Recoil
- docs
- demo repo

There is a store where data is held
- (It is often broken down into parts/slices)
~~It is passed using context (provider)~~ (can be used outside react!)
Components hook into it to get
- data (using selectors)
- CRUD access (using action creators)
  - Async (handled in store creation, see last link)
The store has a reducer which controls how it updates when it receives...
Actions - signals sent to the reducer to effect changes to a store
- Usually a simple object with
  - type (naming convention not required)
  - payload (naming convention not required)
Dispatch - the way we send them

State is broken up into atoms
It is passed using context (provider) (cannot be used outside react!)
Components hook into it to get
State is managed atomically and directly, so the reducer/action pattern is not implemented
- You tend to use it like useState
- You can use immer with it (it has MANY simple plugins)
- You can still use the redux pattern if you want
When you are dynamically creating atoms (e.g. one per car) then you can use AtomFamilies (like recoil) then CRUD the one you want
- It's a bit weird because you have one array that holds the ids and the family which holds the data and you CRUD using that id