Upgrade to Pro — share decks privately, control downloads, hide ads and more …

You might not need redux

You might not need redux

Maxime Thirouin

May 23, 2018
Tweet

More Decks by Maxime Thirouin

Other Decks in Technology

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