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";
 
export const CustomerStore = signalStore(
  withState({
    customers: [],
    loading: false,
    search: "",
  })
);

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.

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.

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 de Entrevista