O que é Redux: um guia do designer
Publicados: 2022-03-10Você já ouviu falar do Redux? O que é isso? Sem googlar, por favor!
- “Coisas de back-end sofisticadas.”
- “Já ouvi falar, mas não sei o que é. É um framework React, talvez?”
- “Uma maneira melhor de armazenar e gerenciar estados em um aplicativo React.”
Eu fiz essa pergunta para mais de 40 designers. O acima são suas respostas típicas. Muitos deles estão cientes de que o Redux funciona com React e seu trabalho é “gerenciamento de estado”.
Mas você sabe o que realmente significa essa “gestão do estado”? Você sabe que o verdadeiro poder do Redux está além de gerenciar o estado? Você sabia que o Redux não precisa necessariamente do React para funcionar ? Você quer participar da discussão da sua equipe (ou pelo menos dos bate-papos do almoço) sobre usar o Redux? Você quer projetar com uma compreensão de como o Redux funciona em mente?
Com a ajuda deste artigo, gostaria de mostrar a você uma visão completa do Redux : o que ele pode fazer, por que ele faz suas coisas, quais são as desvantagens, quando usá-lo e como ele se relaciona com o design.
Meu objetivo é ajudar designers como você. Mesmo que você não tenha escrito uma única linha de código antes, acho que ainda é possível e benéfico (e divertido) entender o Redux. Espere inglês simples e rabiscos – sem código ou conversas abstratas.
Pronto para o passeio?
O que é Redux?
Em um nível super alto, o Redux é uma ferramenta que os desenvolvedores usam para facilitar suas vidas. Como muitos de vocês devem ter ouvido, seu trabalho é “gerenciar o estado”. Explicarei o que significa gerenciamento de estado algumas seções depois. Neste ponto, deixo-vos com esta imagem:
Por que você deve se importar?
Redux é mais sobre o funcionamento interno de um aplicativo do que sua aparência. É uma ferramenta um tanto complexa com uma curva de aprendizado íngreme. Isso significa que nós, como designers, devemos ficar longe disso?
Não. Acho que devemos abraçá-lo. Um designer de carros deve entender para que serve o motor, certo? Para projetar interfaces de aplicativos com sucesso, os designers também devem ter um conhecimento sólido sobre as coisas sob o capô . Devemos aprender sobre o que ele pode fazer, entender por que os desenvolvedores o usam e estar cientes de suas vantagens e implicações.
“Design não é apenas o que parece e se sente. Design é como funciona.”
- Steve Jobs
O que o Redux pode fazer?
Muitas pessoas usam o Redux para gerenciar o estado em aplicativos React. É o caso de uso mais comum na natureza e o Redux melhora os aspectos em que o React não funciona bem (ainda).
No entanto, você logo verá que o verdadeiro poder do Redux vai muito além disso. Vamos começar aprendendo o que realmente significa gerenciamento de estado.
Gerenciamento de estado
Se você não tem certeza do que esse “estado” significa, vamos substituí-lo por um termo mais genérico: “dados”. Estado são dados que mudam de tempos em tempos . O estado determina o que é exibido na interface do usuário.
O que significa gestão estadual? Em geral, há três aspectos dos dados que precisaríamos gerenciar em um aplicativo:
- Buscando e armazenando dados
- Atribuindo dados a elementos da interface do usuário
- Alterando dados
Digamos que estamos construindo uma página de tiro do Dribbble. Quais são os dados que queremos exibir na página? Eles incluem a foto do perfil do autor, o nome, o GIF animado, o número de corações, os comentários e assim por diante.
Primeiro, precisamos buscar todos esses dados de um servidor na nuvem e colocá-los em algum lugar. Em seguida, precisamos realmente exibir os dados. Precisamos atribuir partes desses dados aos elementos de interface do usuário correspondentes que representam o que realmente vemos no navegador. Por exemplo, atribuímos a URL da foto do perfil ao atributo src de uma tag HTML img :
<img src='https://url/to/profile_photo'>Finalmente, precisamos lidar com as alterações nos dados. Por exemplo, se um usuário adiciona um novo comentário a uma foto do Dribbble ou adiciona uma estrela, precisamos atualizar o HTML de acordo.
Coordenar esses três aspectos do estado é uma grande parte do desenvolvimento front-end, e o React tem vários graus de suporte para essa tarefa. Às vezes, o recurso interno do React funciona bem o suficiente. Mas à medida que o aplicativo se torna mais complexo, seu estado pode se tornar mais difícil de gerenciar apenas com o React. É por isso que muitas pessoas começam a usar o Redux como alternativa.
Buscando e armazenando dados
No React, dividimos uma UI em componentes. Cada um desses componentes pode ser dividido em componentes menores (veja “O que é React?”).
Se nossa interface do usuário estiver estruturada dessa maneira, quando buscamos os dados e onde armazená-los antes de preencher a interface do usuário?
Imagine que há um chef morando em cada componente . Buscar dados de servidores é como obter todos os ingredientes necessários para preparar pratos.
Uma maneira ingênua é buscar e armazenar os dados onde e quando for necessário. É como se cada chef saísse para comprar legumes e carnes diretamente de fazendas distantes.
Essa abordagem é um desperdício. Precisaríamos chamar o servidor muitas vezes de muitos componentes — mesmo para os mesmos dados. Os chefs gastariam muito combustível e tempo viajando para frente e para trás.
Com o Redux, buscamos os dados uma vez e os armazenamos em um local central, convenientemente chamado de “armazenamento”. Os dados estão então prontos para uso a qualquer momento por qualquer componente. Isso não é diferente de ter uma superloja nas proximidades, onde nossos chefs podem comprar todos os ingredientes. A superloja envia caminhões para trazer vegetais e carnes a granel das fazendas. É muito mais eficiente do que pedir a chefs individuais para irem às próprias fazendas!
A loja também serve como a única fonte da verdade. Os componentes sempre recuperam dados da loja, não de qualquer outro lugar. Isso mantém todo o conteúdo da interface do usuário consistente.
Atribuindo dados a elementos da interface do usuário
Com apenas React, existe uma maneira melhor de buscar e armazenar dados. Podemos pedir ao nosso simpático chef Shotwell que faça as compras para todos os seus amigos chefs. Ele dirigia um caminhão para as fazendas e levava de volta as guloseimas. Poderíamos buscar dados de um componente de contêiner, por exemplo, o componente “Shot” no exemplo Dribbble, e usá-lo como a única fonte de verdade.
Essa abordagem é mais eficiente do que a maneira ingênua de buscar dados de cada componente. Mas como Shotwell passa os ingredientes para outros chefs? Como passar os dados para os componentes que realmente renderizam elementos HTML? Passamos dados de componentes externos para componentes internos, como o bastão em um relé, até que os dados cheguem ao destino.
Por exemplo, a URL do avatar do autor precisa ser passada de “Shot”, para “ShotDetail”, para “Title” e finalmente para a tag <img> . Se nossos chefs moram em um apartamento, fica assim:
Para entregar dados ao destino, teríamos que envolver todos os componentes no caminho, mesmo que eles não precisassem dos dados. Seria muito chato se houvesse muitos andares!
E se a superloja fizer entrega de porta em porta? Com o Redux 1 , podemos conectar qualquer dado em qualquer componente, sem afetar outros componentes, assim:
1 Para ser absolutamente preciso, é outra biblioteca chamada react-redux que entrega dados aos componentes do React, não ao próprio Redux. Mas como o react-redux apenas faz o encanamento e as pessoas quase sempre usam o Redux e o react-redux juntos, acho que é bom incluir isso como um dos benefícios do Redux.
Nota : Na versão mais recente do React (16.3), há uma nova API de “contexto” que faz quase o mesmo trabalho em termos de conectar dados em componentes. Portanto, se esta é a única razão pela qual sua equipe está usando o Redux, considere seriamente atualizar para o React 16.3! Confira o documento oficial para mais informações (aviso: muito código pela frente).
Alterando Dados
Às vezes, a lógica de atualização de dados em um aplicativo pode ser bastante complexa. Pode envolver várias etapas que dependem umas das outras. Talvez seja necessário aguardar as respostas de vários servidores antes de atualizar o estado do aplicativo. Podemos precisar atualizar muitos lugares no estado em momentos diferentes sob condições diferentes.
Pode ser avassalador se não tivermos uma boa estrutura para toda essa lógica. O código seria difícil de entender e manter.
Redux nos permite dividir e conquistar . Ele fornece uma maneira padrão de quebrar a lógica de atualização de dados em pequenos “redutores”. Esses redutores trabalham juntos harmoniosamente para completar uma ação complexa.
Fique de olho no desenvolvimento recente do React, no entanto. Assim como na API “context”, pode haver uma nova API “setState” em uma versão futura do React. Seria mais fácil dividir a lógica de atualização complexa em partes menores. Assim que essa nova API estiver disponível, é possível que você não precise mais do Redux para gerenciar esse aspecto do gerenciamento de estado.
O verdadeiro poder do Redux
Até agora, parece que o Redux é apenas um band-aid para o React. As pessoas usam o Redux para melhorar aspectos que o React não faz bem (ainda). Mas o React está alcançando rapidamente! Na verdade, Dan Abramov, o criador do Redux, se juntou à equipe principal do React no Facebook há alguns anos. Eles estão ocupados trabalhando nas melhorias mencionadas no React: API de contexto (lançada em 16.3), melhor API de busca de dados (demonstração em fevereiro de 2018), uma melhor API setState e assim por diante.
Isso tornará o Redux obsoleto?
Adivinha? Eu ainda não mostrei o verdadeiro poder do Redux!
O Redux força os desenvolvedores a seguir algumas regras rígidas, que trazem muito poder ao Redux (sim, o poder da disciplina!):
- Todos os dados (estado do aplicativo) devem ser descritos em texto claro. Você deve ser capaz de anotar todos os dados com uma caneta no papel.
- Cada ação (alteração de dados) deve ser descrita em texto claro. Você deve escrever o que vai fazer antes de mudar qualquer coisa. Você não pode alterar dados sem deixar uma marca. Esse processo é chamado de “despachar uma ação” na gíria do Redux.
- Seu código que altera os dados deve se comportar como uma fórmula matemática. Ele deve retornar o mesmo resultado com a mesma entrada. O quadrado de 4 é sempre 16, não importa quantas vezes você o execute.
Quando você segue essas regras para criar aplicativos, a mágica acontece. Ele permite muitos recursos interessantes que são difíceis ou caros de implementar. Aqui estão alguns exemplos. 2
2 Coletei esses exemplos do post de Dan Abramov “You Might Not Need Redux” e seu “React Beginner Question Thread”.
Desfazer refazer
O recurso popular de desfazer/refazer requer planejamento no nível do sistema. Como desfazer/refazer precisa gravar e reproduzir cada alteração de dados no aplicativo, você deve levar isso em consideração na arquitetura desde o início. Se for feito como uma reflexão tardia, seria necessário alterar muitos arquivos, o que é uma receita para inúmeros bugs.
Como o Redux exige que todas as ações sejam descritas em texto claro, o suporte para desfazer/refazer é quase gratuito. As instruções de como implementar desfazer/refazer com Redux cabem em uma página simples.
Ambiente Colaborativo
Se você estiver criando um aplicativo semelhante ao Google Docs em que vários usuários trabalham juntos em uma tarefa complexa, considere usar o Redux. Provavelmente fará muito levantamento de peso para você.
O Redux torna muito fácil enviar o que está acontecendo pela rede. É simples receber ações que outro usuário executa em outra máquina, reproduzir as alterações e mesclar com o que está acontecendo localmente.
IU otimista
A IU otimista é uma maneira de melhorar a experiência do usuário de um aplicativo. Isso faz com que o aplicativo pareça responder mais rápido em uma rede lenta. É uma estratégia popular em aplicativos que exigem respostas em tempo real, por exemplo, um jogo de tiro em primeira pessoa.
Como um exemplo simples, no aplicativo do Twitter, quando você clica no coração de um tweet, ele precisa solicitar ao servidor que faça algumas verificações, por exemplo, se esse tweet ainda existe. Em vez de esperar muitos segundos pelo resultado, o app opta por trapacear! Ele assume que está tudo bem e mostra um coração cheio imediatamente.
Essa abordagem funciona porque na maioria das vezes tudo está bem. Quando as coisas não estiverem bem, o aplicativo reverterá as atualizações anteriores da interface do usuário e aplicará o resultado real do servidor, por exemplo, mostrará uma mensagem de erro.
O Redux suporta UI otimista da mesma forma que faz para desfazer e refazer. Facilita a gravação, reprodução e reversão de alterações de dados ao receber um resultado negativo do servidor.
Persistindo e inicializando a partir do estado
O Redux facilita salvar o que está acontecendo em um aplicativo no armazenamento. Mais tarde, mesmo que o computador reinicie, o aplicativo pode carregar todos os dados e continuar exatamente no mesmo local, como se nunca tivesse sido interrompido.
Se você construir um jogo com Redux, precisará apenas de mais algumas linhas de código para salvar/carregar o progresso do jogo, sem alterar o restante do código.
Sistemas realmente extensíveis
Com o Redux, você deve “despachar” uma ação para atualizar quaisquer dados em um aplicativo. Essa restrição possibilita conectar-se a quase todos os aspectos do que está acontecendo em um aplicativo.
Você pode construir aplicativos realmente extensíveis onde cada função pode ser personalizada pelo usuário. Por exemplo, confira o Hyper, um aplicativo de terminal construído com Redux. A extensão “hiperpotência” adiciona borrifos ao cursor e sacode a janela. Como você gosta deste modo “uau”? (Talvez não seja muito útil, mas o suficiente para impressionar os usuários)
Depuração de viagem no tempo
Que tal poder viajar no tempo ao depurar um aplicativo? Você executa o aplicativo, retrocede ou avança algumas vezes para encontrar o local exato em que o erro ocorre, corrige o erro e reproduz novamente para confirmar.
O Redux torna realidade esse sonho dos desenvolvedores. O Redux DevTools permite que você manipule o progresso de um aplicativo em execução como um vídeo do YouTube - arrastando um controle deslizante!
Como funciona? Lembre-se das três regras rígidas que o Redux impõe? Esse é o molho secreto da magia.
Relatórios de bugs automatizados
Imagine isso: um usuário encontra algo errado em seu aplicativo e deseja relatar o bug. Ela cuidadosamente lembra e descreve o que ela fez. Um desenvolvedor tenta seguir as etapas manualmente para ver se o bug ocorre novamente. O relatório de bug pode ser vago ou impreciso. O desenvolvedor está tendo dificuldade em encontrar onde está o bug.
Agora, que tal isso. O usuário clica no botão “Reportar bug”. O sistema envia automaticamente o que ela fez para o desenvolvedor. O desenvolvedor clica no botão “Replay bug” e observa como esse bug acontece exatamente. O bicho é esmagado na hora, todo mundo fica feliz!
Isso é exatamente o que aconteceria se você usasse o Redux Bug Reporter. Como funciona? As restrições do Redux fazem maravilhas.
Desvantagens do Redux
As três principais regras que o Redux impõe são uma faca de dois gumes. Eles habilitam recursos poderosos, mas ao mesmo tempo causam desvantagens inevitáveis.
Curva de aprendizado íngreme
O Redux tem uma curva de aprendizado relativamente íngreme. Leva tempo para entender, lembrar e se acostumar com seus padrões. Não é recomendado aprender Redux e React ao mesmo tempo se ambos forem novos para você.
Código de “boilerplate”
Em muitos casos, usar Redux significa escrever mais código. Muitas vezes, é necessário tocar em vários arquivos para que um recurso simples funcione. As pessoas têm reclamado do código “boilerplate” que teriam que escrever com o Redux.
Eu sei, isso soa contraditório. Eu não disse que Redux torna possível implementar recursos com código mínimo ? Isso é um pouco como usar uma máquina de lavar louça. Primeiro, você teria que gastar o tempo arrumando cuidadosamente os pratos em fileiras. Só então você verá os benefícios da máquina de lavar louça: economizando tempo na limpeza da louça, na higienização da louça etc. Você tem que decidir se o tempo de preparação vale a pena!
Penalidade de Desempenho
O Redux também pode ter um impacto no desempenho devido às restrições impostas. Ele adiciona um pouco de sobrecarga sempre que os dados são alterados. Na maioria dos casos, não é grande coisa, e a desaceleração não é perceptível. Ainda assim, quando há uma grande quantidade de dados na loja e quando os dados mudam com frequência (por exemplo, quando o usuário está digitando rapidamente em um dispositivo móvel), a interface do usuário pode ficar lenta como resultado.
Bônus: Redux não é apenas para reagir
Um equívoco comum é que Redux é apenas para React. Parece que o Redux não pode fazer nada sem o React. De fato, o Redux complementa o React de algumas maneiras importantes, como discutimos anteriormente. É o caso de uso mais comum.
No entanto, na verdade, o Redux pode funcionar com qualquer framework front-end, como Angular, Ember.js ou mesmo jQuery, ou mesmo JavaScript vanilla. Tente pesquisar no Google, você encontrará isso, isso, isso ou até isso. As ideias gerais do Redux se aplicam a qualquer lugar!
Contanto que você use o Redux com sabedoria, você pode obter seus benefícios em muitas situações – não apenas em um aplicativo React.
Conclusão
Como qualquer ferramenta, o Redux oferece uma compensação. Ele permite recursos poderosos, mas também tem desvantagens inevitáveis. O trabalho de uma equipe de desenvolvimento é avaliar se a compensação vale a pena e tomar uma decisão consciente.
Como designers, se entendermos as vantagens e desvantagens do Redux, poderemos contribuir para essa tomada de decisão do ponto de vista do design. Por exemplo, talvez pudéssemos projetar a interface do usuário para mitigar o possível impacto no desempenho? Talvez pudéssemos defender a inclusão de recursos de desfazer/refazer para remover um monte de diálogos de confirmação? Talvez possamos sugerir uma interface de usuário otimista, pois melhora a experiência do usuário com um custo relativamente baixo?
Entenda os benefícios e as limitações de uma tecnologia e projete de acordo. Acho que é isso que Steve Jobs quis dizer com “design é como funciona”.