DEV Community

Roberson Miguel
Roberson Miguel

Posted on

Integrando Redis em uma Aplicação Rails com React

Nos posts anteriores, discutimos como integrar o React com uma aplicação Rails para construir um Design System robusto e moderno. Iniciamos verificando as rotas do Rails e identificando onde os novos componentes React precisariam ser inseridos. A seguir, criamos componentes React correspondentes e configuramos suas rotas, garantindo que fossem consistentes com as rotas do Rails. A estrutura do projeto foi organizada de forma a facilitar a reutilização de componentes e a manutenção do código.

Também abordamos a implementação de feature toggles para sistemas legados, permitindo que novas funcionalidades fossem ativadas apenas para um subconjunto de usuários, enquanto o restante continuava com a interface antiga. Além disso, exploramos técnicas de gerenciamento de estado, integração com APIs, autenticação, autorização, e práticas de componentização, estilização e otimização de performance.

Avançando com Redis na Integração Rails e React

Com a base sólida da integração React e Rails estabelecida, o próximo passo natural é otimizar a performance e escalabilidade da aplicação. É aqui que o Redis entra em cena. Como uma estrutura de dados em memória extremamente rápida, o Redis pode ser utilizado para diversas finalidades, como caching, gerenciamento de sessões, e processamento de tarefas em segundo plano. A inclusão do Redis no nosso stack não apenas melhora a velocidade de acesso a dados frequentemente utilizados, mas também alivia a carga no banco de dados principal e proporciona uma experiência de usuário mais fluida.

Vamos explorar como configurar e utilizar o Redis em nossa aplicação, começando pela instalação e configuração no Rails, passando pelo uso em filas de tarefas com Sidekiq, e finalizando com a integração de dados entre Rails e React. Essa etapa é crucial para garantir que a aplicação possa escalar eficientemente e responder rapidamente às necessidades dos usuários, especialmente em ambientes de produção.

Para incluir o Redis no seu processo, é importante começar com uma breve explicação sobre o que é o Redis e como ele pode ser útil em uma aplicação. A partir daí, podemos explorar algumas maneiras práticas de integrá-lo em sua stack Rails com React.

O que é o Redis?

Redis é uma estrutura de dados em memória que pode ser usada como um banco de dados, cache, e sistema de mensagens. É extremamente rápido e versátil, suportando diversas estruturas de dados como strings, listas, conjuntos, hashes e mais. Devido à sua natureza em memória, Redis é muitas vezes utilizado para melhorar o desempenho de aplicações através do armazenamento temporário de dados que são acessados com frequência, mas que não precisam ser armazenados permanentemente.

Usos Comuns do Redis

  1. Cache de Dados:
    O Redis pode armazenar respostas de consultas frequentes a fim de reduzir a carga no banco de dados principal e acelerar o tempo de resposta.

  2. Gerenciamento de Sessões:
    Armazenar sessões de usuário em memória para aplicações web, proporcionando acessos rápidos e mantendo o estado da sessão.

  3. Filas de Tarefas:
    Redis pode ser utilizado para implementar filas de tarefas, permitindo o processamento assíncrono de jobs, como o envio de emails ou o processamento de dados em segundo plano.

  4. Pub/Sub (Publicação/Assinatura):
    Redis suporta o modelo de mensagens pub/sub, permitindo que as mensagens sejam enviadas para múltiplos subscritores.

Integrando Redis em uma Aplicação Rails com React

1. Configuração do Redis no Rails

Para usar o Redis com Rails, você precisa adicionar a gem redis ao seu Gemfile:

gem 'redis'
gem 'redis-rails'
Enter fullscreen mode Exit fullscreen mode

Em seguida, execute bundle install para instalar as gems.

Configuração de Cache:

No arquivo de configuração config/environments/production.rb (ou development.rb, dependendo do ambiente), configure o Redis como o store de cache:

config.cache_store = :redis_store, {
  host: "localhost",
  port: 6379,
  db: 0,
  namespace: "cache"
}, { expires_in: 90.minutes }
Enter fullscreen mode Exit fullscreen mode

Gerenciamento de Sessões:

Se você deseja usar o Redis para gerenciamento de sessões, configure-o da seguinte maneira:

Rails.application.config.session_store :redis_store, servers: "redis://localhost:6379/0/session"
Enter fullscreen mode Exit fullscreen mode

2. Uso de Redis para Filas de Tarefas

Uma das maneiras mais comuns de utilizar Redis é em combinação com a biblioteca Sidekiq para processamento de jobs em segundo plano.

Instalação do Sidekiq:

Adicione a gem sidekiq ao Gemfile:

gem 'sidekiq'
Enter fullscreen mode Exit fullscreen mode

Configure o Sidekiq para usar Redis, criando o arquivo config/initializers/sidekiq.rb:

Sidekiq.configure_server do |config|
  config.redis = { url: 'redis://localhost:6379/0' }
end

Sidekiq.configure_client do |config|
  config.redis = { url: 'redis://localhost:6379/0' }
end
Enter fullscreen mode Exit fullscreen mode

Crie um worker do Sidekiq:

class HardWorker
  include Sidekiq::Worker

  def perform(*args)
    # Código para ser executado em background
    puts "Doing hard work"
  end
end
Enter fullscreen mode Exit fullscreen mode

Para enfileirar um job:

HardWorker.perform_async('argumento1', 'argumento2')
Enter fullscreen mode Exit fullscreen mode

3. Uso de Redis com React

Para integrar Redis com a parte React da aplicação, você pode utilizá-lo para servir dados rapidamente ao frontend. Por exemplo, se você estiver armazenando dados de sessão ou preferências de usuário no Redis, você pode criar endpoints na API do Rails que consultam o Redis para essas informações e as enviam para o frontend.

Exemplo de API para React:

class Api::V1::PreferencesController < ApplicationController
  def show
    user_id = params[:id]
    preferences = Redis.current.get("user:#{user_id}:preferences")
    render json: preferences
  end
end
Enter fullscreen mode Exit fullscreen mode

No lado do React, você faria uma chamada para esse endpoint para obter os dados:

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const UserPreferences = ({ userId }) => {
  const [preferences, setPreferences] = useState({});

  useEffect(() => {
    axios.get(`/api/v1/preferences/${userId}`)
      .then(response => setPreferences(response.data))
      .catch(error => console.error('Error fetching preferences:', error));
  }, [userId]);

  return (
    <div>
      <h1>User Preferences</h1>
      <pre>{JSON.stringify(preferences, null, 2)}</pre>
    </div>
  );
};

export default UserPreferences;
Enter fullscreen mode Exit fullscreen mode

Conclusão

O Redis é uma adição importante no seu projeto, oferecendo benefícios significativos em termos de performance e escalabilidade. Seja utilizando-o para caching, gerenciamento de sessões, ou filas de tarefas, ele pode ajudar a otimizar a sua aplicação e melhorar a experiência do usuário.

Top comments (0)