WoodyLabBuild with UIMS

Guida · Lo stato

Le slice: stato con un indirizzo

Tre accordion in pagina, tre open. Senza uno scope si aprono e si chiudono insieme, e sembra un difetto del componente.

Dove siamo

Sai che lo stato è una mappa piatta condivisa. Alla fine di questo capitolo tre componenti uguali avranno ognuno il suo, senza collidere e restando raggiungibili dall’esterno.

Il gesto

Metti tre accordion nella stessa pagina. Aprine uno.

Guarda le chiavi nello stato: non c’è un open, ce ne sono tre, e ognuna porta davanti l’indirizzo del nodo.

// il uiState di un blocco, in Payload
{
  "nodo-42:open": true,
  "nodo-51:open": false,
  "nodo-77:open": false
}

Cos’è appena successo

La chiave è scopata: <nodo>:<nome>. Lo scoping è ciò che permette a tre componenti identici di avere ognuno il suo open senza pestarsi, e a un evento indirizzato di puntarne uno preciso.

Quale stato espone un tipo di blocco non lo decide il componente in privato: è dichiarato — nome, tipo, da quale campo prende il valore iniziale, quale evento lo cambia. Sta scritto dove chiunque può leggerlo, ed è quello che permette all’admin di mostrartelo e a un binding di puntarci.

Da qui la proprietà che conta: il wrapper di un componente con stato registra la propria slice nello store invece di tenersi uno stato React privato. Non è più chiuso, è indirizzabile.

Quando non funziona

Scrivi direttamente su open, senza scope. Nessuno dei tre accordion reagisce: quella chiave esiste, ma non è quella che stanno guardando.

È il motivo per cui uno stato «che non funziona» va guardato leggendo le chiavi vere, non quelle che ti aspetti.

Avanti

Sai dove sta lo stato e come si indirizza. Nel capitolo dopo ci metti la tua logica.

Le slice: stato con un indirizzo · WoodyLab