Angular Academy · Lezione

Entità e funzionalità personalizzate

Gestire raccolte con withEntities

Entità e funzionalità personalizzate è una lezione Angular 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 Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.

Gestire le raccolte

Gli elenchi di record (todo, utenti e prodotti) sono così comuni che NgRx offre withEntities per gestirli con uno stato normalizzato e funzioni di aggiornamento già pronte.

withEntities

withEntities memorizza gli elementi indicizzati per id in una entityMap insieme a un array ids ordinato ed espone un signal computed entities che rappresenta l’elenco.

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

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

Updater delle entità

Utilizzi gli helper di aggiornamento con patchState: setAllEntities, addEntity, updateEntity e removeEntity. Mantengono coerenti la mappa e l’ordine degli id.

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

Caricare una raccolta

Sostituisca l’intera raccolta dopo un caricamento con setAllEntities, che normalizza l’array nella mappa e nell’elenco degli id.

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

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

idKey personalizzato

Se l’identificatore dell’entità non è id, passi un selettore. Lo store indicizzerà quindi la mappa usando quel campo.

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

Derivare dalle entità

Combini withEntities con withComputed per creare modelli di lettura filtrati o conteggiati a partire dalla raccolta.

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

Che cos’è una feature personalizzata

Una feature personalizzata è un insieme riutilizzabile di stato, computed e metodi che può inserire in molti store. La crei con signalStoreFeature.

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

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

Riutilizzare una feature

Aggiunga la sua feature personalizzata a qualsiasi store proprio come una feature integrata. È così che si condividono aspetti trasversali come i flag di caricamento o la paginazione.

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

Feature con metodi

Una feature personalizzata può includere withMethods per esporre comportamenti riutilizzabili, come gli helper setLoading.

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

Componibilità

Poiché le feature sono semplicemente funzioni che restituiscono descrittori di feature, può combinarne molte: withLoading(), withEntities() e lo stato specifico dell’app, tutto unito in uno store fortemente tipizzato.

Feature generiche

Renda le funzionalità generiche in modo che funzionino con diversi tipi di entità. I parametri di tipo vengono propagati, così chi le utilizza mantiene la piena sicurezza dei tipi.

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

Controllo rapido

Verifichi le Sue conoscenze su entità e funzionalità.

Riepilogo

Ha gestito raccolte con withEntities (mappa normalizzata, funzioni di aggiornamento e modelli di lettura derivati) e ha creato bundle generici e riutilizzabili di signalStoreFeature per condividere stato, valori calcolati e metodi tra gli store.

Domande Frequenti

La lezione «Entità e funzionalità personalizzate» è gratuita?

Sì — il testo completo di «Entità e funzionalità personalizzate» è 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 Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.

Cosa imparerò in «Entità e funzionalità personalizzate»?

Gestire raccolte con withEntities Eserciti Angular 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 Angular Academy?

Non è richiesta alcuna esperienza precedente. Angular 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 «Entità e funzionalità personalizzate»?

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

Sì. Ogni lezione Angular 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

← Torna a Angular Academy