Normalizing Redux PT

https://github.com/vintasoftware/normalizr-redux-talk

Transcript

1. João Paulo Lins Desenvolvedor Fullstack Normalizando o Redux
2. • Bacharelado em Eng. Comp. @ UFPE • 3 anos trabalhando com desenvolvimento web • Entusiasta de front end João Paulo Lins Desenvolvedor Fullstack @ Vinta /joaopslins joao.lins@vinta.com.br
3. We're a team of experts from Brazil. We help our clients evolve their products the right way with top notch development and UX techniques. Get to know us: vintasoftware.com
4. Redux
5. Redux
6. Fluxo do Redux
7. Fluxo do Redux
8. Estado - Dados aninhados
9. Estado - Dados aninhados
10. • Dados duplicados são mais complicados de se atualizar. Dados aninhados
11. • Dados duplicados são mais complicados de se atualizar. • Dados aninhados significa lógica de reducer aninhada. Dados aninhados
12. • Dados duplicados são mais complicados de se atualizar. • Dados aninhados significa lógica de reducer aninhada. • Atualizações à dados aninhados podem gerar renders desnecessários. Dados aninhados
13. “The more your frontend state looks like a database, the easier it is to work with it.” - Dan Abramov
14. • Dados normalizados - Sem repetições. Características de bancos de dados
15. • Dados normalizados - Sem repetições. • Dados estão organizados em tabelas. Características de bancos de dados
16. • Dados normalizados - Sem repetições. • Dados estão organizados em tabelas. • Relacionamentos são indicados por Chaves Estrangeiras (FKs). Características de bancos de dados
17. Estado - Dados flat
18. Normalizr
19. • Normalizr é uma pequena mas poderosa ferramenta que consome JSONs com uma definição de schema e retorna entities aninhadas com seus IDs, agrupadas em dicionários. • https://github.com/paularmstrong/normalizr Normalizr
20. Normalizr API • A API do Normalizr consiste de: ◦ schema - Definição de entities ◦ normalize() / denormalize() - transformações
21. Normalizr API - Schema
22. Normalizr API - Relacionamentos em Schemas
23. Normalizr API - Opções de schemas
24. Normalizr API - Array de schemas
25. Normalizr API - Array de schemas
26. Normalizr API - Array de schemas
27. Normalizr API - Normalize
28. Normalizr API - Normalize
29. Normalizr API - Normalize
30. Normalizr API - Normalize
31. Normalizr API - Retorno do normalize
32. Normalizr API - Retorno do normalize
33. Normalizr API - Retorno do normalize
34. Normalizr API - Retorno do normalize
35. Exemplo: normalize
36. Normalizr API - Exemplo
37. Normalizr API - Exemplo
38. Normalizr Normalizr API - Exemplo
39. Exemplo: denormalize
40. Normalizr API - Denormalize
41. Normalizr API - Denormalize
42. Normalizr API - Denormalize
43. Normalizr API - Denormalize
44. Normalizr com Redux
45. Normalizr + Redux - Exemplo de estado
46. Dica - Seletores • O padrão Seletor é uma abstração que padroniza a lógica de acesso do estado da aplicação. • Para qualquer parte do estado que uma aplicação precisa, defina uma função que, dado o estado, retorna uma parte (ou uma derivação) do estado. https://hackernoon.com/selector-pattern-painless-redux-store-destructuring- bfc26b72b9ae
47. Dica - Seletores
48. Normalizr + Redux - Boas Práticas • Normalize os dados antes de guardá-los no Redux.
49. Normalizr + Redux - Boas Práticas • Normalize os dados antes de guardá-los no Redux. • Se desnormalizar, atente para a quantidade de dados.
50. Normalizr + Redux - Boas Práticas • Normalize os dados antes de guardá-los no Redux. • Se desnormalizar, atente para a quantidade de dados. • Tenha no estado o mínimo possível, e calcule o que precisar.
51. Normalizr + Redux - Boas Práticas • Passe os IDs das entidades para componentes filhos conectados.
52. Normalizr + Redux - Boas Práticas • Estrutura de estado normalizado => mais componentes estão conectados. • “As it turns out, having connected parent components simply pass item IDs to connected children is a good pattern for optimizing UI performance in a React Redux application, so keeping state normalized plays a key role in improving performance.” -- Documentação do Redux
53. Normalizr + Redux - Boas Práticas • Presentational e Container Components???
54. Normalizr + Redux - Boas Práticas • Dan Abramov - No seu artigo de 2015:
55. Projeto exemplo
56. João Paulo Lins Fullstack Developer /joaopslins joao.lins@vinta.com.br Obrigado! Perguntas? Acesse esta palestra em github.com/vintasoftware/normalizr-redux-talk
57. Extra
58. Extra - Reselect • Reselect: Seletores memoizados
59. Extra - Reselect • getActiveUsers sempre retornará uma nova referência • A operação filter irá ocorrer em toda checagem
60. Extra - Reselect • Solução:
61. Extra - Reselect • Vale a pena?
62. “Performance optimizations are not free. They always come with a cost but do not always come with a benefit to offset that cost. Therefore, optimize responsibly.” - Kent C. Dodds