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

🧭 Navegação Pedagógica

🎯 Nível 1: Fundamentos

Problema 14.1 — Criação de Store Simples com create()

Contexto: Criação de Store Simples com create() no contexto de Gerenciamento de Estado Global Leve com Zustand.

Requisitos de Execução:

  1. Criar store useUserStore contendo estado de autenticação e ações login e logout.

Resultado Esperado

Store global acessível em qualquer componente sem necessidade de Providers.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_14_1_SeuNome
  2. Envie na tarefa: Atividade Cap 14 - Gerenciamento de Estado Global Leve com Zustand
🔑 Gabarito de Código & Solução Comentada 
// userStore.ts
import { create } from 'zustand';

interface UserState {
  user: { id: string; nome: string } | null;
  isAuthenticated: boolean;
  login: (user: { id: string; nome: string }) => void;
  logout: () => void;
}

export const useUserStore = create<UserState>((set) => ({
  user: null,
  isAuthenticated: false,
  login: (user) => set({ user, isAuthenticated: true }),
  logout: () => set({ user: null, isAuthenticated: false }),
}));

🔍 Nível 2: Prática

Problema 14.2 — Seletores Atômicos para Prevenção de Re-renders

Contexto: Seletores Atômicos para Prevenção de Re-renders no contexto de Gerenciamento de Estado Global Leve com Zustand.

Requisitos de Execução:

  1. Consumir a store utilizando seletores const isAuthenticated = useUserStore(state => state.isAuthenticated).

Resultado Esperado

Componente re-renderizado apenas quando o seletor específico sofrer alteração.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_14_2_SeuNome
  2. Envie na tarefa: Atividade Cap 14 - Gerenciamento de Estado Global Leve com Zustand
🔑 Gabarito de Código & Solução Comentada 
// NavbarUser.tsx
import React from 'react';
import { useUserStore } from './userStore';

export const NavbarUser: React.FC = () => {
  const isAuth = useUserStore((state) => state.isAuthenticated);
  return <div>Status: {isAuth ? 'Conectado' : 'Visitante'}</div>;
};

⚡ Nível 3: Integração

Problema 14.3 — Persistência no LocalStorage com Middleware persist()

Contexto: Persistência no LocalStorage com Middleware persist() no contexto de Gerenciamento de Estado Global Leve com Zustand.

Requisitos de Execução:

  1. Configurar middleware persist do Zustand para salvar o estado do carrinho no LocalStorage.

Resultado Esperado

Estado do carrinho preservado mesmo após atualizar ou fechar o navegador.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_14_3_SeuNome
  2. Envie na tarefa: Atividade Cap 14 - Gerenciamento de Estado Global Leve com Zustand
🔑 Gabarito de Código & Solução Comentada 
// cartStorePersist.ts
import { create } from 'zustand';
import { persist } from 'zustand/middleware';

interface CartStore {
  items: string[];
  addItem: (item: string) => void;
}

export const useCartStore = create<CartStore>()(
  persist(
    (set) => ({
      items: [],
      addItem: (item) => set((s) => ({ items: [...s.items, item] })),
    }),
    { name: 'carrinho-storage' }
  )
);

🏆 Nível 4: Desafio Corporativo

Problema 14.4 — Immer Middleware e Integração com Redux DevTools

Contexto: Immer Middleware e Integração com Redux DevTools no contexto de Gerenciamento de Estado Global Leve com Zustand.

Requisitos de Execução:

  1. Combinar middlewares devtools e immer para mutações declarativas e inspeção visual no DevTools.

Resultado Esperado

Store configurada com suporte a Redux DevTools e mutações imutáveis Immer.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_14_4_SeuNome
  2. Envie na tarefa: Atividade Cap 14 - Gerenciamento de Estado Global Leve com Zustand
🔑 Gabarito de Código & Solução Comentada 
// complexStore.ts
import { create } from 'zustand';
import { devtools } from 'zustand/middleware';
import { immer } from 'zustand/middleware/immer';

export const useComplexStore = create<any>()(
  devtools(
    immer((set) => ({
      nested: { count: 0 },
      inc: () => set((state: any) => { state.nested.count += 1; }),
    }))
  )
);
⬅️ Voltar ao Índice de Exercícios 📚 Sumário de Tópicos