Guida · Lo stato
I reducer del progetto
Il motore sta nel pacchetto, quello che succede sta da te. È la riga di confine più netta del sistema, ed è deliberata.
Dove siamo
Sai leggere e scrivere lo stato con gli eventi che il pacchetto porta. Alla fine di questo capitolo avrai una regola tua, scritta in un punto solo.
Il gesto
Apri src/app-state.ts. C’è una mappa da nome ad azione.
Aggiungi una voce. Riceve lo stato e il payload, restituisce un elenco di scritture.
Nient’altro: la registrazione la fa il merge già presente.
// src/app-state.ts — i reducer che il progetto passa al provider
ACTIVATE_SECTION: (s, p) => {
const next = s.activeSectionId === p.id ? null : p.id
return [
{ key: 'activeSectionId', value: next },
{ key: 'activations', value: (s.activations || 0) + 1 },
]
}Cos’è appena successo
Un reducer riceve lo stato corrente e un payload, e restituisce le scritture da fare. Non tocca il DOM, non chiama niente, non decide quando viene invocato: descrive una transizione.
Per questo la condizione — il ri-clic che deseleziona, nell’esempio sopra — sta qui e non nell’effetto. Un effetto che decide è una regola nascosta in un posto dove nessuno la cerca; un reducer che decide è una regola in un file che si legge tutto in una volta.
È anche la ragione per cui la stessa transizione può essere innescata da un clic, da un evento, o da un test, e comportarsi allo stesso modo: chi la scatena non fa parte della definizione.
I tre che porta il pacchetto
export const defaultReducers: Record<string, Reducer> = {
SET: (_s, p) => [{ key: k(p), value: p.value }],
TOGGLE: (s, p) => [{ key: k(p), value: !s[k(p)] }],
MERGE: (s, p) => [{ key: k(p), value: { ...(s[k(p)] || {}), ...p.value } }],
}Il tuo, accanto ai loro
<UIStateProvider reducers={{ ...defaultReducers, ACTIVATE_SECTION }}>Quando non funziona
Metti la logica in un effetto e lascia il reducer che registra soltanto. Funziona — e da quel momento la stessa domanda ha due risposte in due file diversi.
Non è un errore che qualcosa segnala. È il tipo di scelta che si paga quando qualcun altro cerca dove sta la regola.
Avanti
Sai cambiare lo stato. Nel capitolo dopo lo colleghi a quello che si vede.