This document contains a presentation on normalizing data with Redux using the Normalizr library. It discusses the benefits of normalized data over nested data, including avoiding duplications and unnecessary re-renders. It then explains the Normalizr library and API for normalizing and denormalizing JSON data based on schema definitions. Finally, it provides tips for using Normalizr with Redux like normalizing data before storing in the state and using selectors to access state properties.

1. João Paulo Lins Fullstack Developer
Normalizing Redux

2. ● Bachelor of Computer Engineering @ UFPE
● 2.5 years working with Web Development
● Loves Front End technologies
João Paulo Lins
Fullstack Developer
/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 divided in Tables.
Database characteristics

16. ● Normalized data - No repetitions.
● Data is divided 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 - Normalization

21. Normalizr - Denormalization

22. Normalizr API

23. Normalizr API
● Normalizr API consists of:
○ schema - definition of Entities
○ normalize() / denormalize() - transformations

24. Normalizr API

25. NormalizrNormalizr API - Relationships

26. Normalizr API - Relationships

27. Normalizr API - Relationships

28. Normalizr API - Denormalize

29. Normalizr API - Denormalize

30. Normalizr with Redux

31. Normalizr + Redux - Data Shape

32. Normalizr + Redux - Data Shape Example

33. Normalizr + Redux - Good Practices
● Normalize data before storing into Redux

34. Normalizr + Redux - Good Practices
● Normalize data before storing into Redux
● Pass entities IDs to connected children components

35. Normalizr + Redux - Good Practices
● Normalize data before storing into Redux
● Pass entities IDs to connected children components
● If denormalizing, be careful with the amount of data

36. Normalizr + Redux - General Tips
● [Library] ImmutableJS
● [Pattern] Selectors

37. Normalizr + Redux - General Tips
● ImmutableJS - Easy and clean API for immutable data

38. Normalizr + Redux - General Tips
● Selectors
○ Only access state properties through Selectors

39. Code Example

40. 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