DEV Community: Lucas Ruy

Entendendo o useReducer do React

Lucas Ruy — Sun, 26 May 2024 16:11:14 +0000

Neste artigo vamos entender como o useReducer funciona e dar um exemplo da vida real de uso para ele, mas primeiro vamos entender o que é esse hook. Uma definição curta para o useReducer é que ele permite você utilizar um reducer em seu componente. Ele entra como uma boa opção quando surge a necessidade de lidar com dados ou lógicas mais complexas para manipular estado. Esse hook utiliza o padrão de reducers que foi popularizado com o redux, uma biblioteca de gerenciamento de estado muito famosa e que ainda é amplamente utilizada no mercado.

Pegando um contexto

Antes iniciarmos com o useReducer primeiro vamos entender o que seria um reducer. Um reducer é uma função que recebe o estado atual, uma ação e retorna um novo estado. Simples assim. Por convenção, geralmente os redutores, tem instruções switch para dizer como o estado será atualizado e retornar esse novo valor.

Para entender melhor essa ideia, podemos imaginar uma receita: você tem os ingredientes(o estado atual) e uma instrução(ação), o resultado é um prato preparado por você(novo estado).

Agora vamos ver como um reducer se parece:

const initialState = { count: 0 };

function reducer(state = initialState, action) {
  switch(action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

No exemplo o reducer faz exatamente o que explicamos anteriormente, ele é uma função que recebe o estado atual(state) e uma ação(action) e retorna um novo estado dependendo de qual ação será executada. Nesse exemplo existem duas possibilidades de ação, aumentar o contador(INCREMENT) ou diminuir(DECREMENT). Então se o tipo de ação for INCREMENT o valor retornado será { count: 1 }, agora se for uma ação do tipo DECREMENT o valor retornado será { count: -1 } e assim sucessivamente.

Um ponto muito importante dos reducers é a sua imutabilidade, eles sempre devem retornar um novo estado ao invés de modificar o estado atual. Isso garante que o estado seja imutável e pode ajudar a evitar bugs.

Como o "useReducer" funciona

Para entender o hook useReducer precisamos ter atenção as três principais partes do hook: a função redutora, a inicialização do estado e o despachador de ações. Vejamos um a um:

Função redutora: é a função que diz como o estado vai ser atualizado quando receber uma ação. Essa função recebe dois parâmetros, o estado atual e a ação que deve ser executada, a partir disso um novo estado é retornado.
Inicialização do estado: será o seu estado, é um objeto consumido pela sua função redutora.
Despachador de ações: é a função que recebe um objeto por parâmetro, esse objeto é a ação que contém as instruções necessárias para a função redutora atualizar seu estado.

Agora vamos para a sintaxe:

const [state, dispatch] = useReducer(reducer, initialState);

Aqui temos o seguinte:

state: estado atual.
dispatch: despachador de ações.
reducer: função redutora.
initialState: estado inicial, um objeto literal.

Exemplo da vida real

Para entender qual é a aplicabilidade do useReducer partiremos para um exemplo bem comum. Imagine que você precisa criar um carrinho de compras que pode ter as seguintes funcionalidades, adicionar, remover e limpar os itens.

Começaremos definindo nosso reducer em um arquivo chamado reducer.js :

// reducer.js
export const initialState = {
  items: [],
  totalAmount: 0
}

export function cartReducer(state, action) {
  switch (action.type) {
    case 'ADD_ITEM':
      const updatedItems = [...state.items, action.item];
      const updatedTotalAmount = state.totalAmount + action.item.price;
      return {
        ...state,
        items: updatedItems,
        totalAmount: updatedTotalAmount,
      };
    case 'REMOVE_ITEM':
      const filteredItems = state.items.filter(item => item.id !== action.id);
      const itemToRemove = state.items.find(item => item.id === action.id);
      const decreasedTotalAmount = state.totalAmount - itemToRemove.price;
      return {
        ...state,
        items: filteredItems,
        totalAmount: decreasedTotalAmount,
      };
    case 'CLEAR_CART':
      return initialState;
    default:
      return state;
  }
}

É importante notar que o objeto state nunca é modificado e sim utilizado como base para realizar operações futuras. Trabalhando dessa forma podemos garantir a imutabilidade, o que é uma característica de um reducer.

Agora precisamos criar nosso componente e utilizar o useReducer dentro dele:

// ShoppingCart.js
import { useReducer } from "react";

import { cartReducer, initialState } from "./shopping-cart.reducer";

export const ShoppingCart = () => {
  const [cart, dispatch] = useReducer(cartReducer, initialState);

  const hasCartItems = cart.items.length > 0;

  const addItemHandler = (item) => {
    dispatch({ type: "ADD_ITEM", item });
  };

  const removeItemHandler = (id) => {
    dispatch({ type: "REMOVE_ITEM", id });
  };

  const clearCartHandler = () => {
    dispatch({ type: "CLEAR_CART" });
  };

  return (
    <div>
      <h2>Meu carrinho</h2>
      {hasCartItems && (
        <ul>
          {cart.items.map((item) => (
            <li key={item.id}>
              {item.name} - ${item.price}
              <button onClick={() => removeItemHandler(item.id)}>
                Remover
              </button>
            </li>
          ))}
        </ul>
      )}
      <div>Total: ${cart.totalAmount}</div>
      <button onClick={clearCartHandler}>Limpar Carrinho</button>
      <button
        onClick={() =>
          addItemHandler({ id: "shoes-1", name: "Tênis", price: 99 })
        }
      >
        Adicionar "Tênis" ao carrinho
      </button>
      <button
        onClick={() =>
          addItemHandler({ id: "shirt-1", name: "Camiseta", price: 39 })
        }
      >
        Adicionar "Camiseta" ao carrinho
      </button>
    </div>
  );
};

No arquivo reducer.js, definimos o estado inicial do carrinho e quais ações podem ser aplicadas para atualizá-lo. As ações disponíveis são ADD_ITEM, REMOVE_ITEM e CLEAR_CART. Cada vez que uma dessas ações é executada, uma cópia do estado atual é criada, atualizada conforme a ação, e um novo estado atualizado é retornado.

Já no componente ShoppingCart, utilizamos o useReducer para gerenciar o estado do carrinho. No componente, temos três funções, cada uma responsável por uma ação específica. Essas funções despacham ações para o nosso reducer, que se encarrega de atualizar o estado e retorná-lo. O componente ShoppingCart renderiza os itens do carrinho, o valor total e os botões de ação para adicionar, remover e limpar o carrinho.

Conclusão

Neste artigo aprendemos como o hook useReducer funciona e também um pouco sobre o conceito por trás dele. Também entendemos como ele pode ser uma ferramenta poderosa, que facilita o gerenciamento de estados mais complexos em seus componentes, principalmente quando a lógica de atualização do estado precisa de várias ações.

Código do exemplo neste sandbox.

Espero que este artigo tenha ajudado você de alguma forma a entender melhor o useReducer e como ele pode ser aplicado em casos reais para gerenciar estados complexos. Se você gostou dessa leitura e ficou interessado em se aprofundar ainda mais nesse assunto, recomendo as leituras a seguir, apenas em inglês:

Por hoje é isso e obrigado por ler até aqui!

Padrão JumpTable com Javascript

Lucas Ruy — Tue, 02 Apr 2024 22:35:46 +0000

JumpTable Pattern

O JumpTable é uma forma inteligente de evitar grandes trechos de if-else ou switch-case no seu código. A ideia principal consiste em você mapear em um objeto com chaves para funções ou blocos de código.

Dependendo do caso, com um simples objeto, você consegue substitui-lo pelos bons e velhos if-else ou switch-case, você simplesmente olha para uma "tabela" usando a chave que tem em mãos e encontra a função certa para executar.

Isso deixa tudo mais limpo e direto, especialmente quando você tem muitas ações diferentes que dependem de condições variadas. É como organizar o caos numa ordem que faz sentido e é fácil de seguir.

Exemplos

Vamos supor que você tenha um aplicativo que executa ações diferentes com base em comandos de texto que recebe, como "create", "edit" ou "delete".

Sem usar JumpTable, você poderia fazer algo parecido com isso:

function runCommand(command) {
  if (command === "create") {
    console.log("Criando item...");
  } else if (command === "edit") {
    console.log("Editando item...");
  } else if (command === "delete") {
    console.log("Deletando item...");
  } else {
    console.log("Comando inválido!");
  }
}

runCommand("create") // Retorna o texto "Criando item..."

Com o padrão JumpTable, o código fica assim:

const commands = {
  create: () => console.log("Criando item..."),
  edit: () => console.log("Editando item..."),
  delete: () => console.log("Deletando item..."),
  default: () => console.log("Comando inválido!"),
};

function runCommand(command) {
  // Se "command" existir dentro de "commands", retorna o item com o nome correspondente
  // Se "command" não existir, retorna o item `default`
  const action = commands[command] || commands.default;

  // Apenas executa a função atribuída a variável
  return action();
}

runCommand("create") // Retorna o texto "Criando item..."
runCommand("new") // Retorna o texto "Comando inválido!"

Vamos dar uma olhada no que acabamos de ver no código. O objeto commands é o JumpTable. Ele conecta cada comando com uma função específica.

Quando chamamos a função runCommand, ela vai consultar o objeto commands, procurando pela chave que a gente passou pra ela por parâmetros. Se achar essa chave, ótimo, ela traz de volta o que encontrou. Se não achar, ela vai pegar a propriedade default do objeto commands e retornar como se fosse um plano B.

Esse padrão é muito útil para tornar o código mais organizado e fácil de expandir. Se você quiser adicionar um novo comando, basta adicionar uma nova chave e função ao objeto commands e é apensa isso, sem a necessidade de modificar a estrutura condicional existente. Ou seja, apenas modificando o objeto commands você é capaz de incluir ou remover novos comandos do seu código.

Aplicando JumpTable no React

Para um aplicativo React, o padrão JumpTable pode ser uma boa alternativa para simplificar a lógica de seleção de comportamentos baseados em condições específicas.

A integração com estados e props, em cenários onde a lógica do componente depende do estado atual ou props recebidas, um JumpTable pode ajudar a decidir qual componente renderizar sem recorrer a múltiplos if-else ou switch-case por exemplo.

Vamos pensar em um exemplo do dia a dia. Imagine o componente HomePage, que é tipo a vitrine que mostra vários estilos de layout diferentes, dependendo de quem tá navegando pelo app. A responsabilidade dele é mudar o visual conforme o tipo de pessoa que tá usando o app:

import { Menu } from "@/components/Menu";
import { AdminPage } from "@/components/AdminPage";
import { ModeratorPage } from "@/components/ModeratorPage";
import { UserPage } from "@/components/UserPage";
import { GuestPage } from "@/components/GuestPage";

// Atribui cada componente a uma chave do objeto
const LAYOUTS = {
  admin: AdminPage,
  moderator: ModeratorPage,
  user: UserPage,
  guest: GuestPage,
}

function HomePage(profile) {
  // Com base no perfil, busca o componente desejado
  const Component = LAYOUTS[profile];

  return (
   <div className="home-page">
    <Menu />
    {/* Renderiza o componente de forma clara e limpa */}
    <Component />
   </div>
  )
}

Este exemplo mostra como um JumpTable pode simplificar e organizar a lógica, eliminando a necessidade de repetidas verificações condicionais dentro do JSX.

Desvantagens

Embora o padrão JumpTable ofereça várias vantagens em termos de simplificação da lógica condicional e manutenção do código, ele também possui suas desvantagens e limitações.

Quando o JumpTable tem muitas entradas, isso pode afetar a performance, principalmente se não for bem otimizada. Esse problema pode aparecer mais em lugares com poucos recursos como dispositivos menos potentes por exemplo.

Para quem é novo ou não conhece bem o padrão JumpTable, o código pode parecer menos claro que o uso de if-else ou switch-case, tornando a aprendizagem mais difícil e podendo complicar um pouco a leitura e manutenção do código.

Embora o JumpTable torne o código mais simples, testá-lo pode ser mais difícil se as funções envolvidas forem complexas ou numerosas, exigindo testes individuais para cada função.

Conclusão

O JumpTable pode ser uma mão na roda, tanto para quem usa React quanto para quem tá no JavaScript puro. Ele torna tudo mais simples e objetivo.

No React, ele é ótimo para aplicar renderizações condicionais sem fazer uma bagunça. Já no JavaScript, ele organiza suas funções e o que elas devem fazer de uma maneira bem direta, te poupando de um monte de if-else ou switch-case.

Em qualquer um dos casos, usar o JumpTable deixa seu código mais organizado e fácil de pegar no tranco, sendo um verdadeiro herói para quem busca eficiência sem querer quebrar a cabeça.

Prop Drilling no React com exemplos

Lucas Ruy — Mon, 01 Apr 2024 18:40:07 +0000

O que Prop Drilling?

O "Prop drilling" no React é quando você tem que entregar uma mensagem que precisa passar por várias pessoas antes de chegar no destinatário certo. Imagine que você quer enviar uma informação de um componente para outro, mas essa informação tem que zigzaguear por vários outros componentes no meio do caminho. Você começa passando a informação como uma prop do componente principal para o filho dele. Depois, esse filho passa a mesma informação pro seu filho, e assim vai, camada por camada, até que finalmente a mensagem chega lá no componente que realmente precisa dela.

Metáfora do prédio

Pense que você tá lá no último andar de um prédio querendo bater um papo com seu amigo que tá no térreo. Mas, em vez de gritar diretamente pra ele, você prefere passar a mensagem para o vizinho do andar de baixo. Aí, esse vizinho passa para o próximo, e assim vai indo, de andar em andar, até que a mensagem finalmente chega nas mãos do seu amigo lá embaixo.

Na programação com React, o "prop drilling" é parecido. Se você tem uma informação no componente mais alto (tipo, o último andar) e quer que chegue num mais embaixo (o térreo), essa informação tem que ser passada de um componente para o outro, camada por camada, até alcançar quem realmente precisa dela.

Exemplo de código

Aqui temos um exemplo simples baseado na metáfora do prédio, onde passamos uma mensagem do topo do prédio (componente pai) até o primeiro andar (componente neto), passando pelo apartamento intermediário que é o segundo andar (componente filho).

// Componente Pai (Topo do Prédio)
function Predio() {
  const mensagemParaPrimeiroAndar = "Olá, do último andar!";

  return (
    <SegundoAndar mensagem={mensagemParaPrimeiroAndar} />
  );
}

// Componente Filho (Segundo Andar)
function SegundoAndar({ mensagem }) {
  // A mensagem é passada diretamente através dos props, sem ser usada aqui.
  return (
    <PrimeiroAndar mensagem={mensagem} />
  );
}

// Componente Neto (Primeiro Andar)
function PrimeiroAndar({ mensagem }) {
  return <p>{mensagem}</p>; // Aqui a mensagem finalmente é utilizada.
}

// Para renderizar o componente Prédio (que inicia todo o processo), você o incluiria em sua aplicação da seguinte forma:
function App() {
  return <Predio />;
}

Vantagens e desvantagens

Vamos dividir esse tópico para manter as coisas claras e simples:

Vantagens do "Prop Drilling"

Para aplicações pequenas ou componentes com poucos níveis, o prop drilling é uma solução direta que não requer ferramentas adicionais ou complexidade. Como a passagem de dados é explícita, pode ser mais fácil para novos desenvolvedores entenderem como os dados estão sendo passados e onde são utilizados. Além disso, não é necessário usar bibliotecas de gerenciamento de estado externas para compartilhamento de dados simples, mantendo o bundle da aplicação mais leve.

Com isso em mente, podemos dizer que o "prop drilling" é simples, fácil de entender e livre de dependências externas.

Desvantagens do "Prop Drilling"

Quando sua aplicação começa a ficar grande, mandar dados do ponto A para o ponto B usando props em vários níveis pode complicar bastante as coisas. Fica difícil alterar ou melhorar o código. Outro ponto que vale destacar é que, essa forma de repassar a informação faz com que os componentes fiquem muito dependentes uns dos outros, mesmo quando não precisam saber tanto assim sobre o que o outro está fazendo. Isso acaba indo contra a ideia de manter as coisas simples e reutilizáveis.

Em bases de código complexas, o "prop drilling" pode dificultar o rastreamento da origem dos dados e qual fluxo estão seguindo, como consequência, aumentando seu tempo de debug. Também é importante lembrar que qualquer modificação nos dados pode exigir mudanças em muitos componentes intermediários, tornando as refatorações mais trabalhosas e propensas a erros.

Conclusão

O "prop drilling" pode ser útil em cenários simples com poucos níveis de componentes, mas para aplicações mais complexas e profundas, abordagens como Context API ou ferramentas de gerenciamento de estado como Zustand podem ser mais apropriadas para gerenciar o fluxo de dados de forma eficiente e manter o código limpo e fácil de manter.

Entendendo o Pub/Sub com Javascript

Lucas Ruy — Fri, 16 Feb 2024 23:29:15 +0000

O padrão Pub/Sub

O padrão Publisher/Subscriber, também conhecido como Pub/Sub, é um conceito que basicamente permite que você anuncie eventos e quem estiver interessado neste determinado evento se inscreva para receber novidades sobre ele.

Analogia simples

Imagine que você está organizando uma festa e que diferentes grupos de amigos querem saber sobre os tipos de música que serão tocadas. Quando a banda decide tocar um novo estilo de música, todos os amigos interessados naquele estilo são informados para que possam dançar e se divertir.

Onde a festa é o sistema de Pub/Sub, os grupos de amigos são os subscribers e a banda o publisher.

Destrinchando no código

Para entender melhor como isso funcionaria, veja o código de como o sistema de Pub/Sub pode ser implementado com Javascript:

// pub-sub.js
class PubSub {
  constructor() {
    this.subscribers = {};
  }

  // Inscrever para ouvir um tipo de música
  subscribe(eventType, callback) {
    if (!this.subscribers[eventType]) {
      this.subscribers[eventType] = [];
    }
    this.subscribers[eventType].push(callback);
  }

  // Publicar uma nova música, informando todos os interessados
  publish(eventType, data) {
    if (!this.subscribers[eventType]) return;
    this.subscribers[eventType].forEach(callback => callback(data));
  }

  // Cancelar a inscrição de um tipo específico de música
  unsubscribe(eventType, callback) {
    if (!this.subscribers[eventType]) return;
    const callbackIndex = this.subscribers[eventType].indexOf(callback);
    if (callbackIndex > -1) {
      this.subscribers[eventType].splice(callbackIndex, 1);
    }
  }
}

export { PubSub }

Agora vamos detalhar cada método da nossa classe PubSub passo a passo:

Método `subscribe`

O método subscribe permite que um "amigo" informe seu interesse em um tipo específico de "música" (evento). Assim que essa "música" tocar, o "amigo" será notificado.

/**
  * eventType: O tipo de evento (ou "música") que o "amigo" quer ouvir.
  * callback: A ação que o "amigo" quer executar quando a "música" tocar.
  */
subscribe(eventType, callback) {
  if (!this.subscribers[eventType]) {
    this.subscribers[eventType] = [];
  }
  this.subscribers[eventType].push(callback);
}

Como funciona? Primeiro, verifica se já existe uma lista de callbacks para o tipo de evento específico (eventType). Se não, cria uma nova lista vazia. Depois, adiciona o callback fornecido à lista de callbacks para aquele tipo de evento.

Método `publish`

O método publish atua como a "banda" informando que uma nova "música" está sendo tocada. Todos os "amigos" interessados naquela "música" são notificados.

/**
  * eventType: O tipo de "música" (evento) que está sendo tocada.
  * data: Informações sobre a "música" (evento), como o nome da música, por exemplo.
  */
publish(eventType, data) {
  if (!this.subscribers[eventType]) return;
  this.subscribers[eventType].forEach(callback => callback(data));
}

Como funciona? Verifica se existem "amigos" inscritos para aquele tipo de evento. Se não, nada acontece. Se existirem, executa todos os callbacks associados a esse tipo de evento, passando a data como argumento.

Método `unsubscribe`

O método unsubscribe permite que um "amigo" cancele seu interesse em um tipo específico de "música" (evento). Ele não será mais notificado quando a "música" tocar.

/**
  * eventType: O tipo de "música" (evento) do qual o "amigo" não quer mais ser notificado.
  * callback: A ação específica que o "amigo" não quer mais executar quando a "música" tocar.
  */
unsubscribe(eventType, callback) {
  if (!this.subscribers[eventType]) return;
  const callbackIndex = this.subscribers[eventType].indexOf(callback);
  if (callbackIndex > -1) {
    this.subscribers[eventType].splice(callbackIndex, 1);
  }
}

Como funciona? Verifica se existem "amigos" inscritos para aquele tipo de evento. Se não, nada é feito. Se o callback existir na lista, ele é removido. Isso é feito encontrando o índice do callback na lista e, se encontrado, removendo-o da lista.

Resumo

Então podemos dizer que o subscribe é como se você dissesse à organizadora da festa: "Me avise quando tocarem rock, por favor" e então você será avisado quando a banda tocar Rock. Já o publish é como se a banda dissesse à organizadora da festa: "Hey, vamos tocar rock agora" e a organizadora avisasse a todos os interessados. E o unsubscribe como se você dissesse à organizadora: "Não preciso mais saber quando tocarem rock".

Uso do Pub/Sub

Podemos dizer que neste caso a classe Pub/Sub é a organizadora da festa. Ela mantém uma lista de quais amigos (subscribers) estão interessados em cada tipo de música (eventType). Quando a banda (publish) decide tocar uma nova música (eventType), todos os amigos interessados naquela música são notificados (callback) com os detalhes (a música que está tocando).

Veja o exemplo abaixo para ajudar a entender melhor a ideia:

import { PubSub } from "./pub-sub.js"

// Uso da biblioteca Pub/Sub
const party = new PubSub();

// Amigo se inscrevendo para ouvir Rock
party.subscribe("rock", data => console.log(`Está tocando Rock: ${data}`));

// Amigo se inscrevendo para ouvir Pop
party.subscribe("pop", data => console.log(`Está tocando Pop: ${data}`));

// A banda decide tocar uma música Rock
party.publish("rock", "Sweet Child O' Mine");

// A banda decide tocar uma música Pop
party.publish("pop", "Cool for the Summer");

Os amigos(subscribers) dizem à organizadora em quais tipos de música estão interessados. A banda(publish) avisa à organizadora que vai tocar um novo tipo de música, e a organizadora informa aos amigos interessados. Um amigo decide que não quer mais ser notificado(unsubscribe) sobre um tipo de música para não receber mais notificações.

Com esse sistema, a comunicação entre a banda e os amigos é feita de forma organizada e eficiente, sem que a banda saiba diretamente quem está interessado em sua música, assim como numa festa de verdade.

Conclusão

O padrão Pub/Sub pode ser incrivelmente útil no frontend para vários cenários, especialmente aqueles que exigem comunicação entre componentes, módulos ou até mesmo microfrontends de forma desacoplada e eficiente.

O padrão Pub/Sub ajuda a manter a aplicação escalável, manutenível e fácil de expandir, pois novos publishers ou subscribers podem ser adicionados sem necessidade de reconfigurar ou alterar o código existente significativamente.

Espero que essa explicação ajude a entender melhor o funcionamento e a utilidade do Pub/Sub.

DEV Community: Lucas Ruy

Entendendo o useReducer do React

Pegando um contexto

Como o "useReducer" funciona

Exemplo da vida real

Conclusão

Padrão JumpTable com Javascript

JumpTable Pattern

Exemplos

Aplicando JumpTable no React

Desvantagens

Conclusão

Prop Drilling no React com exemplos

O que Prop Drilling?

Metáfora do prédio

Exemplo de código

Vantagens e desvantagens

Vantagens do "Prop Drilling"

Desvantagens do "Prop Drilling"

Conclusão

Entendendo o Pub/Sub com Javascript

O padrão Pub/Sub

Analogia simples

Destrinchando no código

Método subscribe

Método publish

Método unsubscribe

Resumo

Uso do Pub/Sub

Conclusão

Método `subscribe`

Método `publish`

Método `unsubscribe`