Mistakes I made writing React/Redux applications

Slide 1

Slide 1 text

Mistakes I made writing React / Redux applications require(‘lx’) Alexandre Santos

Slide 2

Slide 2 text

Who am I? Software developer @ KI Labs ampsantos0 asantos00 Alexandre Santos, 24yo 2

Slide 3

Slide 3 text

What is this talk about? 3

Slide 4

Slide 4 text

Before we start React? Redux? 4

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

#1 - Trying to componentize too soon 7

Slide 8

Slide 8 text

#1 - Trying to componentize too soon 8

Slide 9

Slide 9 text

#1 - Trying to componentize too soon 9

Slide 10

Slide 10 text

#1 - Trying to componentize too soon 10

Slide 11

Slide 11 text

#Lesson 1 - Do not predict the future, simplify 11

Slide 12

Slide 12 text

#1 - Trying to componentize too soon 12

Slide 13

Slide 13 text

❌ Trying to componentize too soon ✅ Create components as needed, simplify 13

Slide 14

Slide 14 text

14 Just one more drink

Slide 15

Slide 15 text

#2 - Add “one more prop” 15

Slide 16

Slide 16 text

#2 - Add “one more prop” 16

Slide 17

Slide 17 text

#2 - Add “one more prop” 17

Slide 18

Slide 18 text

#Lesson 2 - Compose components, the open-closed principle 18

Slide 19

Slide 19 text

#2 - Add “one more prop” 19

Slide 20

Slide 20 text

#2 - Add “one more prop” 20

Slide 21

Slide 21 text

#2 - Add “one more prop” 21

Slide 22

Slide 22 text

❌ Add “one more prop” ✅ Add props that have meaning for the button ✅ Extend without having to change the component ✅ Avoid prop hell ✅ Use children prop ✅ Use render props 22

Slide 23

Slide 23 text

#3.1 - Bad redux store planning 23

Slide 24

Slide 24 text

#Lesson 3.1 - Think state as a database 24

Slide 25

Slide 25 text

#3.1 - Bad redux store planning 25

Slide 26

Slide 26 text

❌ Redundancy ❌ Store lists in arrays ❌ Disregard “indexes” ✅ Store in objects for easy access (by id p.ex) ✅ Have references to avoid duplicates ✅ Think store state as a database 26

Slide 27

Slide 27 text

Slide 28

Slide 28 text

#3.2 - Couple data with UI 28

Slide 29

Slide 29 text

#3.2 - Couple data with UI 29

Slide 30

Slide 30 text

#Lesson 3.2 - Keep UI and Data decoupled, avoid nesting 30

Slide 31

Slide 31 text

#3.2 - Couple data with UI 31

Slide 32

Slide 32 text

#3.2 - Couple data with UI 32

Slide 33

Slide 33 text

❌ Mix UI state with Data ❌ Have various levels of nesting ❌ Couple store with component structure ✅ Store UI state and data in different indexes ✅ Have an almost flat store, with references ✅ Store mimics the domain model 33

Slide 34

Slide 34 text

Slide 35

Slide 35 text

#4 - Access the store directly from components 35

Slide 36

Slide 36 text

#4 - Access the store directly from components 36

Slide 37

Slide 37 text

#4 - Access the store directly from components 37

Slide 38

Slide 38 text

#4 - Access the store directly from components 38

Slide 39

Slide 39 text

#Lesson 4 - Use selectors 39

Slide 40

Slide 40 text

#4 - Access the store directly from components 40

Slide 41

Slide 41 text

Slide 42

Slide 42 text

❌ Couple components with store structure ❌ Do unnecessary logic to get same values ✅ Use selectors as “getters” for store values ✅ Have memoized selectors that don’t recalculate if arguments don’t change 42

Slide 43

Slide 43 text

#5 - Duplicate reducer logic 43

Slide 44

Slide 44 text

#5 - Duplicate reducer logic 44

Slide 45

Slide 45 text

#5 - Duplicate reducer logic 45

Slide 46

Slide 46 text

#Lesson 5 - Use higher order reducers 46

Slide 47

Slide 47 text

#5 - Duplicate reducer logic 47

Slide 48

Slide 48 text

#5 - Duplicate reducer logic 48

Slide 49

Slide 49 text

❌ Do not reuse reducer code ❌ Lack coherence in action names ✅ Use Higher order reducers ✅ Reuse logic ✅ Enforce namespacing/coherence 49

Slide 50

Slide 50 text

#6, #7, #8... - Think redux as a library instead of a pattern 50

Slide 51

Slide 51 text

1. Try to componentize too soon 2. Add “one more prop” 3. Bad redux store planning 3.1. Redundancy/Lack of index 3.2. Couple store with UI 4. Components directly accessing the store 5. Duplicate reducer logic 6. Think redux as a library ❌ Mistakes 51

Slide 52

Slide 52 text

1. Do not predict the future, extract to reuse 2. Compose components, think extensibility 3. Rethink the redux store structure 3.1. Think store as a database 3.2. Keep UI and Data decoupled, avoid nesting 4. Use selectors 5. Use higher order reducers 6. Think redux as a pattern ✅ Lessons learned 52