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

Action Design Design de Action

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

Action Design Design de Action

Uma action é um objeto comum que descreve o que aconteceu: seu type é a identidade, geralmente uma constante em maiúsculas, e seu payload carrega os dados. Um bom design de action transforma o redutor em algo tão legível quanto um diretório switch, e torna o fluxo de estado rastreável e reproduzível no DevTools. Como as actions são dados puros, sobrevivem à serialização, que é exatamente o que torna possível o log, a depuração e a viagem no tempo.

GrupoEfeitos e Desempenho
TipoPadrã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

// { type: 'todo/added', payload: 'buy milk' }
const addTodo = text => ({ type: 'todo/added', payload: text })
const toggleTodo = id => ({ type: 'todo/toggled', payload: id })

dispatch(addTodo('buy milk'))    // the action creator builds the object

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：

Digite um texto e clique em "Add" para criar um todo; clicar em um item alterna seu estado done (com um traço sobre ele) — toda mudança é dirigida por uma das duas actions, added e toggled.
▶ Experimente

💡 Pontos-chave

💡 Dica Um action creator como addTodo(text) reúne o formato da action em um só lugar, para que quem chama nunca precise montar o objeto manualmente.
ℹ️ Informação Dê ao type o nome do domínio e da ação, como todo/added; lê bem no DevTools e facilita o filtro por prefixo.
⚠️ Aviso Mantenha apenas dados serializáveis em uma action (o payload), nunca um callback ou uma instância de componente.
usereducer reducer-patterns provider-pattern usestate
Mais casos em breve.

📚 Tutoriais Relacionados

useReducer
Lição 12: design de tipo de action e a convenção de payload.

❓ Perguntas Frequentes

P Action creators são obrigatórios?
R Não, despachar um objeto também funciona; mas com muitas actions ou um formato complexo, um creator mantém a estrutura consistente e evita erros de digitação.
P O payload pode conter uma função?
R Não deveria. Uma action é uma descrição de dado puro, e funções quebrariam a serializabilidade e a capacidade de reproduzir o estado.
P Os tipos de action têm de ser definidos em um só lugar?
R Em um projeto pequeno você pode exportar as constantes do topo do arquivo do redutor; em um projeto modular, defina-as próximas ao seu domínio e prefixe-as para evitar colisões.
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%