0

Use React Redux e Seja Feliz!

Samuel Costa
Samuel Costa

Se você é jr ou senior em React ou em qualquer outro framework, já deve ter ao menos escutado sobre "pense em escalabilidade", "reuse componentes", "reaproveite código". E isso não é por acaso. Hoje as empresas buscam aplicações que entreguem uma boa experiência de usuário; tenham uma manutenção adequada e que ofereça oportunidades de crescimento. Dito de outra forma, suponha que vc tem um campo input que pega um texto e busca numa api. Você precisa colocar esse campo em 4 paginas, no navegador e em um article. No mínimo, vc criaria 4 inputs diferentes em cada uma das páginas e teria q implementar a mesma regra de busca em cada uma delas. Agora trazendo para o framework, onde a visualização e lógica de negócio estão separadas, como fazer os componentes conversarem?


Em React, você usa props para passar dados de pai para filho. Mas passar dados do filho para o pai é meio complicado (li que era possível, mas não me aprofundei no assunto). Assim, seria muito bom se tivesse uma forma de passar os dados do filho para o pai. Melhor ainda, imagine passar os dados para uma central, onde não só o pai, mas qualquer componente possa ter acesso!

Essa é a store. Na aplicaçao de previsão do tempo que criei, o objetivo era criar uma aplicação componentizada e reutilizável. O problema surgiu quando eu quis colocar um input no navegador para o usuário inserir a cidade. Só que a comunicação com a api ficava em outro componente que nem na mesma página estava.

Assim, usei redux. Resumindo: O input no componente nav disparava uma ação na store, inserindo um dado nela. Como um entregador colocando um pacote na central de distribuição. O componente weather, de olho por meio de useEffects recebia um aviso de que um novo pacote (payload) tinha sido colocando neste centro e assim buscava ou selecionava esse pacote, ou essa parte da store. Com essa abordagem, qualquer componente interessado em qual cidade o usuário inseriu poderia selecionar essa parte da store e usar esses dados. Legal né

Ai eu dei uma estilizada e ficou assim:

*imagem de chuva totalmente ilustrativa*


Mais detalhes estão no github, como também a implementação do redux. Irei continuar evoluindo a experiência de usuário nesse sisteminha.

Espero que gostem e sucesso galera!

github: https://github.com/kailera/react-weather-api.git

Linkedin: https://www.linkedin.com/in/samuel-ferreira-da-costa-kail1999


0
0

Comentários (2)

0
Breno Silva

Breno Silva

22/09/2021 21:40

Ficou muito bom, parabéns!!!

0
Bruno Dórea

Bruno Dórea

22/09/2021 18:37

Parabéns pelo projeto.

Usar programação para otimizar e melhorar os sistemas para todos. Dev Full Stack

Brasil