Normalizing Redux

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

Transcript

1. João Paulo Lins Fullstack Developer Normalizing Redux
2. • Bachelor of Computer Engineering @ UFPE • 3 years working with Web Development • Front end enthusiast João Paulo Lins Fullstack Developer @ 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. Redux Flow
7. Redux Flow
8. State - Nested data
9. State - Nested data
10. • Duplicated data is harder to update. Nested data
11. • Duplicated data is harder to update. • Nested data implies in nested reducer logic. Nested data
12. • Duplicated data is harder to update. • Nested data implies in nested reducer logic. • Updates to nested data can generate unnecessary re-renders. Nested data
13. “The more your frontend state looks like a database, the easier it is to work with it.” - Dan Abramov
14. • Normalized data - No repetitions. Database characteristics
15. • Normalized data - No repetitions. • Data is structured in Tables. Database characteristics
16. • Normalized data - No repetitions. • Data is structured in Tables. • Relationships are indicated by Foreign Keys. Database characteristics
17. State - Flat data
18. Normalizr
19. • Normalizr is a small, but powerful utility for taking JSON with a schema definition and returning nested entities with their IDs, gathered in dictionaries. • https://github.com/paularmstrong/normalizr Normalizr
20. Normalizr API • Normalizr API consists of: ◦ schema - definition of Entities ◦ normalize() / denormalize() - transformations
21. Normalizr API - Schema
22. Normalizr API - Schema Relationships
23. Normalizr API - Schema Options
24. Normalizr API - Schema Array
25. Normalizr API - Schema Array
26. Normalizr API - Schema Array
27. Normalizr API - Normalize
28. Normalizr API - Normalize
29. Normalizr API - Normalize
30. Normalizr API - Normalize
31. Normalizr API - Normalize return object
32. Normalizr API - Normalize return object
33. Normalizr API - Normalize return object
34. Normalizr API - Normalize return object
35. Normalize Example
36. Normalizr API - Example
37. Normalizr API - Example
38. Normalizr Normalizr API - Example
39. Denormalize Example
40. Normalizr API - Denormalize
41. Normalizr API - Denormalize
42. Normalizr API - Denormalize
43. Normalizr API - Denormalize
44. Normalizr with Redux
45. Normalizr + Redux - Data Shape Example
46. Tip - Selectors • The selector pattern is an abstraction that standardizes an application’s store querying logic. • For any part of the store that an application needs access to, define a function that when given the full store, returns the desired part (or derivation) of the store. https://hackernoon.com/selector-pattern-painless-redux-store-destructuring- bfc26b72b9ae
47. Tip - Selectors
48. Normalizr + Redux - Good Practices • Normalize data before storing into Redux
49. Normalizr + Redux - Good Practices • Normalize data before storing into Redux • If denormalizing, be careful with the amount of data
50. Normalizr + Redux - Good Practices • Normalize data before storing into Redux • If denormalizing, be careful with the amount of data • Store the least amount of data possible, and calculate your needs on the fly
51. Normalizr + Redux - Good Practices • Pass entities IDs to connected children components
52. Normalizr + Redux - Good Practices • Normalized state structure => more components are connected. • “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.” -- Redux Docs
53. Normalizr + Redux - Good Practices • Presentational and Container Components???
54. Normalizr + Redux - Good Practices • Dan Abramov - From his article written in 2015:
55. Code Example
56. João Paulo Lins Fullstack Developer /joaopslins joao.lins@vinta.com.br Thank you! Got any questions? Access this talk on github.com/vintasoftware/normalizr-redux-talk
57. Extra
58. Extra - Reselect • Reselect: Memoized Selectors
59. Extra - Reselect • getActiveUsers always returns a new reference • filter operation will run on every check
60. Extra - Reselect • Solution:
61. Extra - Reselect • Worth it?
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