0dias seguidos0XP

useReducer: carrinho de compras tipado

Intermediário+20 XP

Estados complexos ficam melhores com useReducer (mesmo padrão do Redux). O reducer é uma função pura (estado, acao) => novoEstado.

Implemente carrinhoReducer tratando as ações:

  • { type: "adicionar", produto } → se já existe, soma 1 na quantidade; senão entra com quantidade 1
  • { type: "remover", id }
  • { type: "alterarQuantidade", id, quantidade } → se quantidade <= 0, remove o item
  • { type: "limpar" }

E totalCarrinho(estado). Use discriminated union para as ações.

Como resolver
  1. Escreva sua solução no editor.
  2. Executar mostra a saída no terminal, para você experimentar.
  3. Testar confere a solução. Passou em tudo? Exercício concluído!
index.ts · carregando TypeScript…
Carregando editor…
digite "ajuda" para ver os comandos
dev@devjr:~/rn-reducer-carrinho$