0Pricing
TypeScript Academy · Lección

Estado derivado y selectores con tipos

Escriba funciones selector tipadas para el estado calculado.

Estado derivado y selectores con tipos es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de TypeScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de TypeScript Academy incluye 4 lecciones en total.

¿Qué es el estado derivado?

El estado derivado es un estado calculado a partir de otro estado, como filtrar una lista o sumar valores. Los selectores encapsulan este cálculo y se pueden memorizar para mejorar el rendimiento.

// Raw state
const users: User[] = [/* ... */];
// Derived state: active users only
const activeUsers = users.filter(u => u.isActive);

Funciones selectoras tipadas

Escriba funciones selectoras con tipos de retorno explícitos para documentar lo que calculan y evitar que los tipos se desvíen.

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: selectores memorizados

La biblioteca reselect (utilizada por RTK) crea selectores memorizados que solo vuelven a calcularse cuando cambian sus entradas.

import { createSelector } from "reselect";

const selectActiveUsers = createSelector(
  (state: RootState) => state.users,
  (users) => users.filter((u) => u.isActive)
);
// Return type inferred: User[]

Selectores parametrizados tipados

Los selectores de fábrica aceptan argumentos y devuelven un selector; son útiles para buscar entidades individuales.

const selectUserById = (id: string) =>
  createSelector(
    (state: RootState) => state.users,
    (users) => users.find((u) => u.id === id) ?? null
  );

// Usage: const user = useAppSelector(selectUserById("123"));

Selectores de Zustand

En Zustand, pase un selector tipado al hook del store para leer únicamente la parte necesaria.

const activeUsers = useUserStore((s) => s.users.filter(u => u.isActive));
// Inferred type: User[]

Estado derivado en React con useMemo

Para el estado derivado local, use useMemo con las anotaciones de tipo adecuadas para memorizar los valores calculados en los componentes.

const sortedUsers = useMemo(
  (): User[] => [...users].sort((a, b) => a.name.localeCompare(b.name)),
  [users]
);

Componer selectores

Construya selectores complejos componiendo otros más sencillos; reselect gestiona la memorización en toda la cadena.

const selectActiveUserNames = createSelector(
  selectActiveUsers,
  (users) => users.map((u) => u.name)
); // string[]

Zustand seguro para los tipos con immer para actualizaciones derivadas

Al calcular actualizaciones derivadas, use immer para modificar un estado draft; TypeScript garantiza que solo se toquen propiedades válidas.

const useStore = create<AppStore>()(immer((set) => ({
  users: [],
  activeCount: 0,
  setUsers: (users) =>
    set((draft) => {
      draft.users = users;
      draft.activeCount = users.filter((u) => u.isActive).length;
    }),
})));

Inferencia del tipo de retorno de los selectores

TypeScript infiere los tipos de retorno a partir de los selectores, pero las anotaciones explícitas mejoran la legibilidad y evitan que aparezca accidentalmente any en expresiones dinámicas.

// 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
);

Probar selectores

Los selectores son funciones puras: pruébelos pasando un estado simulado y comprobando el tipo y el valor de salida.

test("selectActiveUsers", () => {
  const state = { users: [{ id: "1", isActive: true }, { id: "2", isActive: false }] } as RootState;
  expect(selectActiveUsers(state)).toHaveLength(1);
});

Recapitulación: selectores tipados

Selectores tipados: escriba funciones que reciban RootState con tipos de retorno explícitos, use createSelector para la memorización, componga selectores para derivaciones complejas y pruébelos como funciones puras.

Comprobación rápida

¿Qué ventaja ofrece createSelector frente a una función selectora sencilla?

Lo que ha aprendido

Los selectores tipados reciben RootState y devuelven valores derivados con tipos precisos. Use createSelector para la memorización, componga selectores para la lógica compleja y escriba selectores de fábrica para búsquedas de entidades parametrizadas.

Preguntas frecuentes

¿La lección «Estado derivado y selectores con tipos» es gratis?

Sí — el texto completo de «Estado derivado y selectores con tipos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de TypeScript Academy, actualiza a CoddyKit PRO. El curso de TypeScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Estado derivado y selectores con tipos»?

Escriba funciones selector tipadas para el estado calculado. Practicas TypeScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar TypeScript Academy?

No se requiere experiencia previa. TypeScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Estado derivado y selectores con tipos»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de TypeScript Academy?

Sí. Cada lección de TypeScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Tipado de slices y thunks de Redux Toolkit
  2. Patrones de tipado de stores de Zustand
  3. XState: máquinas de estados tipadas
  4. Estado derivado y selectores con tipos
← Volver a TypeScript Academy