Angular Academy · Aula

Entidades e funcionalidades personalizadas

Gerencie coleções com withEntities.

Entidades e funcionalidades personalizadas é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.

Gerenciando coleções

Listas de registros (tarefas, usuários e produtos) são tão comuns que o NgRx fornece withEntities para gerenciá-las com estado normalizado e funções atualizadoras prontas.

withEntities

withEntities armazena itens identificados por id em um entityMap, além de um array ids ordenado, e expõe um sinal computado entities com a lista.

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

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

Atualizadores de entidades

Use os auxiliares atualizadores com patchState: setAllEntities, addEntity, updateEntity, removeEntity. Eles mantêm o mapa e a ordem dos ids consistentes.

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

Carregando uma coleção

Substitua toda a coleção após uma busca com setAllEntities, que normaliza o array em um mapa e em ids.

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

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

idKey personalizado

Se o identificador da entidade não for id, passe um seletor. O armazenamento usará então esse campo como chave do mapa.

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

Derivando a partir de entidades

Combine withEntities com withComputed para criar modelos de leitura filtrados ou contabilizados sobre a coleção.

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

O que é uma funcionalidade personalizada

Uma funcionalidade personalizada é um conjunto reutilizável de estado, valores computados e métodos que você pode adicionar a vários armazenamentos. Crie uma com signalStoreFeature.

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

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

Reutilizando uma funcionalidade

Adicione sua funcionalidade personalizada a qualquer armazenamento, assim como faria com uma funcionalidade integrada. É assim que você compartilha preocupações transversais, como indicadores de carregamento ou paginação.

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

Funcionalidades com métodos

Uma funcionalidade personalizada pode incluir withMethods para expor comportamentos reutilizáveis, como auxiliares setLoading.

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

Componibilidade

Como as funcionalidades são apenas funções que retornam descritores de funcionalidades, você pode empilhar várias: withLoading(), withEntities() e também o estado específico do aplicativo, tudo mesclado em um armazenamento com tipagem forte.

Funcionalidades genéricas

Crie funcionalidades genéricas para funcionarem com diferentes tipos de entidades. Os parâmetros de tipo são propagados, para que os consumidores mantenham a segurança de tipos completa.

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

Verificação rápida

Verifique seus conhecimentos sobre entidades e funcionalidades.

Recapitulação

Você gerenciou coleções com withEntities (mapa normalizado, auxiliares de atualização e modelos de leitura derivados) e criou conjuntos reutilizáveis e genéricos de signalStoreFeature para compartilhar estado, valores computados e métodos entre armazenamentos.

Perguntas Frequentes

A aula “Entidades e funcionalidades personalizadas” é grátis?

Sim — o texto completo de “Entidades e funcionalidades personalizadas” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.

O que vou aprender em “Entidades e funcionalidades personalizadas”?

Gerencie coleções com withEntities. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Angular Academy?

Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Entidades e funcionalidades personalizadas”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Angular Academy?

Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Criando um SignalStore
Computed e métodos
rxMethod para operações assíncronas
Entidades e funcionalidades personalizadas

← Voltar para Angular Academy