0Pricing
Angular Academy · Lección

Entidades y funcionalidades personalizadas

Gestionar colecciones con withEntities

Entidades y funcionalidades personalizadas es una lección gratuita de Angular 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 Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.

Gestionar colecciones

Las listas de registros (tareas, usuarios o productos) son tan habituales que NgRx proporciona withEntities para gestionarlas con un estado normalizado y funciones actualizadoras listas para usar.

withEntities

withEntities almacena los elementos indexados por id en un entityMap, junto con un array ids ordenado, y expone una señal computed entities con la lista.

import { withEntities } from '@ngrx/signals/entities';

export const TodoStore = signalStore(
  withEntities<Todo>()
);
// store.entities() -> Todo[]

Actualizadores de entidades

Use helpers actualizadores con patchState: setAllEntities, addEntity, updateEntity y removeEntity. Estos mantienen coherentes el mapa y el orden de los identificadores.

import { addEntity, removeEntity, updateEntity } from '@ngrx/signals/entities';

patchState(store, addEntity({ id: '1', title: 'A', done: false }));
patchState(store, updateEntity({ id: '1', changes: { done: true } }));
patchState(store, removeEntity('1'));

Cargar una colección

Sustituya toda la colección después de obtenerla con setAllEntities, que normaliza el array en el mapa y los identificadores.

import { setAllEntities } from '@ngrx/signals/entities';

load: rxMethod<void>(pipe(
  switchMap(() => api.getTodos()),
  tap(todos => patchState(store, setAllEntities(todos)))
))

Custom idKey

Si el identificador de su entidad no es id, pase un selector. El store usará entonces ese campo como clave del mapa.

withEntities<User>(); // expects user.id
// custom key:
patchState(store, addEntity(user, { selectId: (u: User) => u.uuid }));

Derivar valores de las entidades

Combine withEntities con withComputed para crear modelos de lectura filtrados o basados en recuentos a partir de la colección.

withComputed(({ entities }) => ({
  remaining: computed(() => entities().filter(t => !t.done).length)
}))

Qué es una feature personalizada

Una feature personalizada es un conjunto reutilizable de estado, valores computed y métodos que puede incorporar a varios stores. Créela con signalStoreFeature.

import { signalStoreFeature, withState } from '@ngrx/signals';

export function withLoading() {
  return signalStoreFeature(
    withState({ loading: false })
  );
}

Reutilizar una feature

Añada su feature personalizada a cualquier store igual que una feature integrada. Así puede compartir aspectos transversales, como indicadores de carga o paginación.

export const TodoStore = signalStore(
  withLoading(),
  withEntities<Todo>()
);
// store.loading() now exists

Features con métodos

Una feature personalizada puede incluir withMethods para exponer comportamiento reutilizable, como helpers setLoading.

export function withLoading() {
  return signalStoreFeature(
    withState({ loading: false }),
    withMethods((store) => ({
      setLoading(loading: boolean) { patchState(store, { loading }); }
    }))
  );
}

Componibilidad

Como las features son simplemente funciones que devuelven descriptores de features, puede apilar muchas: withLoading(), withEntities() y estado específico de la aplicación, todo combinado en un único store con tipado sólido.

Features genéricas

Haga que las funcionalidades sean genéricas para trabajar con distintos tipos de entidades. Los parámetros de tipo se propagan para que quienes las consuman mantengan toda la seguridad de tipos.

export function withSelected<T>() {
  return signalStoreFeature(
    withState({ selected: null as T | null })
  );
}

Comprobación rápida

Compruebe sus conocimientos sobre entidades y funcionalidades.

Resumen

Gestionó colecciones con withEntities (mapa normalizado, utilidades para actualizar y modelos de lectura derivados) y creó paquetes genéricos y reutilizables de signalStoreFeature para compartir estado, valores calculados y métodos entre distintos stores.

Preguntas frecuentes

¿La lección «Entidades y funcionalidades personalizadas» es gratis?

Sí — el texto completo de «Entidades y funcionalidades personalizadas» 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 Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Entidades y funcionalidades personalizadas»?

Gestionar colecciones con withEntities Practicas Angular 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 Angular Academy?

No se requiere experiencia previa. Angular 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 «Entidades y funcionalidades personalizadas»?

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 Angular Academy?

Sí. Cada lección de Angular 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. Crear un SignalStore
  2. Computed y métodos
  3. rxMethod para trabajo asíncrono
  4. Entidades y funcionalidades personalizadas
← Volver a Angular Academy