Motivação

Uma breve historinha, esta aplicação foi um teste para uma vaga de emprego como desenvolvedor front-end em uma empresa sediada aqui em minha cidade. Me foi solicitado fazer uma aplicação web que utiliza-se ReactJs e a API do GitHub com navegação de uma pagina pelo menos.

Então mãos a obra, após breve leitura nos Docs da API do GitHub comecei a implementar. Inicialmente para os trabalhos assincronos na aplicação utilizei o Redux-thunk, pois já tinha conhecimento dele.

Redux-thunk

Com o esta "Lib" que é um middleware do Redux, ou seja, basicamente atua ali intermediando as Actions e os Reducers do Redux.

Ele te facilita o controle do retorna das actions apenas na hora em que elas devem ocorrer, como para esta aplicação nas chamadas à API, onde o retorno da Action para Reducer só deve ocorrer após ter coletado as informações do GitHub. 

E não menos importante, uma funcionalidade que utilizei nesta aplicação que foi a de pegar a localização atual do usuário, dentre outras que você poderá ver no código.

Porque Redux-saga?

Após começar a trabalhar na empresa, vi que eles usavam o Redux-saga para tratar a lógica de requisições assincronas. Então você já deve imaginar, para começar a praticar meus estudos nesta  Lib, resolvi refatorar esta aplicação para usar-lá e aprender.

As primeiras impressões foram, que ele te dá mais organização e controle de toda a lógica de negócios da aplicação, retirando tudo que ficava nas Actions e jogando para os Sagas.

Deixando o Redux ser apenas Redux :D, ou seja, actions fazendo o que elas devem fazer, e reducers fazendo o que eles devem fazer. E o trabalho pesado com o Sagas.

Implementação

Irei deixar aqui o Pull Request (PR) desta refatoração para que você possa estudar e ver as alteações do código.

https://github.com/elfiservice/QGitHub-User-App/pull/3

Fiz por arquivo de Action, e ai fui criando o Sagas de cada um.

Para entendimento do código ter conhecimento:

• React
• React-redux
• Funções "Generators"
• Promises

Conclusão

Concerteza foi de grande aprendizagem fazer essa refatoração, pois hoje consigo ter um bom overview de comparação e entendimento de cada abordagem.

Eu como gosto de um código bem organizado e de fácil manutenção, certamente optarei pelo Redux-saga nas próximas aplicações, principalmente para uma aplicação que irá escalar.

Porém se não seguir as boas práticas de implementação do Redux, usando as Actions e Reducers da forma que devem ser usadas, pode-se deixar a aplicação um pouco confusa e de difícil manutenção.

Testar o App Aqui