Desenvolvendo um Projeto com ReactJS do Zero ao Deploy — Part.4(adicionando Redux)
E ai pessoal, como vocês estão?
Chegamos na parte em que muitos dizem ser a mais complexa de entender e configurar — Que tal, com o post de hoje, desmitificarmos isso?
Tenho certeza que vamos conseguir!
Afinal, você chegou ao quarto post, então, vontade de querer aprender e, poder fazer seus proprios projetos reactjs não falta.
Acredito que com essa arquitetura, modelagem do projeto e, minha experiência ao longo dos anos vamos conseguir passar por esse tema numa boa!
Pegue o seu café ( ou a sua cervejinha) e, vamos codar!!
Vamos iniciar instalando a dependência do Redux no nosso projeto, verifique, assim como no post anterior se no seu arquivo “package.json” aparece o redux entre as dependências.
npm install — save redux
Agora, com o redux instalado lembre-se do post parte 2, que nós criamos uma estrutura de pastas e, entre elas tinhamos a pasta “store”. Vamos criar o arquivo “index.js” e começar a configurar a famosa Store do Redux.
Tudo bem até aqui? Vamos para as linhas de código?
Primeiro importamos o método “createStore” da biblioteca do redux. Lembra de definição sobre usar o Redux pensando como nosso banco de dados do front-end?
Então, esse método é responsável por manter os states (dados) dentro na da nossa estrutura aplicação e, expondo para a aplicação.
Iremos importar também o nosso reducer. Para relembrar, será nosso “banco de dados” da aplicação. Aqui teremos nossas “entidades” que iremos utilizar dentro da aplicação.
Temos o DevTools, utilizado dentro do desenvolvimento da aplicação, ele irá fornecer todo o contexto do Redux dentro do navegador.
Bom, agora que temos os contextos necessários, criamos uma variável que será exposta para aplicação que recebe o método “createStore” e, por ordem, o primeiro parâmetro nossos reducers e, o segundo o devTools.
Agora na pasta “src/reducers” vamos criar nosso arquivo “index.js” que será responsável por expor nossos reducers (entidades) e, criaremos nossa primeira entidade que será o User “user.js”.
Como podemos ter mais de uma entidade, vamos importar o método “combineReducers” do próprio redux, para expor todos os reducers pela nossa Store.
Na nossa entidade de usuário, eu estou criando um objeto padrão que simboliza um usuário do sistema, com suas informações e estou definindo ele como Initial State, pois caso não receba nenhuma informação por exemplo do back-end, esse será o valor da nossa variável que estará exposta para a aplicação.
Agora, lembra que comentei que vamos utilizar a pasta “container” para ser o arquivo que irá enviar para as páginas as funções e propriedades que ela deve receber?
Vá então para a pasta “src/containers” e crie o container da página About.js e vamos criar o arquivo “src/containers/about.js”.
Reparem que, neste arquivo temos uma dependência nova “react-redux”, pacote oficial do ReactJS para realizar o “bind” do redux com nossa aplicação ReactJS.
Antes de continuarmos vamos instalar.
Bom, agora que instalamos essa dependência, veja que estamos importando a nossa página “About”, pois utilizando o método “withRouter” do react-router e dentro dele vamos passar o método “connect”, passando como parâmetro nossas propriedades e nossas funções.
Exportando dessa forma, nós garantimos que ao acessar a rota da página About, que ela tenha acesso a essas informações.
Nós criamos no nosso reducer uma entidade chamada User, então eu gostaria que quando o usuário entrar na rota “/sobre”, a nossa página About, ela tivesse acesso a essa entidade e para isso vamos passar essa informação dentro do nossa constante “mapStateToProps”
Vamos declarar um objeto com propriedade User que receberá nosso “state.user” que é o nome da entidade.
Se tivéssemos por exemplo, uma entidade que foi declarada como “Employer”, nós iriamos passar a propriedade para nossa página como “state.employer”.
Bom, já temos configurado nosso arquivo de container, mas sua aplicação ainda não irá funcionar. Antes, devemos abrir no arquivo “src/router/index.js”, vamos alterar a importação da nossa página About, pois estamos importando a página em si “../pages/About”, e agora utilizando o conceito de containers, vamos importar o container da nossa página “../containers/about” porque agora ela que referencia o componente /página “About.js”.
Devemos também importar “Provider”, ele deverá englobar toda nossa rota e, agora nosso arquivo de configuração da Store do redux entra em ação.
Vamos importar e passar para dentro da nossa tag Provider, dessa forma garantimos que toda nossa aplicação terá acesso a nossa store e todos os métodos que envolvem o redux.
Ufa!!! Finalizamos toda a configuração e fluxo inicial do Redux!
Vamos ver na prática agora?
Abra a página “src/pages/About.js” e adicione logo acima do nosso parágrafo a seguinte sintaxe {console.log(props)} e, dentro do método da nossa função About vamos receber (props) como parâmetro.
Vamos rodar nossa aplicação e acessar a url “http://localhost:3000/sobre".
Abra o console do seu navegador (F12 do seu teclado) e, repare no que foi exibido.
Veja que temos diversas informações que estão disponíveis para nossa página About e, entre elas nossa entidade criado no reducer “user”. Vamos usar ela?
Abra novamente seu navegador e veja as informações vindo lá do seu reducer para sua tela.
Bom pessoal, sei que é um assunto complexo, que exige muita repetição, documentação e exemplos para seguir.
Mas espero que tenha conseguido explicar um pouco sobre esse assunto.
Se ficou com alguma dúvida, se não entendeu alguma parte, me mande que farei o possível para te ajudar.
No próximo post ainda vamos seguir com Redux, mas agora será utilizando os conceitos de “actions”, funções e, atualizar objetos no reducer. E vamos também ver as diferenças entre criar um componente ReactJS como função ou como classe.
Espero que tenha gostado, não esqueçam de deixar nos comentários suas sugestões ou críticas. Siga as nossas redes sociais (facebook e instagram)para ficar por dentro de tudo que estamos criando e acompanhar o nosso dia a dia.
Por hoje é só, nos vemos em breve!
Mas e aí, na sua máquina funciona?
