Desenvolvendo um Projeto com ReactJS do Zero ao Deploy — Part.5 (adicionando Actions ao Redux)
E ai pessoal, como vocês estão?
Vamos começar a semana finalizando nosso fluxo de dados e funções com Redux? Se por acaso você perdeu o post anterior, o link esta aqui!
Mas antes, vou explicar o conceito das Actions dentro do contexto do Redux no nosso projeto. Bom, resumidamente as Actions são ações que fazem com que as informações das nossas views sejam enviadas para a nossa Store do Redux.
Cada ação é responsável por transportar os dados do seu aplicativo até a camada dos reducers, onde ficarão armazenada nossas informações.
Abra o seu vscode, pegue seu café e mãos a obra!
Continuando o projeto do post anterior, (caso tenha perdido o link do github está aqui) vamos criar uma Action que irá atualizar o nome do nosso usuário no sistema.
Primeiro passo vamos transformar nossa página Sobre “src/pages/About.js” de função para uma classe.
Mas por que?
No ReactJs só devemos criar um componente de classe quando esse componente sofrer uma alteração no valor de uma propriedade. No nosso caso, vamos apenas atualizar no reducer o nome do usuário. Se nosso componente simplesmente fosse renderizar as informações sem precisar alterar nenhuma propriedade, aí sim devemos utilizar um componente funcional.
Vamos ao código?
Reparem que alteramos nossa função para classe utilizando a implementação que surgiu no ES6. Classe nada mais é que, uma função especial na qual você pode definir utilizando a palavra reservada class.
Dentro desse nosso componente vamos criar um Constructor, que é um método especial para inicializar nosso “state” da classe e nossas funções (eventos).
Pronto, agora vamos criar o método “render” que irá renderizar o nosso html com todo o conteúdo da nossa classe e, vamos adicionar um campo do tipo input e um do tipo botão, que iremos utilizar para alterar uma propriedade no reducer.
Você está reparando que adicionamos diversas linhas de código, fique tranquilo, em breve vou passar item a item!
Dentro do nosso “constructor” criamos um objeto do ReactJS “state”, ou seja, dentro dele podemos criar diversas propriedades pra serem usadas na página ou como uma variável para ser utilizada como um dado a ser enviado para outro funcionalidade, página ou componente do nosso projeto.
Criamos inicialmente uma propriedade chamada “userName” e vamos usá-la como “value” do nosso input.
Logo abaixo do nosso “state” temos dois eventos (funções) criados para serem usados dentro da nossa classe e, fazer o “bind” dela dentro do “constructor” , para que essas funções tenham acesso a todo contexto da nossa “class”.
O primeiro evento “changeUserName” será utilizado na propriedade onChange do nosso input e, sua responsabilidade é atualizar a propriedade “userName” via método “this.setState()”, a medida que o usuário digitar valores dentro do input o ReactJS vai atualizando a propriedade “userName” e o “value” do input é atualizado, renderizando nosso componente.
O segundo evento “handleChangeName” será utilizado na propriedade onClick do nosso botão e, sua responsabilidade será de realizar um disparo de evento para a “Action” que vamos criar passando como propriedade o “userName”. Porém, para vermos esse fluxo funcionando vamos deixar um “alert” para mostrar o valor no nosso state.
Então siga esses passo e digite um valor no input e aperte o botão!
Olha que bacana, com apenas um componente conseguimos exemplificar grande parte do conceito de lifecicle do ReactJS bem como sua estrutura de classes, eventos e state.
Mas agora vamos ao que interessa! Vamos criar o fluxo de dados da nossa página, passando pela action responsável, atualizando o reducer de User e finalmente mostrando a tela com a informação atualizada.
Primeiro passo, no nosso container da página Sobre (About.js), “src/containers/about” vamos criar um método “updateUserName” dentro do nosso “mapDispatchToProps” que é responsável pelos nossos eventos da página.
Dessa forma agora nossa página, tem acesso ao método “updateUserName”, e para verificar isso basta colocar um “console.log(this.props)” dentro do nosso “render” e você verá todas as propriedades (seja elas dados ou funções) disponíveis para nossa página.
Vamos testar essa comunicação?
Primeiro, vamos retirar o “alert” que está dentro do nosso método do clique do botão e vamos mudar para:
this.props.udapteUserName(this.state.userName)
Pronto, já criamos a comunicação com o container. Agora está na hora de criarmos nossa action que irá atualizar nosso reducer User.
Vamos na nossa pasta “src/actions” e, como queremos atualizar um reducer específico de usuários, vamos criar uma action também específica “user.js”.
Nessa action vamos criar uma função que deverá por padrão, receber um tipo(type) que vamos usar como referência para exportá-la e um payload, nesse caso um valor vindo da nossa view.
Após criada, devemos importar esse método dentro do nosso container.
Repare que estamos usando método “dispatch”(essa é a única maneira de desencadear uma mudança de estado) para enviar esse dado até nossa action e consequentemente nosso reducer.
Pronto, nesse momento já temos configurado todo nosso fluxo (view,container e action).
No reducer “user.js”, vamos configurar as funções que irão atualizar o state da entidade de criamos.
Vamos criar um “switch case” para que, baseado na action que você está usando ele saiba qual método devemos chamar para atualizar a informação.
Criamos um método fora da nossa função principal recebendo com parâmetro o state do reducer e o valor que desejamos atualizar na propriedade. Lembre-se sempre de usar “desconstructor ou Object.assign” para criar uma nova referência desse objeto javascritpt.
Bom agora com todas as etapas codificas e configuradas vamos testar?
Vamos abrir o navegador e ir na nossa url “/sobre” e vamos digitar um nome qualquer no nosso input e solicitar que altere o nome do usuário.
Pronto! Quando você digitou na sua página o novo nome de usuário e, clicou para alterar, esse valor trafegou desde a view, passou pelo método no container, que disparou um evento para “action” atualizando uma propriedade no reducer. Nesse momento, nossa aplicação reconhece que teve uma alteração no estado da propriedade e solicita que o reactjs renderize novamente com a informação atualizada.
Obs: Lembre-se que o reactjs trabalha com virtual dom, ou seja, nesse momento ele renderizou apenas o bloco do html que a propriedade está envolvida.
Espero que tenha conseguido aplicar todos os passos e tenha gostado do conteúdo de hoje.
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 vamos seguir evoluindo nosso projeto utilizando o conceito de ReactJS HOC.
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?
