Se você ainda não sabe o que é redux, neste artigo vamos nos concentrar em explicar tudo o que você deve saber sobre esta biblioteca de JavaScript, bem como seus usos, como pode ser usado, etc. Desta forma, você terá todas as ferramentas necessárias para poder integrá-lo em seus próximos projetos JS.
Vamos ver como é o Redux!
O que é JavaScript?
Javascript (JS), é uma linguagem de programação interpretada. É considerado um dialeto do padrão ECMAScript e se caracteriza por ser orientado a objetos, baseado em protótipos, imperativo, de tipo fraco e dinâmico. Apesar do nome, não deve ser confundido com Java. A sua criação baseia-se em considerações comerciais, na sequência da aquisição da Sun Microsystems (criadora do Java) pela Netscape Navigator (criadora do LiveScript) e da mudança de nome da linguagem de programação.
Principalmente usado no lado do cliente, formando parte integrante dos navegadores da web. Isso permite melhorar a interface do usuário e criar páginas da web dinâmicas. Além disso, o JavaScript pode ser usado no lado do servidor, conhecido como Server-side JavaScript ou SSJS. Sua aplicabilidade vai além da web, sendo utilizada em documentos PDF e aplicativos de desktop, principalmente widgets, etc.
La A sintaxe do JavaScript se assemelha à de linguagens como C++ e Java, embora adote nomes e convenções de Java, daí seu nome. Mas, como mencionei antes, é importante observar que, apesar do nome semelhante, Java e JavaScript possuem semânticas e finalidades diferentes.
Por outro lado, devemos lembrar que JavaScript utiliza uma implementação do Document Object Model (DOM), e que JS é a única linguagem de programação que os navegadores entendem nativamente. Inicialmente, era utilizado em páginas web HTML para operações no cliente sem acesso ao servidor. No entanto, hoje é amplamente utilizado para enviar e receber informações do servidor, muitas vezes em combinação com tecnologias como AJAX. O JavaScript é interpretado no agente do usuário enquanto as instruções são baixadas junto com o código HTML.
Aplicativos JS
JavaScript é uma linguagem de programação amplamente utilizada em uma variedade de aplicações e contextos, como:
- Desenvolvimento web: É essencial no desenvolvimento web. É usado para melhorar a interatividade e a experiência do usuário em sites e aplicações web. É utilizado na criação de formulários interativos, efeitos visuais, validações de dados em tempo real e navegação dinâmica, entre outros. Presente em:
- Front-end da Web: É a base do desenvolvimento front-end. Frameworks e bibliotecas como React, Angular e Vue.js dependem de JavaScript para criar interfaces de usuário interativas e dinâmicas em aplicações web.
- Back-end da web: Através de plataformas como Node.js, JavaScript é usado no lado do servidor para construir aplicações web completas. Isso permite que um desenvolvedor use JavaScript tanto no front-end quanto no back-end de um aplicativo, facilitando a sincronização de dados e a criação de aplicativos em tempo real.
- Aplicativos de servidor: Embora não seja tão comum quanto outras linguagens do lado do servidor, o JavaScript é usado no desenvolvimento de aplicativos de servidor por meio do Node.js. Isto é especialmente útil para aplicações em tempo real e aplicações que lidam com um grande número de solicitações simultâneas.
- Aplicativos móveis: É utilizado no desenvolvimento de aplicações móveis híbridas utilizando frameworks como React Native e Ionic. Essas estruturas permitem que os desenvolvedores escrevam uma vez e executem o aplicativo em diversas plataformas, como iOS e Android.
- Jogos online: É utilizado no desenvolvimento de jogos online e jogos de navegador. Bibliotecas como Phaser e Three.js facilitam a criação de jogos 2D e 3D interativos no navegador.
- Aplicativos de área de trabalho: Por meio de ferramentas como Electron, é possível construir aplicativos desktop multiplataforma usando tecnologias web como HTML, CSS e JavaScript.
- Extensões do navegador: Para adicionar funcionalidades adicionais aos navegadores da web, são usadas extensões. Essas extensões geralmente são escritas em JavaScript.
- Aplicativos da Internet das Coisas (IoT): É utilizado no desenvolvimento de aplicações e sistemas para dispositivos IoT devido à sua capacidade de comunicação com hardware e sensores por meio de APIs e bibliotecas especializadas.
O que é Redux e como funciona?
Redux é uma biblioteca JavaScript de código aberto que é usado para gerenciar o estado em aplicativos e influenciado pela linguagem funcional Elm. Muitas vezes é combinado com outras bibliotecas, como React ou Angular, para construir interfaces de usuário. Foi concebido por Dan Abramov e Andrew Clark, que se inspiraram na biblioteca do Facebook chamada Flux.
De modo geral, Redux é uma pequena biblioteca com um API simples e limitada, projetado para atuar como um contêiner previsível para o estado do aplicativo. Seu funcionamento é semelhante ao conceito de “redução” da programação funcional.
A história do Redux remonta a 2015, quando Dan Abramov começou a desenvolver a primeira versão do Redux enquanto se preparava para dar uma palestra na conferência React Europe sobre Hot Reloading. Durante este processo, Abramov notou a semelhança entre o padrão Flux e a função redutora. Essa observação o levou a se perguntar se um armazenamento Flux poderia realmente ser uma função redutora.
Para concretizar essa ideia, Abramov contatou Andrew Clark, autor da implementação do Flux chamada Flummox. Juntos, eles colaboraram para dar vida ao Redux e definiram uma API coerente. Além disso, eles implementaram a capacidade de extensão usando middleware e melhoradores de loja, que contribuiu significativamente para o atual ecossistema Redux, ampliando ainda mais suas possibilidades.
Relacionamento Redux e React: o que é React
React é uma biblioteca JavaScript que se concentra na criação de interfaces de usuário, embora sua versatilidade vá além dessa definição. Esta ferramenta, inicialmente desenvolvida pelo Facebook, é de código aberto e amplamente utilizada devido à sua capacidade de criar rapidamente interfaces de usuário em uma variedade de aplicações, incluindo aplicações web de página única (SPA) e aplicações Android e iOS.
Ao contrário de outros frameworks, como o Angular, que oferecem abordagens mais complexas, o React é se destaca pela capacidade de gerar interfaces de usuário eficientemente. Isto é conseguido através do uso de arquivos .jsx, que combinam lógica e interface de usuário em um único arquivo e são organizados em unidades chamadas componentes.
DOM virtual: o que é?
Quando nos aprofundamos no mundo do ReactJS, provavelmente ouvimos frequentemente sobre o conceito do DOM Virtual. Essa ideia se origina de uma noção engenhosa: em vez de atualizar todo o DOM real, modificamos apenas a parte que realmente precisa de alterações. Em aplicativos JavaScript antigos, costumávamos receber dados no formato JSON do servidor e então gerar um novo HTML completo para renderizar, resultando em uma atualização de toda a página a cada modificação.
Como instalar e configurar Redux em seu projeto
Se você quer saber como instalar ReduxA verdade é que não é nada complicado. Para fazer isso você deve ir ao terminal e a partir daí executar o seguinte comando:
npm i -S redux
Agora você tem a versão estável do Redux instalada em seu sistema. Claro, você provavelmente precisará resolver algumas dependências, como ter o npm, o gerenciador de pacotes Node.js, instalado. Feito isso, vamos instalar o React, que você também precisará aproveitar o Redux, bem como as ferramentas de desenvolvimento para poder começar a criar seus projetos.
Para instalar esses outros pacotes, os comandos que você deve executar são:
npm i -S react-redux npm i -D redux-devtools
Agora você teria tudo pronto para começar. Se você for até a pasta ou diretório principal onde o Redux foi instalado, verá que existem vários subdiretórios ou subpastas, como STORE, REDUCERS, ACTIONS, TYPES. Você deve saber o que cada um é:
- AÇÕES: São objetos que devem ter duas propriedades, uma que descreve o tipo (TIPO) da ação e outra que descreve o que deve ser alterado no estado do app.
- REDUTORES- Redutores são funções que implementam o comportamento das ações. Eles alteram o estado do aplicativo, dependendo da descrição da ação e da descrição da mudança de estado.
- LOJA: é o local onde as ações e os redutores se encontram, mantendo e alterando o estado do aplicativo. Há apenas um.
- TIPOS: como eu disse antes, é o tipo de ação.
Exemplo prático: Criando uma aplicação com Redux
Un exemplo usando Redux Poderia ser o seguinte, onde um aplicativo de contabilidade simples é feito usando Redux. Mas para fazer isso, você deve primeiro configurar o Redux e definir suas ações e redutores:
// Importa bibliotecas Redux import { createStore } from 'redux'; // Defina as ações const incrementAction = { type: 'INCREMENT' }; const decrementAction = { tipo: 'DECREMENT' }; // Defina o redutor const counterReducer = (state = 0, action) => { switch (action.type) { case 'INCREMENT': return state + 1; case 'DECREMENT': estado de retorno - 1; padrão: estado de retorno; } }; // Cria a loja Redux const store = createStore(counterReducer); // Assine as alterações na loja store.subscribe(() => { console.log('Current counter state:', store.getState()); }); // Despacha ações para modificar o estado store.dispatch(incrementAction); store.dispatch(incrementAction); store.dispatch(decrementAction);
Este é um exemplo muito simples de como usar o Redux. Em um aplicativo maior, você definiria ações e redutores mais complexos e conectaria componentes React para acessar e atualizar o estado da loja. Mas pelo menos isso dá uma ideia de como funciona...