Aula 15 - Introdução ao Redux

Prévia do material em texto

PROGRAMAÇÃO 
FRONT END II 
Vinícius Silveira Magnus 
Introdução ao Redux
Objetivos de aprendizagem
Ao final deste texto, você deve apresentar os seguintes aprendizados:
 � Definir os conceitos básicos do Redux.
 � Listar as características do Redux.
 � Ilustrar a aplicação do Redux com o React.
Introdução
A biblioteca de código aberto Redux é amplamente utilizada com o 
React, para o gerenciamento de estado da sua aplicação.
Neste capítulo, primeiramente, abordaremos os conceitos que são a 
base para o uso da biblioteca, além de sua aplicação no Redux e em sua 
arquitetura, possibilitando uma visão ampla de tudo que acontece dentro 
dela. Também, ilustraremos uma aplicação utilizando o Redux, juntamente 
com o React, mostrando como o desenvolvedor pode trabalhar com as 
duas bibliotecas em conjunto para facilitar o seu trabalho.
Conceitos básicos do Redux
Redux é uma biblioteca JavaScript de código aberto, utilizada, comumente com 
o React, para gerenciar os dados da aplicação (REDUX..., 2019). Entende-se 
como dado qualquer entrada de informação — por exemplo, a alimentação de 
um formulário pelo usuário, o clique de um botão, o carregar de uma página, 
a chamada a uma API, etc. Assim, o Redux auxiliará com o comportamento 
da aplicação, de acordo com informações alimentadas no ambiente. 
Ele também pode ser utilizado por outras bibliotecas ou frameworks que 
têm compatibilidade com a arquitetura de componentes, como Angular e Vue. 
O Redux é uma implementação da arquitetura Flux, criada pelo Facebook 
para organizar uma forma de trabalhar com o React, usando de um conceito 
chamado fluxo unidirecional de dados (STEFANOV, 2016). 
A criação do Redux foi de responsabilidade de Dan Abramov e Andrew 
Clark, em 2015, quando buscavam uma implementação prática para a arqui-
tetura Flux.
Veja, a seguir, alguns benefícios do uso do Redux:
 � controle do estado da aplicação em um local centralizado;
 � tratamento de forma unificada do fluxo de dados da aplicação;
 � facilidade na troca de informações entre componentes;
 � controle dos “efeitos colaterais” da aplicação de forma simplificada.
Para o entendimento do Redux, é de fundamental importância que tenhamos 
o domínio de determinados conceitos que são utilizados para compor essa 
biblioteca ou utilizados juntamente com ela, como os de estado de componentes, 
hooks e arquitetura Flux. Também são necessários para o desenvolvedor front 
end que deseja entender e implementar o Redux de uma forma consciente e 
extrair o máximo de proveito dessa biblioteca.
Estados de um componente 
Quando trabalhamos no desenvolvimento de componentes, estamos cons-
tantemente trabalhando com estados — ou states —, que são as informações 
armazenadas em um local em um determinado instante de tempo. 
No React, a forma mais fácil de manipular componentes é por meio de 
hooks, sem a necessidade do uso de classes, mas, sim, de funções, o que tem 
se tornado um padrão no desenvolvimento com a arquitetura de componentes 
nos dias de hoje.
A seguir, um exemplo de um componente feito a partir de uma classe, 
cujo estado contém uma variável name com valor inicial (ou estado inicial) 
definido a partir de uma props chamada de name.
Introdução ao Redux2
Uma forma de simplificação é por meio do React 16.8, que tem os hooks 
incorporados, cujas funções possibilitam que o desenvolvedor adicione recursos 
de estado e ciclo de vida aos componentes de função. A seguir, um código 
utilizado para criar uma variável de estado chamada de name, sua função 
para evoluir seu estado setState, e a função que cria e inicializa o estado, 
o useState().
3Introdução ao Redux
Para saber mais sobre os hooks e sua implementação, acesse o link a seguir. Nele, você 
verá como o estado de um componente é gerenciado sem o uso de Redux e, conse-
quentemente, perceberá a importância e a facilidade que ele traz ao desenvolvedor.
https://qrgo.page.link/Hj5Ae
Usando estados com componentes classes ou funções, o grande desafio é 
a chamada “evolução do estado”, que é, por exemplo, a modificação de uma 
determinada informação em um componente — quando um nome é alterado, 
um número é incrementado. Dissemos que o estado evoluiu. Mas a grande 
dificuldade é que o estado do componente é interno e vinculado a ele. Uma vez 
que o componente é criado, precisamos acessar os métodos e as propriedades 
dele para que seu estado evolua. Para tanto, é necessário o “envio” de um 
representante do componente para onde desejamos que o estado seja evoluído. 
Veja o exemplo a seguir.
É exatamente nesse ponto que entra o Redux, chamando a responsabilidade 
do gerenciamento dos estados dos componentes da sua aplicação e abstraindo 
diversos processos que são necessários para a manipulação e evolução desses 
estados.
Introdução ao Redux4
Sempre é recomendado que o desenvolvedor que utilizará o Redux tenha um bom 
domínio dos conceitos de gerenciamento de estado do componente e de seu ciclo 
de vida sem ele. Saber o que acontece “atrás” das abstrações de uma biblioteca torna 
o uso dela muito mais sólido, gerando mais possibilidades ao desenvolvedor front end.
Arquitetura Flux
A arquitetura Flux foi criada com o objetivo de simplificar um processo de 
manipulação de estado, introduzindo o conceito de que os estados não são 
dos componentes, mas, sim, de toda a aplicação. Tecnicamente, os estados 
dos componentes são vinculados ao que se chama de store (FLUX..., 2019). 
Segundo o Facebook, na sua documentação de conceitos iniciais do Flux, a 
base da arquitetura está em quatro elementos (FLUX, 2019, documento on-line):
 � dispatcher — recebem as ações e envia às stores registradas nos res-
pectivos dispatchers, onde todas elas receberão as ações que acontecem 
na aplicação; 
 � store — são os locais que mantêm os dados da aplicação e fazem os 
registros nos dispatchers, a fim de receber as ações provenientes de 
toda a aplicação. Dados de uma store são alterados somente a partir 
de uma ação, que devem ter sua lógica para decidir a quais ações ela 
deve responder, pois uma aplicação geralmente possui inúmeras stores; 
 � action — também chamada de API interna do aplicativo, trata-se de 
descrições das ações que estão ocorrendo na aplicação, como o clique 
de um botão ou o carregamento de uma página;
 � view — onde os dados das stores são exibidos, por meio de uma inscrição 
em uma determinada store.
A Figura 1, a seguir, mostra o fluxo de dados que deve ser seguido por 
uma aplicação que implementa a arquitetura Flux. Resumindo, a view envia 
ações para o dispatcher, que as envia para todas as stores, que enviam dados 
à view. Existe outra entrada de ação que não é proveniente das views, mas que 
também é comum na arquitetura.
5Introdução ao Redux
Figura 1. Fluxo proposto pela arquitetura Flux.
Fonte: flux-concepts (2017, documento on-line).
A arquitetura serve como um padrão para quem deseja organizar o fluxo de 
dados em uma aplicação, a fim de se criar um processo organizado, trazendo 
inúmeros benefícios para quem implementa tal arquitetura. Nesse contexto, 
o Redux é uma biblioteca que segue a arquitetura Flux para realizar a sua 
implementação.
Principais características do Redux
O Redux chega para facilitar o gerenciamento de todo o estado da aplicação, 
por meio da base da arquitetura Flux, introduzindo alguns conceitos para 
implementação (REDUX..., 2019).
Action
Action são as ações que acontecem na aplicação e podem ser disparadas pelo 
próprio usuário ou pela aplicação. Cada action criada necessita da propriedade 
type, como forma obrigatória e única, que o Redux usa para distinguir a 
ação que foi executada. Veja o exemplo a seguir. 
Introdução ao Redux6
A mesma deve estar dentro de uma chamada action functions ou action 
creators, que, ao ser invocada, ativa os reducers, como mostrado no exemplo 
a seguir.
Store
Store é um local para acondicionamento do estado global para o Redux, onde 
fica armazenada a maioria das informações da aplicação. Ela é montada no 
formatode objeto, assim como a action. 
No seguinte exemplo, está montado um estado inicial em um objeto a ser 
carregado em uma store, cujo conteúdo possui uma array de objetos com 
título e texto a serem exibidos em um determinado local da aplicação e uma 
variável que define o conteúdo inicial.
7Introdução ao Redux
Quando temos valores que iniciam a aplicação, chamamos os mesmos de 
estado inicial, e podem ser colocados em uma constante e posteriormente 
enviados a uma função de reducer, como estado inicial. Veja o exemplo a seguir.
Reducer
Reducer é disparado pelas action functions, que recebem as informações 
e selecionam quais states serão modificadas dentro da store, conforme o 
seguinte exemplo.
A estrutura de seleção geralmente é colocada dentro de uma função reducer, 
que recebe o state e a action para realizar suas ações, como no trecho de 
código a seguir. Dentro do mesmo, colocaríamos a seleção do código anterior.
Introdução ao Redux8
O estado inicial é utilizado para definir o valor na primeira vez em que 
o reducer for utilizado. Posteriormente, quando os estados forem evoluindo, 
novos serão passados aos reducers que, por sua vez, atualizarão as stores e 
seus states.
Devemos, também, enviar nossas funções redutoras para “dentro” das 
stores. Na verdade, com isso, estamos possibilitando que os dispatchers possam 
dispará-las. Observe a seguir.
Conexão entre componente e Redux
Para realizarmos o vínculo dos componentes com o Redux, devemos seguir 
alguns passos. Primeiramente, devemos vincular um dispatch a uma view, 
usando o seguinte comando:
Precisamos que esse dispatch seja feito a partir de uma ação do usuário 
— por exemplo, no onClick — e passarmos para ele a função que definimos 
como action creator, para a mesma ser acionada, conforme segue.
Para que o componente seja atualizado, precisamos observar o que está 
acontecendo com o estado toda vez que a store é atualizada. Para isso, 
usamos as seguintes funções, sendo a primeira a maneira como realizamos o 
vínculo, e a segunda, como buscamos os valores. 
9Introdução ao Redux
Para que os valores de nossos componentes sejam atualizados, podemos 
fazer o uso de hooks, que facilitam a manipulação dos estados globais nos 
componentes. No exemplo a seguir, podemos observar como isso fica. Toda 
vez que alguma alteração ocorrer na store, uma função hooks setContent 
será disparada e atualizará a nossa variável de estado local, chamada con-
tent. Com ela, podemos buscar o conteúdo no estado global, dentro do array 
contents[], onde atualizaremos o título e o texto de nosso componente 
sempre que o valor for modificado. 
Ao final, o fluxo fica como mostrado na Figura 2, a seguir.
Figura 2. Fluxo do Redux.
Fonte: Fernandes (2018, documento on-line).
Introdução ao Redux10
Aplicação do Redux com o React
Para utilizarmos o Redux com o React, devemos fazer o processo de instalação 
a partir do terminal de comando em um projeto ou globalmente. Podemos 
criar a aplicação React a partir do pacote disponibilizado pelo Facebook com 
uma estrutura pré-configurada do ambiente necessário e, depois, iniciar a 
aplicação com três comandos:
npx create-react-app my-app-redux
cd my-app-redux
npm start
Depois, dentro de nossa aplicação, podemos fazer a instalação a partir do 
npm, que disponibiliza a biblioteca em um pacote, além de outro que faz a 
conexão entre o Redux e o React. Os comandos são, respectivamente: 
npm install redux
npm install react-redux
Exemplo de aplicação 
O código, a seguir, mostra a aplicação em um único arquivo dos conceitos 
vistos na sessão anterior. O conteúdo de um componente, denominado <Sec-
tion />, é alterado pelo clique dos botões que estão em outro componente, 
denominado <Nav />. Nesses processos, fazemos a importação da { crea-
teStore } do pacote da biblioteca redux para podemos criar nossa store e 
manipularmos os estados por meio das funções disponibilizadas pela biblioteca.
11Introdução ao Redux
Introdução ao Redux12
Primeiramente, realizamos as importações dos módulos que utilizaremos. 
Do React, importamos o modulo principal React e o módulo para usar os 
estados com hooks { useState }. Já do pacote do Redux, necessitamos 
importar o módulo para a criação e o gerenciamento das stores, que é o 
{ createStore }.
13Introdução ao Redux
O item objeto de estado inicial, chamado INITIAL_STATE, é montado 
para armazenar o índice do conteúdo atual que será exibido, na variável 
content, e um array contents com os conteúdos a serem utilizados, 
cada um com title e text.
A função redutora, chamada function content(), recebe um objeto 
com o estado atual — onde, na primeira execução, será o INITIAL_STATE 
— e realiza a ação baseada na action,type, que é o item que define o tipo 
de ação que deve ser tomada pela função redutora. Logo após, uma store é 
criada com o comando createStore(), passando a função redutora como 
parâmetro para a criação da mesma.
A action creator, ou função da ação, é definida com o type SET_CONTENT. 
A mesma garante que, quando essa ação for chamada, uma variável que define 
o conteúdo será passada por paramento, usada para alterar o conteúdo em 
questão. Essa função é uma espécie de tipagem das informações que a ação 
necessita para realizar as mudanças de estado de forma correta.
Posteriormente, criamos os componentes, sendo o <App /> o principal, 
que monta a view com o conteúdo de outros dois componentes: o <Nav /> e 
o <Section />. Esses são a demonstração maior de como o Redux facilita 
o desenvolvimento e gerenciamento de aplicações com estado global, pois, de 
forma simples, o clique nos botões do primeiro componente altera o conteúdo 
do segundo. 
No primeiro componente, simplesmente usamos no onClick de cada 
um a chamada {() => store.dispatch(setContent(0))}, que 
dispara na store a ação setContent() e envia o valor que setará a variável 
de estado global, chamada content. Essa varável está sendo monitorada pelo 
componente <Section /> por meio do comando store.subscribe(() 
=> setContent(store.getState().content)), que passou à store 
a função que seta a variável local, chamada content, cujo gerenciamento 
de estado está sendo feito pelos hooks.
Por fim, quando tivemos uma alteração na variável content no estado 
global da aplicação, a variável de estado local será alterada. Quando isso 
acontecer, os conteúdos do componente serão atualizados, pois usamos a 
função {store.getState().contents[content].title} para 
buscar título e texto que devem ser exibidos de acordo com o valor setado 
dessa variável.
Introdução ao Redux14
Para testarmos essa aplicação, basta substituirmos o conteúdo do arquivo 
scr/App.js em nossa arquitetura criada na pasta my-app-redux, feita 
pelos comandos anteriores. Nossa aplicação fica como mostrada na Figura 3, 
a seguir. Por mais simples que pareça, você está utilizando uma série de 
conceitos muito importantes para a formação de um desenvolvedor front end.
Figura 3. Interface criada pelo exemplo.
Quando iniciamos essa pequena aplicação, o estado inicial é definido 
como 0. Com essa informação, o componente consulta array do estado global 
da aplicação, buscando título e texto a serem exibidos naquele momento. 
O clique de cada botão faz a alternância de estados da variável content, 
que é utilizada para saber o índice do array usado para mostrar o conteúdo.
FERNANDES, R. F. Integrating semantic-ui modal with Redux. IT Next, Utrecht, 
16 Feb. 2018. Disponível em: https://itnext.io/integrating-semantic-ui-modal-with-
-redux-4df36abb755c. Acesso em: 6 nov. 2019.
FLUX. GitHub, [S. l.], 16 Oct. 2019. Disponível em: https://github.com/facebook/flux. 
Acesso em: 6 nov. 2019.
15Introdução ao Redux
FLUX — Application architecture for building user interfaces. Facebook Open Source, 
[S. l.], 2019. Disponível em: https://facebook.github.io/flux/. Acesso em: 6 nov. 2019.
FLUX-CONCEPTS. GitHub, [S. l.], 19 Jan. 2017. Disponível em: https://github.com/facebook/
flux/tree/master/examples/flux-concepts. Acessoem: 6 nov. 2019.
REDUX — A predictable state container for JavaScript apps. Redux, [S. l.], 2015. Disponível 
em: https://redux.js.org/. Acesso em: 6 nov. 2019.
STEFANOV. S. Primeiros passos com React: construindo aplicações web. São Paulo: 
Novatec, 2016. 248 p.
Leituras recomendadas
FLANAGAN, D. JavaScript: o guia definitivo. 6. ed. Porto Alegre: Bookman, 2013. 1080 p.
REACT — uma biblioteca JavaScript para criar interfaces de usuário. Facebook Open 
Source, [S. l.], 2019. Disponível em: https://pt-br.reactjs.org/. Acesso em: 6 nov. 2019.
Os links para sites da Web fornecidos neste capítulo foram todos testados, e seu fun-
cionamento foi comprovado no momento da publicação do material. No entanto, a 
rede é extremamente dinâmica; suas páginas estão constantemente mudando de 
local e conteúdo. Assim, os editores declaram não ter qualquer responsabilidade 
sobre qualidade, precisão ou integralidade das informações referidas em tais links.
Introdução ao Redux16