Angular Fundamentals - Signal Store

Introdução

Com a chegada dos Signals, o Angular passou a oferecer uma nova forma de gerenciar estado.

O Signal Store, disponibilizado pelo NgRx, surge como uma alternativa moderna para gerenciamento de estado compartilhado, aproveitando toda a reatividade dos Signals.

O que é Signal Store?

Qual problema ela resolve?

Imagine uma tela composta por:

CustomerPage
├── SearchComponent
├── FiltersComponent
├── CustomerTableComponent
├── PaginationComponent
└── LoadingIndicatorComponent

Todos esses componentes precisam compartilhar:

- Lista de clientes
- Filtros
- Estado de carregamento
- Paginação

Sem uma Store, o estado pode acabar sendo propagado através de Inputs e Outputs.

Com Signal Store, todos os componentes acessam a mesma fonte de verdade.

Criando uma Store

Exemplo simples:

import { signalStore, withState } from "@ngrx/signals";
 
interface CustomerState {
  customers: Customer[];
  loading: boolean;
  search: string;
}
 
const initialState: CustomerState = {
  customers: [],
  loading: false,
  search: "",
};
 
export const CustomerStore = signalStore(withState(initialState));

Agora a Store passa a possuir estado reativo compartilhado.

Atualizando Estado

Podemos alterar informações utilizando patchState.

import { patchState } from "@ngrx/signals";
 
patchState(store, {
  loading: true,
});

Atualizando um valor:

patchState(store, {
  search: "André",
});

Computed State

Assim como Signals normais, podemos derivar valores.

import { computed } from "@angular/core";
import { withComputed } from "@ngrx/signals";
 
withComputed((store) => ({
  totalCustomers: computed(() => store.customers().length),
}));

O valor será recalculado automaticamente quando a lista mudar.

Métodos

Também podemos encapsular regras de negócio.

import { patchState, withMethods } from "@ngrx/signals";
 
withMethods((store) => ({
  setLoading() {
    patchState(store, {
      loading: true,
    });
  },
 
  clearLoading() {
    patchState(store, {
      loading: false,
    });
  },
}));

Isso ajuda a evitar alterações espalhadas pela aplicação.

Integração com HTTP

Um cenário comum:

loadCustomers() {
  this.http
    .get<Customer[]>("/api/customers")
    .subscribe(customers => {
      patchState(this.store, {
        customers
      });
    });
}

O estado fica centralizado e os componentes apenas consomem os Signals.

Signal Store vs Service

Signal Store vs NgRx Store Tradicional

Quando usar?

Quando NÃO usar?

Caso real de entrevista

Imagine:

CustomerPage
├── Search
├── Filters
├── Table
├── Pagination
└── Loading

Todos precisam reagir às mudanças de busca.

Uma abordagem moderna seria:

CustomerStore
├── customers
├── search
├── loading
├── pagination
└── filters

Todos os componentes observam a mesma Store.

Perguntas técnicas

Conclusão

Signal Store centraliza estado compartilhado com a reatividade dos Signals e pode reduzir boilerplate. A comparação com o NgRx tradicional depende da complexidade e das necessidades de cada aplicação.