📊 Capítulo 17: NgRx SignalStore

Especialização em Frontend com Angular

🗺️ A Arquitetura Funcional do NgRx SignalStore

flowchart TD
    STORE["signalStore(\n  withState({ produtos: [], carregando: false }),\n  withComputed((store) => ({ total: computed(...) })),\n  withMethods((store, api = inject(ApiService)) => ({ ... }))\n)"]
    --> COMP1["Componente A (Lê store.produtos() e store.total())"]
    --> COMP2["Componente B (Dispara store.adicionarProduto(item))"]
    COMP2 --> PATCH["patchState(store, (state) => ({ produtos: [...state.produtos, item] }))"]
    PATCH --> STORE

    style STORE fill:#ede7f6,stroke:#512da8,stroke-width:2px
    style COMP1 fill:#e8f5e9,stroke:#4caf50,stroke-width:2px
    style COMP2 fill:#fff3e0,stroke:#ff9800,stroke-width:2px
    style PATCH fill:#c8e6c9,stroke:#2e7d32,stroke-width:1.5px

🎯 Slide 1: Por Que o SignalStore é Revolucionário?

• Fim do Boilerplate do NgRx Clássico: Elimina dezenas de arquivos de Actions, Reducers, Selectors e Effects.

• Composição Funcional: Extensível via withState(), withComputed(), withMethods() e withHooks().

• Type-Safe & Tree-Shakable: Cada store é instanciada como serviço injetável padrão.

🎯 Slide 2: Exemplo de Store Declarativa

export const CarrinhoStore = signalStore(
  { providedIn: 'root' },
  withState({ itens: [] as ItemCarrinho[], desconto: 0 }),
  withComputed(({ itens, desconto }) => ({
    total: computed(() => itens().reduce((acc, i) => acc + i.preco, 0) - desconto()),
    quantidadeTotal: computed(() => itens().length),
  })),
  withMethods((store) => ({
    adicionar(item: ItemCarrinho) {
      patchState(store, (state) => ({ itens: [...state.itens, item] }));
    },
  }))
);

🎯 Slide 3: rxMethod para Operações Assíncronas

• Permite integrar operadores RxJS (debounceTime, switchMap) de forma nativa dentro dos métodos do SignalStore!