O poder do Redux

Como funciona o Redux? Essa apresentação mostra as principais estruturas da biblioteca e os 3 princípios que guiam sua utilização. Além disso são demonstradas algumas vantagens que justificam o porque o Redux pode ou não ser uma boa solução para os seus problemas.

Transcript

1. Redux Por que? Como? Quando?
2. Agenda 1. O que é o estado de uma aplicação 2. Os 3 princípios do Redux 3. As principais estruturas 4. Um contador simples escrito utilizando Redux
3. O que é o estado de uma aplicação? Representação, em memória, de um determinado momento da aplicação
4. Informações de estado vindas do servidor
5. Informações de estado computadas no cliente
6. Informações de estado da UI
7. Informações de estado da UI
8. Informações de estado da UI
9. Show me the code! please
10. Representação do estado
11. Tá sentindo esse cheiro????
12. Variável GLOBAL
13. Princípio #1 A fonte da verdade é única
14. Estruturas do Redux: Store - Instância que armazena a árvore de dados do estado - Fonte única de consulta dos dados - Imutável (?) - Facilita a inspeção e depuração da aplicação - Permite a persistência e reprodução de um estado
15. https://codesandbox.io/embed/meliuz-redux-lesson-01-qus4t
16. Princípio #2 O estado é somente para leitura (imutável)
17. Estruturas do Redux: Actions - Objetos que descrevem uma mudança - Funcionam como "APIs" que estabelecem regras sobre como um estado pode ser modificado
18. https://codesandbox.io/s/meliuz-redux-lesson-02-mvv31
19. Princípio #3 Mudanças são feitas através de funções puras
20. Estruturas do Redux: Reducers - Funções puras que descrevem uma mudança no estado - Recebem como parâmetro o estado atual e uma ação - Obrigatoriamente devem retornar um novo estado que se torna o estado corrente
21. https://codesandbox.io/s/meliuz-redux-lesson-03-e8b24
22. Juntando todas as partes...
23. https://codesandbox.io/s/meliuz-redux-lesson-04-uqon8
24. https://codesandbox.io/s/meliuz-redux-lesson-05-lcgvi
25. Lindo, mas e daí? O que eu ganho com isso?
26. #1 - Testar é uma moleza - Os reducers implementam a maior parte das regras de negócio - Funções puras não precisam de mocks - Os testes verificam o retorno da função para diferentes conjuntos de parâmetros
27. #2 - Depuração com esteróides - A imutabilidade permite "voltar no tempo" em estados anteriores para investigar problemas e inconsistências - Reproduzir estados é incrivelmente mais simples - DevTools dedicado
28. #3 - Compõe bem com suas necessidades - Extensível através de middlewares que podem implementar funcionalidades como log, persistência, tratamento de erros ou qualquer tipo de efeito colateral
29. #4 - Agnóstico - Funciona bem com qualquer framework de UI
30. Redux EVERYWHERE!!!!!!!!!!!!!
31. Não é para todo mundo - Para alguns casos existem meios mais enxutos e menos verbosos de controlar estados - Nem tudo deve ser um estado global - Cada caso é um caso - You Might Not Need Redux
32. Referências - 3 princípios do Redux: https://redux.js.org/introduction/three-principles - Principais conceitos: https://redux.js.org/introduction/core-concepts - API: https://redux.js.org/api/api-reference - Curso com Dan Abramov: https://learnreduxwithdanabramov.com - Repositório: https://github.com/reduxjs/redux - Devtools: https://github.com/reduxjs/redux-devtools - YMNNR: https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367
33. Obrigado #vemTambaqui