English 中文 العربية 日本語 Português

useReducer Redutor de Estado

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

useReducer Redutor de Estado

useReducer concentra a pergunta "como o estado muda?" em uma única função redutora pura: despachar uma action a dispara e o redutor computa o novo estado a partir dessa action. Quando há muitas transições de estado, lógica complicada ou vários valores que devem mudar juntos, ele é mais claro e testável do que uma pilha de chamadas useState. O redutor é uma função comum, então pode ser exercitado por conta própria sem renderizar coisa alguma.

GrupoEfeitos e Desempenho
TipoHook
DesdeReact 16.8

ℹ️ 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

function reducer(state, action) {
  switch (action.type) {
    case 'increment': return { count: state.count + 1 }
    case 'reset':     return { count: 0 }
    default:          return state    // an unknown action returns the same state
  }
}

const [state, dispatch] = useReducer(reducer, { count: 0 })
dispatch({ type: 'increment' })

⚙️ Parâmetros

reducerA função pura (state, action) => newState: sem efeitos colaterais, sem mutação direta do estado, e deve retornar um novo objeto.
initialArgO estado inicial; um terceiro argumento pode passar um inicializador preguiçoso init(initialArg).

Retorna：Retorna [state, dispatch], o estado atual e a função dispatch. A referência de dispatch nunca muda, então é seguro colocá-la em um array de dependências ou passá-la a um componente filho.

▶ Exemplo

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

Saída：

Os três botões despacham as actions inc, dec e reset; a contagem é calculada pelo redutor e a UI se atualiza em tempo real.
▶ Experimente

💡 Pontos-chave

💡 Dica A função dispatch tem uma referência estável, então passá-la para baixo a um filho profundo não precisa de useCallback adicional.
ℹ️ Informação O redutor deve ser uma função pura: buscar dados ou escrever em localStorage pertencem a um manipulador de eventos ou a um useEffect.
⚠️ Aviso Mutar o estado diretamente (state.count++) é o erro clássico — sempre retorne um novo objeto.
reducer-actions reducer-patterns usestate provider-pattern
Mais casos em breve.

📚 Tutoriais Relacionados

useReducer
Lição 12: o modelo mental de um redutor e a escolha entre useReducer e useState.

❓ Perguntas Frequentes

P Como escolho entre useReducer e useState?
R Use useState para um valor independente e simples; use useReducer quando vários valores mudam juntos, a lógica de atualização é complicada ou um passo depende do anterior.
P O redutor pode enviar uma requisição?
R Não, um redutor deve ser uma função pura. Coloque a requisição em um manipulador de eventos ou em um efeito e despache o resultado quando ele chegar.
P Consigo ler o novo estado logo após dispatch?
R Não. Dispatch apenas agenda uma re-renderização, então o estado no closure atual ainda é o valor antigo; observe-o com um useEffect quando precisar reagir a ele.
Web-Tutorial.com

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.

100%