{"id":11583,"date":"2021-01-07T10:29:02","date_gmt":"2021-01-07T13:29:02","guid":{"rendered":"https:\/\/geekblogti.wpengine.com\/?p=11583"},"modified":"2024-10-29T11:26:10","modified_gmt":"2024-10-29T14:26:10","slug":"redux-um-tutorial-pratico-e-simples","status":"publish","type":"post","link":"https:\/\/www.geekhunter.com/pt/blog\/redux-um-tutorial-pratico-e-simples\/","title":{"rendered":"Redux: Um tutorial pr\u00e1tico e simples!"},"content":{"rendered":"\r\n

Vamos falar um pouco sobre o que \u00e9 o Redux, e o problema que ele veio resolver, abordando alguns dos seus conceitos centrais.<\/p>\r\n\r\n\r\n\r\n

O principal objetivo \u00e9 dar um norte para aqueles que est\u00e3o come\u00e7ando com o Redux. Por isso, neste artigo, a aplica\u00e7\u00e3o do Redux nos c\u00f3digos exemplificadores ser\u00e1 simples.<\/p>\r\n\r\n\r\n\r\n

A par da teoria, vamos \u00e0 pr\u00e1tica, onde teremos uma exemplifica\u00e7\u00e3o da utiliza\u00e7\u00e3o geral do Redux para gerenciamento e compartilhamento dos estados da aplica\u00e7\u00e3o.<\/p>\r\n\r\n\r\n\r\n

Primeiramente, um requisito importante \u00e9 que voc\u00ea tenha conhecimentos b\u00e1sicos do ReactJs<\/a><\/strong>, uma biblioteca com cara de framework popular na comunidade dev (e que eu particularmente gosto muito).<\/p>\r\n\r\n\r\n\r\n

E ainda, no final, deixarei um projeto TODOLIST com aplica\u00e7\u00e3o do Redux o com conceitos um pouco mais avan\u00e7ados prontinho para voc\u00ea baixar e executar na sua m\u00e1quina.<\/p>\r\n\r\n\r\n\r\n

Quer mais? Farei algumas recomenda\u00e7\u00f5es de cursos para voc\u00ea aprofundar e dominar de vez essa library t\u00e3o importante.<\/p>\r\n\r\n\r\n\r\n

O que \u00e9 o Redux?<\/h2>\r\n\r\n\r\n\r\n

Redux \u00e9 um container para controle e gerenciamento<\/strong> de estado global de aplica\u00e7\u00f5es JavaScript baseado na arquitetura Flux (tem o prop\u00f3sito de solucionar o problema de compartilhamento de estados entre componentes, tornando-o unidirecional).<\/p>\r\n\r\n\r\n\r\n

\r\n

Entenda a Arquitetura Flux<\/a> com React<\/p>\r\n<\/blockquote>\r\n\r\n\r\n\r\n

Ele foi criado em 2015 por Dan Abramov e Andrew Clark, visando resolver o problema de compartilhamento e desencadeamento de eventos entre os componentes da sua aplica\u00e7\u00e3o.<\/p>\r\n\r\n\r\n\r\n

Redux \u00e9 uma solu\u00e7\u00e3o para compartilhamento de estados entre v\u00e1rios componentes diferentes, tornando isso muito f\u00e1cil, previs\u00edvel e r\u00e1pido.<\/p>\r\n\r\n\r\n\r\n

Bastante comum sua utiliza\u00e7\u00e3o com o React<\/a>, uma biblioteca muito popular (ou framework, ainda existe uma discuss\u00e3o sobre isso) para constru\u00e7\u00e3o de interfaces, uma vez que essa biblioteca foi criada pensando no ReactJs, mas pode ser utilizada com Angular e Vue tamb\u00e9m.<\/p>\r\n\r\n\r\n\r\n

Uma aplica\u00e7\u00e3o sem o Redux \u00e9 obrigada a desencadear eventos entre v\u00e1rios componentes<\/strong>, tornando-os fortemente acoplados, isso dificulta a manuten\u00e7\u00e3o do projeto, uma vez que um componente pode depender de diversos outros para funcionar.<\/p>\r\n\r\n\r\n\r\n

A imagem abaixo ilustra bem o problema e a solu\u00e7\u00e3o que o redux oferece.<\/p>\r\n\r\n\r\n\r\n

\"como-funciona-redux\"<\/figure>\r\n\r\n\r\n\r\n

Simples, n\u00e3o? Agora vamos aos conceitos.<\/p>\r\n\r\n\r\n\r\n

Conceitos Centrais do Redux<\/h2>\r\n\r\n\r\n\r\n

O redux possui tr\u00eas conceitos centrais: store, reducers e actions.<\/p>\r\n\r\n\r\n\r\n

Store<\/h3>\r\n\r\n\r\n\r\n

\u00c9 um container imut\u00e1vel, isto \u00e9, n\u00e3o h\u00e1 altera\u00e7\u00e3o dele, e sim evolu\u00e7\u00e3o, que armazena e centraliza o estado global da aplica\u00e7\u00e3o. Com isso, podemos dizer que \u00e9 o conjunto de estados da aplica\u00e7\u00e3o centralizados\/reunidos em um apenas um lugar.<\/p>\r\n\r\n\r\n\r\n

O Store segue um dos princ\u00edpios que formam e definem o conceito do Redux: Um \u00fanico ponto de verdade.<\/strong><\/p>\r\n\r\n\r\n\r\n

Os outros s\u00e3o:<\/p>\r\n\r\n\r\n\r\n

Imutabilidade do estado:<\/strong> o estado da aplica\u00e7\u00e3o \u00e9 inalter\u00e1vel, mas \u00e9 evolu\u00edvel.<\/p>\r\n\r\n\r\n\r\n

Altera\u00e7\u00f5es s\u00e3o realizadas apenas por fun\u00e7\u00f5es puras: <\/strong>reducers recebem as actions emitidas aplicando-as ao estado global. Sempre retornando um estado.<\/p>\r\n\r\n\r\n\r\n

Tecnicamente, \u00e9 um objeto JavaScript que possui todos os estados dos componentes da aplica\u00e7\u00e3o. Al\u00e9m disso, a store possui a fun\u00e7\u00e3o de monitorar as mudan\u00e7as e notificar os que precisam saber delas.<\/p>\r\n\r\n\r\n\r\n

Reducers<\/h3>\r\n\r\n\r\n\r\n

Reducers s\u00e3o fun\u00e7\u00f5es puras (fun\u00e7\u00f5es que n\u00e3o geram efeitos colaterais, isto \u00e9, para a mesma entrada, temos a mesma sa\u00edda) com a capacidade de disparar eventos e que podem alterar um atributo da store, evoluindo o estado global da aplica\u00e7\u00e3o.<\/p>\r\n\r\n\r\n\r\n

Funcionam como filtros recebendo e tratando as informa\u00e7\u00f5es, enviando essas informa\u00e7\u00f5es \u00e0 store. \u00c9 encarregado de lidar com todas as a\u00e7\u00f5es, como algum componente pedindo para alterar algum dado da store, por exemplo.<\/p>\r\n\r\n\r\n\r\n

Para todo dado contido na store, deve existir um reducer pr\u00f3prio daquele dado.<\/p>\r\n\r\n\r\n\r\n

Tecnicamente, reducer \u00e9 uma fun\u00e7\u00e3o JavaScript que recebe o estado anterior, ou um estado definido com padr\u00e3o no seu par\u00e2metro, e uma action e, dependendo do type <\/em>dessa action pode gerar um novo estado, o que implica que nem sempre teremos evolu\u00e7\u00e3o do estado.<\/p>\r\n\r\n\r\n\r\n

Ent\u00e3o, dentro dos reducers, temos as actions.<\/p>\r\n\r\n\r\n\r\n

Todo reducer ouve todas as actions disparadas pela aplica\u00e7\u00e3o e para alterar qualquer informa\u00e7\u00e3o do estado, precisamos utilizar os reducers.<\/p>\r\n\r\n\r\n\r\n

Anatomia de um reducer<\/h4>\r\n\r\n\r\n\r\n
const initialState = {...}\r\n\r\nfunction exemploReducer1(state = initialState, action) {\r\n\tswitch(action.type) {\r\n\t\tcase \u2018TYPE_1\u2019 :\r\n\t\t\treturn { ...state, data: action.payload.data };\r\n\t\tdefault:\r\n\t\t\treturn state;\r\n                }\r\n}\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n
Actions<\/h3>\r\n\r\n\r\n\r\n
S\u00e3o fontes de informa\u00e7\u00f5es que s\u00e3o enviadas da aplica\u00e7\u00e3o para o store pelos reducers. S\u00e3o disparadas (dispatch) pelos actions creators (fun\u00e7\u00f5es puras respons\u00e1veis por criarem as actions). Ainda vamos falar mais sobre os actions creators.<\/p>\r\n\r\n\r\n\r\n
Tecnicamente, uma action \u00e9 um objeto que possui, obrigatoriamente, um atributo nomeado type<\/em> que indica que a\u00e7\u00e3o \u00e9. Pode ter dados associados ou n\u00e3o, mas geralmente possuem. Esses dados s\u00e3o reunidos em \u00fanico atributo chamado de payload<\/em>.<\/p>\r\n\r\n\r\n\r\n
Como sugerido acima, um payload \u00e9 um conjunto de dados, mas tamb\u00e9m pode ser, por exemplo, uma chamada para back-end.<\/p>\r\n\r\n\r\n\r\n
Actions n\u00e3o realiza nenhuma altera\u00e7\u00e3o em nosso estado global. Lembre-se, s\u00e3o apenas objetos.<\/p>\r\n\r\n\r\n\r\n
Anatomia da Action<\/h4>\r\n\r\n\r\n\r\n
{ \r\n    type: \u201cTIPO_DO_EVENTO\u201d,\r\n    payload: {\r\n\t\/\/ dados associados a essa action\r\n         }\r\n}\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n
Action Creator<\/h4>\r\n\r\n\r\n\r\n
Actions creators s\u00e3o fun\u00e7\u00f5es puras respons\u00e1veis por criarem as actions.<\/p>\r\n\r\n\r\n\r\n
function func1(params) {\r\n      \/\/ l\u00f3gica\r\n\r\nreturn {\r\n\t\ttype: \u201cTIPO_EVENTO\u201d,\r\n\t\tpayload: {\r\n                          \/\/ dados associados a essa action \r\n                                  }\r\n\r\n                           }\r\n}\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n
Estado (estado compartilhado)<\/h4>\r\n\r\n\r\n\r\n
Basicamente, \u00e9 um objeto JavaScript com uma estrutura chave\/valor.<\/p>\r\n\r\n\r\n\r\n
{\r\n\tatributo1: [ {...}, {...}, \u2026 ],\r\n\tatributo2: {...}\r\n}\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n
Lembrando que o estado \u00e9 gerado a partir de uma fun\u00e7\u00e3o.<\/p>\r\n\r\n\r\n\r\n
\"vagas-react-redux\"<\/a><\/figure>\r\n\r\n\r\n\r\n
Conex\u00e3o dos componentes ao Redux<\/h3>\r\n\r\n\r\n\r\n
Para ter acesso \u00e0 evolu\u00e7\u00e3o de estados da store e disparar eventos para evolu\u00ed-la, \u00e9 preciso se conectar\/inscrever-se ao Redux. E como fazemos isso?<\/p>\r\n\r\n\r\n\r\n
S\u00e3o basicamente dois passos:<\/p>\r\n\r\n\r\n\r\n
1\u00ba passo:<\/strong> as importa\u00e7\u00f5es.<\/p>\r\n\r\n\r\n\r\n
import { bindActionCreators } from \u2018redux\u2019\r\nimport { connect } from \u2018react-redux\u2019\r\n\r\n\/\/ e se voc\u00ea tiver um arquivos de actions creators, importe tamb\u00e9m.<\/code><\/pre>\r\n\r\n\r\n\r\n
Agora seja um componente baseado em classe ou em fun\u00e7\u00e3o, no final do arquivo deve existir algo mais ou menos assim:<\/p>\r\n\r\n\r\n\r\n
2\u00ba passo:<\/strong> conex\u00e3o.<\/p>\r\n\r\n\r\n\r\n
const mapDispatchToProps = (dispatch) => bindActionCreators({...}, dispatch );\r\nexport default connect(null, mapDispatchToProps)( \/\/nome do componente );\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n
De boa at\u00e9 aqui? Vamos continuar\u2026<\/p>\r\n\r\n\r\n\r\n
Depois que conhecemos um pouco da teoria, vamos partir para a pr\u00e1tica de um projeto muito simples, englobando sua cria\u00e7\u00e3o, a instala\u00e7\u00e3o das depend\u00eancias necess\u00e1rias e utiliza\u00e7\u00e3o.<\/p>\r\n\r\n\r\n\r\n
Criando um projeto usando o Redux<\/h2>\r\n\r\n\r\n\r\n
Para criar um projeto, precisamos do create-react-app<\/em> instalado globalmente. Para que isso aconte\u00e7a, rode o comando abaixo, caso voc\u00ea n\u00e3o o tenha.<\/p>\r\n\r\n\r\n\r\n
npm i -g create-react-app<\/code><\/pre>\r\n\r\n\r\n\r\n
Agora, crie uma pasta qualquer, abra o terminal\/cmd e o rode o comando abaixo escolhendo o nome do projeto de exemplo.<\/p>\r\n\r\n\r\n\r\n
npx create-react-app [nome-do-projeto]<\/code><\/pre>\r\n\r\n\r\n\r\n
Instala\u00e7\u00e3o das depend\u00eancias<\/h3>\r\n\r\n\r\n\r\n
Para utilizar o redux no seu projeto, precisamos instal\u00e1-lo. Podemos fazer utilizando o gerenciadores de pacote npm ou yarn.<\/p>\r\n\r\n\r\n\r\n
NPM<\/h4>\r\n\r\n\r\n\r\n
npm install --save redux react-redux<\/code><\/pre>\r\n\r\n\r\n\r\n
Yarn<\/h4>\r\n\r\n\r\n\r\n
yarn add redux react-redux<\/code><\/pre>\r\n\r\n\r\n\r\n
Nesse sentido, a depend\u00eancia \u201cextra\u201d \u00e9 para fazer a conex\u00e3o do React com o Redux.<\/p>\r\n\r\n\r\n\r\n
Come\u00e7ando a utiliza\u00e7\u00e3o (configura\u00e7\u00e3o)<\/h3>\r\n\r\n\r\n\r\n
Crie uma pasta chamada storeConfig dentro de src do seu projeto. Dentro da pasta, crie um arquivo chamado store.js. O c\u00f3digo escrito nele pode ser:<\/p>\r\n\r\n\r\n\r\n
import { createStore, combineReducers } from \u2018redux\u2019\r\n\r\nconst reducers = combineReducers({\r\n\tprop1: function(state, action) {\r\n\treturn {\r\n                   exemplo: \u201cDeu certo!\u2019\r\n                   }\r\n\t},\r\n\r\n\tprop2: function(state, action) {\r\n\treturn {\r\n\t\t\texemplo: \u201cDe novo, deu certo!\u201d\r\n\t\t\t}\r\n})\r\n\r\n\r\nfunction store() {\r\n\treturn createStore(reducers)\r\n}\r\n\r\nexport default store\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n
A fun\u00e7\u00e3o combine Reducers<\/em>, como o pr\u00f3prio nome diz, combina todos os reducers da aplica\u00e7\u00e3o para criar a store. Para o nosso exemplo, temos dois reducers, mas \u00e9 comum esse n\u00famero ser muito maior em um projeto React.<\/p>\r\n\r\n\r\n\r\n
Logo depois, abaixo, estamos encapsulando a cria\u00e7\u00e3o da store pela fun\u00e7\u00e3o createStore<\/em> (do Redux) dentro da fun\u00e7\u00e3o store e exportando-a.<\/p>\r\n\r\n\r\n\r\n
Agora precisamos fazer a integra\u00e7\u00e3o do React com o Redux.<\/em><\/strong><\/p>\r\n\r\n\r\n\r\n
No arquivo index.js da sua aplica\u00e7\u00e3o, as importa\u00e7\u00f5es podem ser mais ou menos como abaixo:<\/p>\r\n\r\n\r\n\r\n
import { Provider } from \u2018react-redux\u2019\r\nimport storeConfig from \u2018.\/storeConfig\/store\u2019\r\n\r\nconst store = storeConfig()\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n
Nesse arquivo, teremos algo assim:<\/p>\r\n\r\n\r\n\r\n
ReactDOM.render(\r\n\t<React.StrictMode>\r\n\t\t<App \/>\r\n\t<\/React.StrictMode>,\r\n\tdocument.getElementById(\u2018app\u2019)\r\n);\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n
Agora ficar\u00e1 assim:<\/p>\r\n\r\n\r\n\r\n
ReactDOM.render(\r\n<Provider store={store}>\r\n\t<React.StrictMode>\r\n\t\t<App \/>\r\n\t<\/React.StrictMode>\r\n<\/Provider>,\r\n\tdocument.getElementById(\u2018app\u2019)\r\n);\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n
Pronto! J\u00e1 temos a integra\u00e7\u00e3o do React com Redux na sua aplica\u00e7\u00e3o. Agora, o que est\u00e1 faltando?<\/p>\r\n\r\n\r\n\r\n
Como fazer o bind dos componentes com o estado da sua aplica\u00e7\u00e3o<\/h3>\r\n\r\n\r\n\r\n
Para isso, precisamos de um componente interessado nos dados da store. Dentro da pasta src do seu projeto, crie uma pasta chamada componentes. Feito isso, crie um arquivo exemploComponente.jsx dentro dessa pasta. Pode ser o nome que voc\u00ea quiser, e tamb\u00e9m poder\u00e1 fazer algo realmente interessante para voc\u00ea.<\/p>\r\n\r\n\r\n\r\n
Coloque o c\u00f3digo abaixo no arquivo jsx criado:<\/p>\r\n\r\n\r\n\r\n
import React, { Fragment } from \u2018react\u2019\r\nimport { connect } from \u2018react-redux\u2019\r\n\r\nfunction exemplo(props) {\r\n\t\treturn ( \r\n\t\t\t<Fragment>\r\n\t\t\t\t<div> props.prop1.exemplo<\/div>\r\n\t\t\t\t<div> props.prop2.exemplo<\/div>\r\n\t\t\t<\/Fragment>\r\n\t\t)\r\n}\r\n\r\n\r\n\r\n\r\nfunction mapStateToProps(state) {\r\n\treturn {\r\n\t\tprop1: state.prop1,\r\n\t\tprop2.state.prop2\r\n}\r\n}\r\n\r\nexport default connect(mapStateToProps)(exemplo)<\/code><\/pre>\r\n\r\n\r\n\r\n
Assim, utilizamos o connect (do react-redux) para devolver o componente conectado com o estado global da aplica\u00e7\u00e3o. Ele \u00e9 respons\u00e1vel por conectar o nosso componente ao estado global da aplica\u00e7\u00e3o.<\/p>\r\n\r\n\r\n\r\n
A fun\u00e7\u00e3o mapStateToProps<\/em> mapeia o estado para as propriedades do componente.<\/p>\r\n\r\n\r\n\r\n
Prontinho! Veja o que j\u00e1 temos:<\/p>\r\n\r\n\r\n\r\n
    \r\n
  1. Projeto criado.<\/li>\r\n
  2. Depend\u00eancias instaladas.<\/li>\r\n
  3. Store criada.<\/li>\r\n
  4. Componente conectado.<\/li>\r\n<\/ol>\r\n\r\n\r\n\r\n
    E j\u00e1 que estamos aqui, por que n\u00e3o alguns cursos gratuitos <\/strong>para voc\u00ea se aprofundar? Segue a lista:<\/p>\r\n\r\n\r\n\r\n