Stato derivato e selector con i tipi
Scriva funzioni selector tipizzate per lo stato calcolato.
Stato derivato e selector con i tipi è una lezione TypeScript Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento TypeScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso TypeScript Academy include 4 lezioni in totale.
Che cos'è lo stato derivato
Lo stato derivato è uno stato calcolato a partire da un altro stato, ad esempio filtrando un elenco o sommando dei valori. I selettori incapsulano questo calcolo e possono essere memoizzati per migliorare le prestazioni.
// Raw state
const users: User[] = [/* ... */];
// Derived state: active users only
const activeUsers = users.filter(u => u.isActive);Funzioni selettore tipizzate
Scriva funzioni selettore con tipi restituiti espliciti per documentare ciò che calcolano e impedire la deriva dei tipi.
import type { RootState } from "./store";
const selectActiveUsers = (state: RootState): User[] =>
state.users.filter((u) => u.isActive);
const selectUserCount = (state: RootState): number =>
state.users.length;reselect: selettori memoizzati
La libreria reselect (utilizzata da RTK) crea selettori memoizzati che ricalcolano il risultato solo quando cambiano i loro input.
import { createSelector } from "reselect";
const selectActiveUsers = createSelector(
(state: RootState) => state.users,
(users) => users.filter((u) => u.isActive)
);
// Return type inferred: User[]Selettori parametrizzati tipizzati
I selettori factory accettano argomenti e restituiscono un selettore: sono utili per cercare singole entità.
const selectUserById = (id: string) =>
createSelector(
(state: RootState) => state.users,
(users) => users.find((u) => u.id === id) ?? null
);
// Usage: const user = useAppSelector(selectUserById("123"));Selettori Zustand
In Zustand, passi un selettore tipizzato all'hook dello store per leggere solo la porzione necessaria.
const activeUsers = useUserStore((s) => s.users.filter(u => u.isActive));
// Inferred type: User[]Stato derivato in React con useMemo
Per lo stato derivato locale, utilizzi useMemo con annotazioni di tipo appropriate per memoizzare i valori calcolati nei componenti.
const sortedUsers = useMemo(
(): User[] => [...users].sort((a, b) => a.name.localeCompare(b.name)),
[users]
);Comporre i selettori
Costruisca selettori complessi componendo selettori più semplici: reselect gestisce la memoizzazione lungo tutta la catena.
const selectActiveUserNames = createSelector(
selectActiveUsers,
(users) => users.map((u) => u.name)
); // string[]Zustand sicuro dai tipi con immer per gli aggiornamenti derivati
Quando calcola aggiornamenti derivati, utilizzi immer per modificare uno stato draft: TypeScript garantisce che vengano toccate solo proprietà valide.
const useStore = create<AppStore>()(immer((set) => ({
users: [],
activeCount: 0,
setUsers: (users) =>
set((draft) => {
draft.users = users;
draft.activeCount = users.filter((u) => u.isActive).length;
}),
})));Inferenza del tipo restituito dai selettori
TypeScript inferisce i tipi restituiti dai selettori, ma le annotazioni esplicite migliorano la leggibilità e impediscono la comparsa accidentale di any nelle espressioni dinamiche.
// Inferred — may widen to any for complex expressions
const selectTotals = createSelector(
(s: RootState) => s.cart.items,
(items) => items.reduce((sum, i) => sum + i.price, 0) // inferred: number
);Testare i selettori
I selettori sono funzioni pure: li testi passando uno stato simulato e verificando il tipo e il valore dell'output.
test("selectActiveUsers", () => {
const state = { users: [{ id: "1", isActive: true }, { id: "2", isActive: false }] } as RootState;
expect(selectActiveUsers(state)).toHaveLength(1);
});Riepilogo: selettori tipizzati
Selettori tipizzati: scriva funzioni che ricevono RootState con tipi restituiti espliciti, utilizzi createSelector per la memoizzazione, componga i selettori per derivazioni complesse e li testi come funzioni pure.
Verifica rapida
Quale vantaggio offre createSelector rispetto a una semplice funzione selettore?
Cosa ha imparato
I selettori tipizzati ricevono RootState e restituiscono valori derivati con tipi precisi. Utilizzi createSelector per la memoizzazione, componga i selettori per la logica complessa e scriva selettori factory per cercare entità parametrizzate.
Domande Frequenti
La lezione «Stato derivato e selector con i tipi» è gratuita?
Sì — il testo completo di «Stato derivato e selector con i tipi» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso TypeScript Academy, passa a CoddyKit PRO. Il corso TypeScript Academy include 4 lezioni in totale.
Cosa imparerò in «Stato derivato e selector con i tipi»?
Scriva funzioni selector tipizzate per lo stato calcolato. Eserciti TypeScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare TypeScript Academy?
Non è richiesta alcuna esperienza precedente. TypeScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Stato derivato e selector con i tipi»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione TypeScript Academy?
Sì. Ogni lezione TypeScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Tipizzazione di slice e thunk di Redux Toolkit
- Pattern per la tipizzazione degli store Zustand
- XState: macchine a stati tipizzate
- Stato derivato e selector con i tipi