Mistakes I made writing React/Redux applications

Mistakes I made writing React/Redux applications

43aed98b8c4c276ddbb2c8e2fb8fb464?s=128

Alexandre Santos

November 16, 2018
Tweet

Transcript

  1. 5.

    5

  2. 6.

    6

  3. 22.

    ❌ 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
  4. 26.

    ❌ 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
  5. 27.

    27

  6. 33.

    ❌ 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
  7. 34.

    34

  8. 41.

    41

  9. 42.

    ❌ 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
  10. 49.

    ❌ Do not reuse reducer code ❌ Lack coherence in

    action names ✅ Use Higher order reducers ✅ Reuse logic ✅ Enforce namespacing/coherence 49
  11. 51.

    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
  12. 52.

    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