Especialização Frontend com React & TypeScript • React 19, Hooks, Estado Global e Next.js

🗺️ Mapa Conceitual do Tópico

flowchart LR
    ACTION["Dispatch Action"] --> SLICE["RTK Slice Reducer (Immer)"]
    SLICE --> STORE["Redux Central Store"]
    STORE --> SELECTOR["useAppSelector(selectMetrics)"]

🏛️ 1. O Papel do Redux Toolkit em Aplicações Enterprise

O Redux Toolkit (RTK) é a abordagem oficial e padronizada para escrita de código Redux moderno. Ele elimina a complexidade histórica do Redux clássico (action types em strings, action creators manuais e mutações complexas com spread).

Pilares do RTK:

  1. createSlice: Agrupa o estado inicial, os reducers e gera automaticamente os action creators e os tipos em uma única estrutura modular.
  2. Immer Integrado: Permite escrever código aparentemente mutável (state.count += 1), que o Immer converte internamente em atualizações imutáveis perfeitas através de Proxies do JavaScript.
  3. Store Centralizada e Auditabilidade: Ideal para aplicações corporativas com auditoria rigorosa de ações e rastreabilidade temporal.

⚙️ 2. Tipagem Estrita de Hooks Redux com TypeScript

Para garantir autocompletion de estado e despacho seguro de ações em TypeScript, exportamos versões pré-tipadas dos hooks:

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

export const useAppDispatch: () => AppDispatch = useDispatch;
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

📊 3. Comparativo: Redux Clássico vs Redux Toolkit

Aspecto Redux Legado (Antes de 2019) Redux Toolkit (Padrão Atual)
Configuração da Store Manual e verbosa com múltiplos enhancers 1 chamada limpa a configureStore()
Imutabilidade Operações manuais propensas a erro com ...spread Código direto e intuitivo via Immer
Geração de Ações Criação manual de strings e Action Creators 100% Automática pelo createSlice
DevTools & Thunk Exigia instalação e configuração manual Habilitados por padrão sem esforço

⚠️ 4. Armadilhas Comuns e Anti-Padrões de Produção

  1. Colocar Todo o Estado no Redux: Tratar formulários temporários ou abas ativas como estado global do Redux é um erro de engenharia. Mantenha estados locais de UI em useState.
  2. Mutações Fora dos Reducers do Slice: O Immer atua apenas dentro dos reducers de createSlice. Tentar mutar objetos do Redux dentro de seletores causará erros em runtime.

💡 5. Diretrizes de Engenharia (Meta & React Docs)

  • Normalize Estados Relacionais com createEntityAdapter: Facilita a gestão de coleções indexadas por ID com complexidade de busca O(1).
  • Adote RTK Query para APIs Corporativas: Se a aplicação consome dezenas de microsserviços REST/GraphQL, o RTK Query unifica o data fetching dentro do próprio Redux.

💻 6. Demonstração Arquitetural do Conceito

// notificationSlice.ts - Slice corporativo limpo
import { createSlice, PayloadAction } from "@reduxjs/toolkit";

export interface NotificationState {
  messages: string[];
}

const initialState: NotificationState = { messages: [] };

export const notificationSlice = createSlice({
  name: "notifications",
  initialState,
  reducers: {
    pushNotification: (state, action: PayloadAction<string>) => {
      state.messages.push(action.payload);
    },
    clearAll: state => {
      state.messages = [];
    }
  }
});

📋 7. Cheat-Sheet do Redux Toolkit

  • createSlice(): Cria estado, reducers e actions em uma só declaração.
  • configureStore(): Configura a store com middleware Thunk e DevTools.
  • createAsyncThunk(): Orquestra operações assíncronas com estados pendente, sucesso e falha.

🔍 8. Diagnóstico de Performance & React DevTools Profiler

Inspeção com Redux DevTools Extension:

  • Time-Travel Debugging: Avance e reverta ações na linha do tempo para reproduzir bugs relatados por usuários com fidelidade determinística de 100%.
  • State Diffing: Inspecione a árvore de diferenças (Diff) gerada a cada action disparada no slice.

🧪 9. Casos de Teste e Cenários de Borda Recomendados

  • 🔍 Ações com Payloads Negativos: Valide o comportamento de reducers ao receber valores matemáticos fora do intervalo esperado.
  • 🔍 Thunk Rejeitado: Teste o tratamento do estado rejected quando a chamada assíncrona falha por timeout.
  • 🔍 Inspeção de Imutabilidade: Garanta que testes unitários comprovem que o estado anterior permaneceu intacto após o reducer.