You might not need redux

Slide 1

Slide 1 text

@MoOx Do you need redux? 1 @MoOx

Slide 2

Slide 2 text

@MoOx Redux  is a predictable state container for JavaScript apps. 2

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

@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

Slide 7

Slide 7 text

@MoOx (Not tied to React) 7

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

@MoOx But… 9

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

@MoOx “Let’s use Redux everywhere” 12

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

@MoOx If you abuse Redux,  all your components might end up being connect()ed 15 Is this what you want?

Slide 16

Slide 16 text

@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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

@MoOx Redux uses context 19

Slide 20

Slide 20 text

@MoOx Think McFly, think! 20

Slide 21

Slide 21 text

@MoOx What is setState() again? 21

Slide 22

Slide 22 text

@MoOx 22

Slide 23

Slide 23 text

@MoOx 23

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

@MoOx setState() 25 Everything ﬁts in a ﬁle. Reusability++

Slide 26

Slide 26 text

@MoOx https://reactjs.org/docs/  react-component.html#setstate 26

Slide 27

Slide 27 text

@MoOx 27

Slide 28

Slide 28 text

@MoOx 28

Slide 29

Slide 29 text

@MoOx 29

Slide 30

Slide 30 text

@MoOx You might not need redux 30 @MoOx

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

@MoOx What redux does, ReasonReact and Elm do 42 Actions are types, reducers are functions,  state is immutable, but at the language level

Slide 43

Slide 43 text

@MoOx 43

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

@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)