Reducer Patterns Padrões de Redutor

Última atualização: 2026-11-03

Reducer Patterns Padrões de Redutor

Alguns padrões idiomáticos mantêm os redutores organizados: inicialização preguiçosa pelo terceiro argumento, atualizações imutáveis de estado de objeto e array, cálculo de valores derivados durante a renderização em vez de armazená-los, e reinício de toda uma árvore de estado com uma action reset ou uma key alterada. Dominar esses pontos mantém limpa até uma máquina de estado complexa. O princípio compartilhado é que o redutor permanece uma função pura, enquanto tudo o que não é puro — chamadas de rede, temporizadores, armazenamento — acontece nos manipuladores de eventos ou efeitos ao redor dele.

Grupo	Efeitos e Desempenho
Tipo	Padrão

ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.

📝 Sintaxe

// lazy initialization: the initial state is computed from an argument
const [state, dispatch] = useReducer(reducer, props, init)

// reset the whole state tree
case 'reset': return init(props)

// the immutable update templates for arrays
[...state, item]                    // add
state.filter(i => i.id !== id)      // remove
state.map(i => i.id === id ? { ...i, done: true } : i)  // edit

Retorna：Sem valor de retorno; esta entrada descreve um padrão de codificação e não uma função.

▶ Exemplo

O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.

Saída：

"Next" acumula a trilha, "Back" recua um passo e "Reset" retorna ao início de uma vez — o exemplo demonstra a inicialização preguiçosa e o padrão reset.

▶ Experimente

💡 Pontos-chave

💡 Dica O terceiro argumento realiza a inicialização preguiçosa: use-o quando o estado inicial depende de props ou é caro de computar, e ele roda apenas quando o estado é criado pela primeira vez.

ℹ️ Informação Para reiniciar o estado de um componente você também pode mudar a key do elemento externo, <Wizard key={resetId} />, e toda a subárvore é reconstruída com estado fresco.

⚠️ Aviso Valores derivados como o comprimento de uma lista ou se tudo está marcado são computados durante a renderização, não armazenados no estado onde duas fontes de verdade competiriam.

Mais casos em breve.

📚 Tutoriais Relacionados

useReducer

Lição 12: inicialização preguiçosa, reinício e padrões de atualização imutável.

❓ Perguntas Frequentes

P Quando devo usar o terceiro argumento de useReducer?

R Quando o estado inicial tem de ser computado a partir de props ou é caro de construir: useReducer(reducer, props, init) e init roda apenas na primeira vez.

P Como reinicio todo o estado do redutor?

R Defina uma action reset que retorne init(...); ou dê ao componente uma nova key, o que faz o React descartar a antiga árvore de estado.

P E se atualizar objetos aninhados ficar muito verboso?

R Espalhe cada nível com {...a, ...b} ou divida o estado ao longo de seus caminhos; para estados grandes, considere immer ou o formato normalizado usado por bibliotecas de estado.

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós

Reducer Patterns Padrões de Redutor

Reducer Patterns Padrões de Redutor

📝 Sintaxe

▶ Exemplo

💡 Pontos-chave

🏷️ Mais Efeitos e Desempenho

💡 Casos Relacionados

📚 Tutoriais Relacionados

❓ Perguntas Frequentes