🚀 Capítulo 11: useReducer - Controle de Carga

🎯 Objetivo da Aula

Ao final desta aula, você entenderá como usar o Hook useReducer para gerenciar estados mais complexos que possuem várias regras de negócio e ações diferentes (como adicionar, remover e resetar).

---

🏢 O Cenário Prático (Seu Desafio)

O hangar da Base Rebelde precisa controlar a quantidade de naves estacionadas. O sistema não pode permitir que o número de naves seja negativo e tem um limite máximo de 10 naves. Seu desafio é usar o useReducer para criar esse controle de tráfego ultra-seguro!

---

🧠 Fundamentos: A Teoria Traduzida

Até agora usamos o useState para mudar valores simples. Mas quando mudar um valor depende de várias regras (ações), o useState começa a ficar bagunçado. É aí que entra o useReducer.

Pense nele como um Gerente de Almoxarifado:

1. Estado (state): A quantidade atual de naves.
2. Ação (action): O papelzinho que você entrega ao gerente dizendo o que quer fazer (ex: { type: 'ADICIONAR' }).
3. Redutor (reducer): É a função (o cérebro do gerente) que lê o estado atual, lê a sua ação e decide qual será o novo estado baseado nas regras.
4. Despachante (dispatch): É a sua mão entregando o papelzinho para o gerente.

---

📖 Exemplo Guiado: Reducer do Hangar

Vamos criar a lógica do hangar.

🛠️ Passo a Passo (Criando o Reducer)

Abra o arquivo src/App.jsx e adicione a função redutora fora do componente:

import { useReducer } from 'react';
 
// A função redutora recebe o estado atual e a ação
function hangarReducer(state, action) {
  switch (action.type) {
    case 'ADICIONAR':
      if (state.naves < 10) {
        return { naves: state.naves + 1 };
      }
      alert('Hangar cheio!');
      return state;
      
    case 'REMOVER':
      if (state.naves > 0) {
        return { naves: state.naves - 1 };
      }
      return state;
      
    default:
      return state;
  }
}
 
function App() {
  // Inicializamos o useReducer
  const [state, dispatch] = useReducer(hangarReducer, { naves: 0 });
 
  return (
    <div>
      <h1>🛸 Controle do Hangar</h1>
      <p>Naves Estacionadas: **{state.naves}** / 10</p>
      
      {/* O dispatch envia a ação para o reducer */}
      <button onClick={() => dispatch({ type: 'ADICIONAR' })}>
        Adicionar Nave
      </button>
      <button onClick={() => dispatch({ type: 'REMOVER' })}>
        Remover Nave
      </button>
    </div>
  )
}
 
export default App;

🕹️ Como Executar e Testar no VS Code

1. Salve e veja o navegador.
2. Clique em adicionar. O número subirá até 10 e depois travará com um alerta.
3. Clique em remover. O número cairá até 0 e travará!

---

🛠️ Prática Obrigatória 1

Adicione uma nova ação no hangarReducer chamada 'ESVAZIAR'. Essa ação deve zerar o número de naves (retornar { naves: 0 }).

---

🛠️ Prática Obrigatória 2

Adicione um botão “Esvaziar Hangar” no componente que dispara essa nova ação usando o dispatch.

---

🔑 Gabarito de Código/Fórmulas

Prática 1:

No hangarReducer:

case 'ESVAZIAR':
  return { naves: 0 };

Prática 2:

No JSX:

<button onClick={() => dispatch({ type: 'ESVAZIAR' })}>
  Esvaziar Hangar
</button>

---

← Capitulo Anterior | Proximo Capitulo →