Spec Frontend Com Angular • Trilha Progressiva em 4 Níveis

🎯 Nível 1: Fundamentos

Problema 17.1 — Criação de Store com signalStore() e withState()

Contexto: Criação de Store com signalStore() e withState() no contexto de Gerenciamento de Estado com NgRx SignalStore.

Requisitos de Execução:

  1. Criar store ProdutosStore definindo estado inicial com withState({ itens: [], loading: false }).

Resultado Esperado

NgRx SignalStore declarada com Signals nativos integrados.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_17_1_SeuNome
  2. Envie na tarefa: Atividade Cap 17 - Gerenciamento de Estado com NgRx SignalStore
🔑 Gabarito de Código & Solução Comentada 
// produtos.store.ts
import { signalStore, withState, withMethods, patchState } from '@ngrx/signals';

interface ProdutosState { itens: string[]; loading: boolean; }
const initialState: ProdutosState = { itens: [], loading: false };

export const ProdutosStore = signalStore(
  { providedIn: 'root' },
  withState(initialState),
  withMethods((store) => ({
    adicionar(item: string) {
      patchState(store, { itens: [...store.itens(), item] });
    }
  }))
);

🔍 Nível 2: Prática

Problema 17.2 — Computed Signals na Store com withComputed()

Contexto: Computed Signals na Store com withComputed() no contexto de Gerenciamento de Estado com NgRx SignalStore.

Requisitos de Execução:

  1. Adicionar seletores computados à store com withComputed(({ itens }) => ({ total: computed(() => itens().length) })).

Resultado Esperado

Propriedade computada exposta diretamente na interface da store.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_17_2_SeuNome
  2. Envie na tarefa: Atividade Cap 17 - Gerenciamento de Estado com NgRx SignalStore
🔑 Gabarito de Código & Solução Comentada 
// store-computed.ts
import { computed } from '@angular/core';
import { withComputed } from '@ngrx/signals';

export const withItensStats = withComputed(({ itens }: any) => ({
  totalItens: computed(() => itens().length),
  temItens: computed(() => itens().length > 0)
}));

⚡ Nível 3: Integração

Problema 17.3 — Ações Assíncronas com rxMethod e Pipe de Conexão HTTP

Contexto: Ações Assíncronas com rxMethod e Pipe de Conexão HTTP no contexto de Gerenciamento de Estado com NgRx SignalStore.

Requisitos de Execução:

  1. Implementar método de busca assíncrono com rxMethod<void>(pipe(switchMap(...))).

Resultado Esperado

Carregamento assíncrono gerenciado via stream reativa na SignalStore.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_17_3_SeuNome
  2. Envie na tarefa: Atividade Cap 17 - Gerenciamento de Estado com NgRx SignalStore
🔑 Gabarito de Código & Solução Comentada 
// store-async.ts
import { rxMethod } from '@ngrx/signals/rxjs-interop';
import { pipe, switchMap, tap } from 'rxjs';

export const withLoadProdutos = withMethods((store: any) => ({
  carregar: rxMethod<void>(
    pipe(
      tap(() => patchState(store, { loading: true })),
      switchMap(() => of(['Item 1', 'Item 2'])),
      tap((itens) => patchState(store, { itens, loading: false }))
    )
  )
}));

🏆 Nível 4: Desafio Corporativo

Problema 17.4 — Plugins Customizados e Persistência de SignalStore com withHooks

Contexto: Plugins Customizados e Persistência de SignalStore com withHooks no contexto de Gerenciamento de Estado com NgRx SignalStore.

Requisitos de Execução:

  1. Salvar estado no LocalStorage no hook onInit e onDestroy da store.

Resultado Esperado

Ciclo de vida e persistência de estado configurados na SignalStore.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_17_4_SeuNome
  2. Envie na tarefa: Atividade Cap 17 - Gerenciamento de Estado com NgRx SignalStore
🔑 Gabarito de Código & Solução Comentada 
// store-hooks.ts
import { withHooks } from '@ngrx/signals';

export const withStoragePersistence = withHooks({
  onInit(store: any) {
    console.log('SignalStore inicializada:', store.itens());
  },
  onDestroy() {
    console.log('SignalStore descartada.');
  }
});