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

🧭 Navegação Pedagógica

🎯 Nível 1: Fundamentos

Problema 07.1 — Redutor Básico com Ações Tipadas (Discriminated Unions)

Contexto: Redutor Básico com Ações Tipadas (Discriminated Unions) no contexto de Estados Complexos com useReducer e Redutores Puros.

Requisitos de Execução:

  1. Criar cartReducer gerenciando ações ADD_ITEM, REMOVE_ITEM e CLEAR_CART com tipagem estrita.

Resultado Esperado

Redutor processou ação ADD_ITEM atualizando o total do carrinho de compras.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_07_1_SeuNome
  2. Envie na tarefa: Atividade Cap 07 - Estados Complexos com useReducer e Redutores Puros
🔑 Gabarito de Código & Solução Comentada 
// cartReducer.ts
export interface CartItem { id: number; nome: string; preco: number; qtd: number; }
export interface CartState { items: CartItem[]; total: number; }

export type CartAction =
  | { type: 'ADD_ITEM'; payload: CartItem }
  | { type: 'REMOVE_ITEM'; payload: { id: number } }
  | { type: 'CLEAR_CART' };

export function cartReducer(state: CartState, action: CartAction): CartState {
  switch (action.type) {
    case 'ADD_ITEM':
      return { ...state, items: [...state.items, action.payload] };
    case 'CLEAR_CART':
      return { items: [], total: 0 };
    default:
      return state;
  }
}

🔍 Nível 2: Prática

Problema 07.2 — Componente Carrinho de Compras com useReducer

Contexto: Componente Carrinho de Compras com useReducer no contexto de Estados Complexos com useReducer e Redutores Puros.

Requisitos de Execução:

  1. Conectar cartReducer ao componente de UI disparando ações com dispatch({ type: 'ADD_ITEM', payload }).

Resultado Esperado

Interface reativa refletindo adições e remoções do carrinho.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_07_2_SeuNome
  2. Envie na tarefa: Atividade Cap 07 - Estados Complexos com useReducer e Redutores Puros
🔑 Gabarito de Código & Solução Comentada 
// CartView.tsx
import React, { useReducer } from 'react';
import { cartReducer, CartState } from './cartReducer';

const initialState: CartState = { items: [], total: 0 };

export const CartView: React.FC = () => {
  const [state, dispatch] = useReducer(cartReducer, initialState);

  return (
    <div>
      <h4>Carrinho ({state.items.length} itens)</h4>
      <button onClick={() => dispatch({ type: 'CLEAR_CART' })}>Limpar</button>
    </div>
  );
};

⚡ Nível 3: Integração

Problema 07.3 — Máquina de Estados Finita para Requisições HTTP com useReducer

Contexto: Máquina de Estados Finita para Requisições HTTP com useReducer no contexto de Estados Complexos com useReducer e Redutores Puros.

Requisitos de Execução:

  1. Modelar estados IDLE, LOADING, SUCCESS e ERROR em redutor para data fetching sem estados inconsistentes.

Resultado Esperado

Transições de estado controladas: IDLE -> LOADING -> SUCCESS.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_07_3_SeuNome
  2. Envie na tarefa: Atividade Cap 07 - Estados Complexos com useReducer e Redutores Puros
🔑 Gabarito de Código & Solução Comentada 
// fetchReducer.ts
interface FetchState<T> { status: 'idle' | 'loading' | 'success' | 'error'; data?: T; error?: string; }
type FetchAction<T> =
  | { type: 'START' }
  | { type: 'RESOLVE'; payload: T }
  | { type: 'REJECT'; error: string };

export function fetchReducer<T>(state: FetchState<T>, action: FetchAction<T>): FetchState<T> {
  switch (action.type) {
    case 'START': return { status: 'loading' };
    case 'RESOLVE': return { status: 'success', data: action.payload };
    case 'REJECT': return { status: 'error', error: action.error };
    default: return state;
  }
}

🏆 Nível 4: Desafio Corporativo

Problema 07.4 — Lazy Initialization e Middleware de Logging em Redutores

Contexto: Lazy Initialization e Middleware de Logging em Redutores no contexto de Estados Complexos com useReducer e Redutores Puros.

Requisitos de Execução:

  1. Inicializar o estado do redutor recuperando dados do LocalStorage via terceiro argumento init(initialArg).

Resultado Esperado

Estado recuperado do LocalStorage na montagem inicial.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_07_4_SeuNome
  2. Envie na tarefa: Atividade Cap 07 - Estados Complexos com useReducer e Redutores Puros
🔑 Gabarito de Código & Solução Comentada 
// PersistentReducer.tsx
import React, { useReducer } from 'react';

function init(key: string) {
  const saved = localStorage.getItem(key);
  return saved ? JSON.parse(saved) : { count: 0 };
}

export const PersistentCounter = () => {
  const [state, dispatch] = useReducer((s: any, a: any) => s, 'counter_key', init);
  return <div>Contagem persistida: {state.count}</div>;
};
⬅️ Voltar ao Índice de Exercícios 📚 Sumário de Tópicos