You might not need redux

More info at https://moox.io/talk/you-might-not-need-redux/

Transcript

1. @MoOx
   Do you need
   redux?
   1 @MoOx
   

   View Slide

2. @MoOx
   Redux

   is a predictable state container
   for JavaScript apps.
   2
   

   View Slide

3. @MoOx
   3
   State
   UI
   Actions
   Reducer
   transformed into
   dispatches
   passed to
   returns new
   

   View Slide

4. @MoOx
   - behave consistently
   - run in different environments
   (client, server, and native)
   - are easy to test
   4
   Redux helps you write
   applications that
   

   View Slide

5. @MoOx
   - live code editing (hot reloading)
   - time traveling debugger.
   5
   Redux provides a

   great developer experience
   

   View Slide

6. @MoOx
   - persist state (local storage) & boot from it
   (CSR & SSR)
   - serialize actions & save/reuse those
   - easy undo/redo / time traveling
   - share business logic between apps
   6
   Redux allows you to
   

   View Slide

7. @MoOx
   (Not tied to React)
   7
   

   View Slide

8. @MoOx
   8 @MoOx
   Redux is nice,
   makes app structuring foreseeable,
   forces developers to think about their model
   

   View Slide

9. @MoOx
   But…
   9
   

   View Slide

10. @MoOx
    10 https://www.youtube.com/watch?v=Q54YDGC_t3Y
    

    View Slide

11. @MoOx
    11 https://twitter.com/housecor/status/962754389533429760
    

    View Slide

12. @MoOx
    “Let’s use Redux
    everywhere”
    12
    

    View Slide

13. @MoOx
    “Let’s use Redux for a
    form input”
    13
    

    View Slide

14. @MoOx
    Redux for a
    form input?
    14
    https://github.com/erikras/redux-form
    

    View Slide

15. @MoOx
    If you abuse Redux,

    all your components might end
    up being connect()ed
    15
    Is this what you want?
    

    View Slide

16. @MoOx
    Be careful not to use
    redux for everything
    16
    https://github.com/final-form/react-final-form
    By the guy that did redux-form, but later
    

    View Slide

17. @MoOx
    Redux + redux-thunk
    17
    Need at least 3 or 4 files.
    Reusability--
    

    View Slide

18. @MoOx
    React Context API 

    A Replacement for Redux?
    18 https://blog.bitsrc.io/react-context-api-a-replacement-for-redux-6e20790492b3
    

    View Slide

19. @MoOx
    Redux uses context
    19
    

    View Slide

20. @MoOx
    Think McFly, think!
    20
    

    View Slide

21. @MoOx
    What is setState()
    again?
    21
    

    View Slide

22. @MoOx
    22
    

    View Slide

23. @MoOx
    23
    

    View Slide

24. @MoOx
    setState() and passing
    props might be enough
    24
    (if your store is at the top of your app, you can pass things down)
    

    View Slide

25. @MoOx
    setState()
    25
    Everything fits in a file.
    Reusability++
    

    View Slide

26. @MoOx
    https://reactjs.org/docs/

    react-component.html#setstate
    26
    

    View Slide

27. @MoOx
    27
    

    View Slide

28. @MoOx
    28
    

    View Slide

29. @MoOx
    29
    

    View Slide

30. @MoOx
    You might not need
    redux
    30 @MoOx
    

    View Slide

31. @MoOx
    31 https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367
    

    View Slide

32. @MoOx
    32 https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367
    

    View Slide

33. @MoOx
    33 https://duckduckgo.com/?q=you+might+not+need+redux
    

    View Slide

34. @MoOx
    http://www.youmightnotneedredux.info
    34
    

    View Slide

35. @MoOx
    35 https://twitter.com/jevakallio/status/962968823648391168
    

    View Slide

36. @MoOx
    36 https://twitter.com/kentcdodds/status/962907908517257216
    

    View Slide

37. @MoOx
    37 https://twitter.com/housecor/status/962890121027706880
    

    View Slide

38. @MoOx
    Local state is fine
    38 https://gist.github.com/gaearon/a9bbb73d57b6e4cc17d7b50807b62f9a
    

    View Slide

39. @MoOx
    39 https://twitter.com/dan_abramov/status/824308413559668744/photo/1
    

    View Slide

40. @MoOx
    https://gist.github.com/gaearon/64e2c4adce2b4918c96c3db2b44d8f68
    Redux without redux
    40
    

    View Slide

41. @MoOx
    “Should you do this to your stateful
    components? Probably not.
    Not unless you have a plan to benefit
    from this additional indirection”
    41 https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367
    

    View Slide

42. @MoOx
    What redux does,
    ReasonReact and Elm do
    42
    Actions are types, reducers are functions,

    state is immutable, but at the language level
    

    View Slide

43. @MoOx
    43
    

    View Slide

44. @MoOx
    “done in collaboration with the ReactJS team”
    44 https://reasonml.github.io/reason-react/blog/2017/09/01/reducers.html
    

    View Slide

45. @MoOx
    - Does my app need this?
    - Does my team need this?
    - Does my product need this?
    @MoOx
    45
    Before adding Redux
    (and other fancy things)
    

    View Slide

46. @MoOx
    Do my users need this?
    46
    

    View Slide

47. @MoOx
    Redux is nice
    But not required
    47
    

    View Slide

48. @MoOx
    Use Redux
    when it’s necessary
    not before
    48
    Like any other tool
    

    View Slide

49. @MoOx
    Let’s love Redux
    Let’s hate Redux
    49
    

    View Slide

50. @MoOx
    (More “you might not need”?)
    50
    https://youmightnotneed.com
    

    View Slide

51. @MoOx
    51
    Questions ?
    https://moox.io/
    @MoOx
    Maxime Thirouin
    
    

    View Slide