Lidando com operações assíncronas no redux com redux saga
•
4 j'aime•855 vues
O documento apresenta o Redux-saga, uma biblioteca para lidar com operações assíncronas no Redux. Redux-saga usa generators para coordenar chamadas assíncronas e efeitos colaterais em aplicações Redux. Ele é focado em tratar erros e manter a integridade dos dados, semelhante ao padrão Saga usado por empresas como Twitter e Halo.
Recommandé
Contenu connexe
Tendances
Tendances (9)
Similaire à Lidando com operações assíncronas no redux com redux saga
Similaire à Lidando com operações assíncronas no redux com redux saga (20)
Lidando com operações assíncronas no redux com redux saga
- 1. Lidando com operações assíncronas no Redux com Redux-saga Hugo Bessa
- 2. Quem sou eu ● Hugo Bessa ○ Recife ○ Estudante de Ciência da Computação - UPE (ainda) ○ Entusiasta de SPAs e PWAs ○ Já ouvi todas as piadas que você puder imaginar com Bessa ○ 7 anos como desenvolvedor, 5 com django, 3 com SPA @hugoabessa github.com/hugobessa
- 4. ● Por que usar Redux? Vamos falar um pouco sobre Redux
- 5. Fluxo da informação - React + Redux
- 6. Fluxo da informação - React + Redux
- 7. Estado e ações globais Menos argumentos via props Menos callbacks, Comunicação mais flat
- 9. Chamando as promises fora do Redux
- 10. Chamando as promises fora do Redux
- 11. Chamando as promises fora do Redux
- 12. Utilizando middlewares feitos pra isso
- 13. Redux-saga Informação concentrada em um lugar e de forma sucinta Perfeitamente integrado com redux Fácil de testar Focado no tratamento de erros mas como se chegou a esse design?
- 14. Saga é um padrão de software (design pattern) criado para gerenciamento de efeitos colaterais. Esse padrão é focado em garantir confiabilidade, e é muito utilizado para implementar a comunicação entre serviços. Sagas Pattern
- 15. Quem usa Sagas Pattern e pra que? Halo 4 e Twitter, para garantir que falhas não irão deixar dados inconsistentes em seus banco de dados distribuídos.
- 17. Generator Functions e Iterators É uma função que ao ser chamada retorna um objeto (iterator). E aí toda vez que você chama o método next desse objeto (gen.next()) o escopo do generator é executado até o próximo yield, retornando o resultado da expressão que ele antecede.
- 18. O básico take(actionType): payload O take aguarda uma action do tipo solicitado. Isto é, o generator não passa para a próxima linha até que seja dado dispatch numa action desse tipo do redux.
- 19. O básico call(function, ...arguments) O call chama uma função assícrona, aguarda o resultado dela ser definido para continuar e retorna-o. A espera não é ociosa, o middleware supende o generator enquanto a promise não termina.
- 20. O básico put(action, payload):void Faz dispatch de uma action passando um payload.
- 21. O básico Não funciona! Pesquisas rápidas consecutivas, serão ignoradas. Apenas a primeira vai ser executada.
- 22. fork/cancel fork(saga, ...args): task O fork chama uma saga assincronamente, e não se preocupando com o resultado. Ela retorna um objeto do tipo task, que serve, por exemplo, para caso você queira cancelar uma fork que já tenha sido chamado. Se uma task filha dá erro, o erro propaga para o pai. cancel(task) Cancela uma task que esteja rodando, ou não faz nada caso já tenha terminado
- 23. takeEvery e takeLatest takeEvery(actionType, saga):void O takeEvery, ao receber uma requisição, chama uma saga assincronamente e já fica disponível imediatamente para receber a action novamente. Então, sempre que uma action do tipo especificado ocorrer, a saga vai ser acionada, independente da anterior ter sido terminada ou não
- 24. takeEvery e takeLatest takeLatest(actionType, saga):void O takeLatest parece muito o takeEvery, a única diferença é que ele ignora/cancela as execuções incompletas de açes, considerando apenas a última.
- 25. Combinadores de Effects race({key: saga}): {key: sagaResult} A race inicia uma corrida entre duas ou mais calls, e retorna um array com {key: sagaResult} onde o único resultado preenchido será da chamada que terminou primeiro, e todos os outros serão undefined.
- 26. Combinadores de Effects all([effects]): [effectResults] Só termina quando o todos os effects terminam, e o array está totalmente preenchido.
- 29. Twitter: https://twitter.com/hugoabessa Github: https://github.com/hugobessa Email: hugo@vinta.com.br