Programação Funcional e Reativa
Este guia aborda os princípios de Programação Funcional (PF) e Programação Reativa aplicados ao desenvolvimento front-end moderno, especialmente no ecossistema React e Redux Saga.
1. Programação Funcional (PF)
A Programação Funcional é um paradigma que trata a computação como a avaliação de funções matemáticas e evita a mudança de estado e dados mutáveis.
Princípios Core
Imutabilidade
Dados não devem ser alterados após criados. Em vez de mudar um objeto, cria-se uma nova versão com as alterações.
- Por que? Facilita o rastreamento de mudanças, melhora a performance do React (comparações de referência simples) e evita efeitos colaterais imprevisíveis.
- Como: Use Spread operator (
...), métodos imutáveis de array (map,filter,reduce) e evitepush,spliceou atribuições diretas em propriedades de objetos.
Funções Puras
Uma função é pura se:
- Dada a mesma entrada, sempre retorna a mesma saída.
- Não possui efeitos colaterais (não altera variáveis globais, não faz log, não salva no banco).
- Vantagem: Facilidade extrema de teste e previsibilidade.
Funções de Alta Ordem (HOF)
Funções que recebem outras funções como argumento ou retornam funções.
- Exemplos:
map,filter,compose,curry.
2. Paradigma Reativo
A Programação Reativa foca em fluxos de dados (streams) e na propagação de mudanças. Em vez de pedir um dado (Pull), você reage quando o dado chega (Push).
Streams e Observables
Imagine um fluxo constante de eventos (cliques, digitação, respostas de rede). Você pode observar esse fluxo e reagir a cada novo item.
Aplicação no Projeto
Redux Saga
O Redux Saga utiliza geradores para simular um comportamento reativo. Ele "escuta" (take) por ações enviadas ao sistema e reage disparando efeitos colaterais (call, put).
TanStack Query
Gerencia o estado do servidor de forma reativa: quando os dados no cache mudam ou expiram, os componentes que os utilizam são notificados e re-renderizados automaticamente.
3. Como aplicar no dia a dia
| Conceito | Como fazer | Como não fazer |
|---|---|---|
| Estado | const newItems = [...items, newItem] | items.push(newItem) |
| Lógica | Criar funções puras em utils para cálculos. | Colocar lógica de cálculo complexa dentro do useEffect. |
| Eventos | Pensar em "Quando X acontecer, faça Y". | Criar cadeias de funções que alteram estados globais diretamente. |