État dérivé et sélecteurs avec des types
Écrivez des fonctions de sélection typées pour les états calculés
État dérivé et sélecteurs avec des types est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage TypeScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours TypeScript Academy comprend 4 leçons au total.
Qu’est-ce qu’un state dérivé ?
Un state dérivé est un state calculé à partir d’un autre state — par exemple en filtrant une liste ou en additionnant des valeurs. Les sélecteurs encapsulent ce calcul et peuvent être mémorisés pour améliorer les performances.
// Raw state
const users: User[] = [/* ... */];
// Derived state: active users only
const activeUsers = users.filter(u => u.isActive);Fonctions sélecteurs typées
Écrivez des fonctions sélecteurs avec des types de retour explicites afin de documenter ce qu’elles calculent et d’empêcher la dérive des types.
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 : sélecteurs mémorisés
La bibliothèque reselect (utilisée par RTK) crée des sélecteurs mémorisés qui ne recalculent leur résultat que lorsque leurs entrées changent.
import { createSelector } from "reselect";
const selectActiveUsers = createSelector(
(state: RootState) => state.users,
(users) => users.filter((u) => u.isActive)
);
// Return type inferred: User[]Sélecteurs paramétrés typés
Les sélecteurs fabriques acceptent des arguments et renvoient un sélecteur — ce qui est utile pour rechercher des entités individuellement.
const selectUserById = (id: string) =>
createSelector(
(state: RootState) => state.users,
(users) => users.find((u) => u.id === id) ?? null
);
// Usage: const user = useAppSelector(selectUserById("123"));Sélecteurs Zustand
Avec Zustand, transmettez un sélecteur typé au hook du store pour ne lire que la partie nécessaire.
const activeUsers = useUserStore((s) => s.users.filter(u => u.isActive));
// Inferred type: User[]State dérivé dans React avec useMemo
Pour un state dérivé local, utilisez useMemo avec des annotations de types appropriées afin de mémoriser les valeurs calculées dans les composants.
const sortedUsers = useMemo(
(): User[] => [...users].sort((a, b) => a.name.localeCompare(b.name)),
[users]
);Composer des sélecteurs
Construisez des sélecteurs complexes en composant des sélecteurs plus simples — reselect gère la mémorisation tout au long de la chaîne.
const selectActiveUserNames = createSelector(
selectActiveUsers,
(users) => users.map((u) => u.name)
); // string[]Zustand sûr du point de vue des types avec immer pour les mises à jour dérivées
Lors du calcul de mises à jour dérivées, utilisez immer pour modifier un state brouillon — TypeScript garantit que seules des propriétés valides sont modifiées.
const useStore = create<AppStore>()(immer((set) => ({
users: [],
activeCount: 0,
setUsers: (users) =>
set((draft) => {
draft.users = users;
draft.activeCount = users.filter((u) => u.isActive).length;
}),
})));Inférence du type de retour des sélecteurs
TypeScript déduit les types de retour des sélecteurs, mais des annotations explicites améliorent la lisibilité et empêchent l’apparition accidentelle de any dans les expressions dynamiques.
// 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
);Tester les sélecteurs
Les sélecteurs sont des fonctions pures : testez-les en leur transmettant un state simulé et en vérifiant le type et la valeur de sortie.
test("selectActiveUsers", () => {
const state = { users: [{ id: "1", isActive: true }, { id: "2", isActive: false }] } as RootState;
expect(selectActiveUsers(state)).toHaveLength(1);
});Récapitulatif : sélecteurs typés
Sélecteurs typés : écrivez des fonctions qui prennent RootState avec des types de retour explicites, utilisez createSelector pour la mémorisation, composez des sélecteurs pour les dérivations complexes et testez-les comme des fonctions pures.
Vérification rapide
Quel avantage createSelector offre-t-il par rapport à une simple fonction sélecteur ?
Ce que vous avez appris
Les sélecteurs typés prennent RootState et renvoient des valeurs dérivées dont le type est défini avec précision. Utilisez createSelector pour la mémorisation, composez des sélecteurs pour les traitements complexes et écrivez des sélecteurs fabriques pour les recherches d’entités paramétrées.
Apprends TypeScript avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 101
- Leçons
- 352
Questions Fréquemment Posées
La leçon « État dérivé et sélecteurs avec des types » est-elle gratuite ?
Oui — le texte complet de « État dérivé et sélecteurs avec des types » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours TypeScript Academy, passe à CoddyKit PRO. Le cours TypeScript Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « État dérivé et sélecteurs avec des types » ?
Écrivez des fonctions de sélection typées pour les états calculés Tu pratiques TypeScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer TypeScript Academy ?
Aucune expérience préalable n'est requise. TypeScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « État dérivé et sélecteurs avec des types » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon TypeScript Academy ?
Oui. Chaque leçon TypeScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Typer les slices et thunks de Redux Toolkit
- Motifs de typage des magasins Zustand
- XState : machines à états typées
- État dérivé et sélecteurs avec des types