No post anterior abordamos de forma resumida as opções de gerenciamento de estado em React. Neste artigo, vamos explorar com mais detalhes a Context API, uma das opções mais populares para gerenciamento de estado global em React.

O que é a Context API?

Context API é uma API do React que permite compartilhar dados entre componentes sem a necessidade de passar props manualmente entre cada componente. É uma alternativa ao gerenciamento de estado com Redux, por exemplo.

Quando usar a Context API?

A Context API é útil para compartilhar dados entre componentes que não estão diretamente conectados. Por exemplo, um componente de botão que precisa acessar o tema atual do aplicativo, ou um componente de formulário que precisa acessar o estado de autenticação do usuário.

Lista de Exemplos de Uso da Context API

A Context API pode ser aplicada em diversas situações em uma aplicação React. Aqui estão alguns exemplos práticos:

• Gerenciamento de Temas: Permitindo a mudança de temas (claro/escuro) em toda a aplicação.
• Dados de Autenticação: Compartilhando informações do usuário logado e controlando o acesso a áreas restritas.
• Configurações de Idioma: Para aplicações multilíngues, gerenciando a mudança de idiomas e localização.
• Compartilhamento de Dados de Formulários: Em formulários complexos ou multi-etapas, mantendo o estado dos dados inseridos.
• Controle de Layout: Gerenciando a visibilidade e o estado de componentes de layout, como barras laterais ou modais.
• Notificações e Mensagens: Distribuindo mensagens ou alertas globais, como erros de API ou confirmações.
• Estado de Carrinho de Compras: Em e-commerce, para gerenciar itens adicionados ao carrinho.

Como usar a Context API?

A Context API é composta por três partes principais: o contexto, o provedor e o consumidor.

O contexto é o objeto que contém os dados que serão compartilhados entre os componentes. O provedor é o componente que fornece os dados do contexto. O consumidor é o componente que consome os dados do contexto.

Gerenciando um Carrinho de Compras

Vamos usar a Context API para criar e gerenciar um carrinho de compras em uma aplicação React.

Passo 1: Criando o Contexto

Primeiro, precisamos criar um contexto para o nosso carrinho de compras:

import React from 'react'

const ShoppingCartContext = React.createContext()

export default ShoppingCartContext

Passo 2: Criando o Provedor de Contexto

Em seguida, criamos um provedor que irá gerenciar o estado do carrinho:

import React, { useState } from 'react'
import ShoppingCartContext from './ShoppingCartContext'

function ShoppingCartProvider({ children }) {
  const [cart, setCart] = useState([])

  const addToCart = (item) => {
    setCart((currentCart) => [...currentCart, item])
  }

  const removeFromCart = (itemId) => {
    setCart((currentCart) => currentCart.filter((item) => item.id !== itemId))
  }

  return (
    <ShoppingCartContext.Provider value={{ cart, addToCart, removeFromCart }}>
      {children}
    </ShoppingCartContext.Provider>
  )
}

export default ShoppingCartProvider

Passo 3: Consumindo o Contexto

Agora, qualquer componente que necessite interagir com o carrinho de compras pode consumir nosso contexto:

import React, { useContext } from 'react'
import ShoppingCartContext from './ShoppingCartContext'

function CartButton() {
  const { addToCart } = useContext(ShoppingCartContext)

  return (
    <button onClick={() => addToCart({ id: 1, name: 'Produto X', price: 100 })}>
      Adicionar ao Carrinho
    </button>
  )
}

export default CartButton

Passo 4: Visualizando o Carrinho

Por fim, para visualizar os itens no carrinho:

import React, { useContext } from 'react'
import ShoppingCartContext from './ShoppingCartContext'

function CartItems() {
  const { cart } = useContext(ShoppingCartContext)

  return (
    <div>
      {cart.map((item) => (
        <div key={item.id}>
          <p>
            {item.name}: ${item.price}
          </p>
        </div>
      ))}
    </div>
  )
}

export default CartItems

Conclusão

Usar a Context API para gerenciar um carrinho de compras em React torna o compartilhamento de estado entre componentes uma tarefa simples e eficiente. Este exemplo mostra como a Context API pode ser utilizada para gerenciar estados complexos e compartilhados em uma aplicação.

Não esqueça de me seguir no Twitter ou LinkedIn pra saber de todos os novos artigos ou insights.