State is the source of all bugs

Learn what Redux is and how you can follow the redux architecture to scale and organize your applications.

Transcript

1. 1 State is the source of all bugs.
4. 2 Does this involve new libraries?
5. 2 Yes. Get Over It.
6. 3 New phone, who dis?
14. 11 @VinSpee
15. 12 typeof thisFont == ‘code’
16. 13 State is the source of all bugs.
17. 14 State is the source of all bugs. Pretty much.
18. 15 State is the source of all bugs. Pretty much. At least the weird ones that aren’t browser- related.
20. 17 Redux
21. 18 Redux
22. 18 Redux
24. 20 Redux
25. 20 Redux
26. 21 Redux
27. 22 lol georbascrib bye
28. 22 lol georbascrib bye
29. 23 • JavaScript — redux • .NET — redux.NET • Java — reductor • Swift — ReSwift • Objective-C — Reflow • PHP — php-redux • ruby — redux.rb
30. 24 Redux
31. 25 state {}
32. 26 state {} store
33. 27 state {} {} new state store
34. 28 state {} {} new state store re-poo-cer
35. 29 = state.yourProp = newValue; state re-poo-cer
36. 30 Mutable operations necessitate side-effects.
37. 31 state {} store {} new state
38. 32 = (state, { payload }) => ({ ...state, yourProp: payload.newValue, });
39. 33 state {} {} new state store reducer
40. 34 state dispatcher action
41. 35 dispatcher dispatch({ type: VIDEO.PLAY.REQUESTED, payload: videoPlayerInstance, });
42. 36 action type: VIDEO.PLAY.REQUESTED, type: VIDEO.PLAY.FULFILLED, type: VIDEO.PLAY.REJECTED, type: ROUTER.UPDATE_LOCATION,
43. 37 action (state, { type, payload }) => { switch (type) { case VIDEO.PLAY.REQUESTED: return { ...state, loading: true, }; …
44. 38 action import { union } from ‘tagmeme’; const VideoPlayer = union([‘Requested’, ‘Fulfilled’, ‘Rejected’]); (state, action) => VIDEO_PLAYER.match( action, { Requested: () => ({ ...state, loading: true }), Fulfilled: () => ({ ...state, loading: false, status: ‘PLAYING’ }), Rejected: (error) => ({ ...state, loading: false, error }), }, );
45. 39 action (state, { type, payload }) => { switch (type) { case VIDEO.PLAY.REQUESTED: return { ...state, loading: true, }; …
46. 40 This is the beauty of Redux.
47. 41 State can only be updated as a result of an action.
48. 42 We have a record of actions.
50. 44 How do I connect it to my UI?
51. 45 ui const VideoPlayer = ({ status, onPlay, onPause }) => ( <View> {status !== ‘PLAYING’ ? ( <Button onClick={onPlay}>play</Button> ) : ( <Button onClick={onPause}>pause</Button> )} <VideoScreen … /> </View> );
52. 46 ui connect(state => ({ status: state.status, }), dispatch => ({ onPlay: () => dispatch(VIDEO.PLAY.REQUESTED), onPause: () => dispatch(VIDEO.PAUSE.REQUESTED), })(VideoPlayer),
53. 47 Couldn’t my state tree get a bit messy?
54. 48 Couldn’t my state tree get a bit messy? YES.
55. 49 Tips
56. 50 1. Normalize your data.
57. 51 { users: [ { id: 1, name: ‘Sam Hanes’, email: ‘sam@detdayoffunctional.com', }, ], },
58. 52 { users: { entities: [ 1: { id: 1, name: ‘Sam Hanes’, email: ‘sam@detdayoffunctional.com', }, ], result: [1], }, },
59. 53 const entify = d => d.reduce((a,c) => ({ ...a, entities: { ...a.entities, [c.id]:c, }, result: [...a.result, c.id], }),{});
60. 54 2. Don’t use booleans for everything. videoPlayer: { isPlaying: false, }
61. 55 videoPlayer: { isPlaying: false, isPaused: true, isLoaded: true, } 2. Don’t use booleans for everything.
62. 56 videoPlayer: { status: ‘PLAYING’, loading: ‘COMPLETE’ } 2. Don’t use booleans for everything.
63. 57 3. Push outside concerns into middleware.
64. 58 3. Push outside concerns into middleware. wait, wtf is middleware?
65. 59 middleware Middleware are “action interceptors” that can execute side effects.
66. 60 middleware - Analytics
67. 61 middleware - Analytics - API calls
68. 62 middleware - Analytics - API calls - Legacy Systems
69. 63 login press dispatch login auth middleware
70. 64 auth middleware const authMiddleware = store => next => action => { if (action.type === 'LOGIN') { return legacy.login(action.payload).then(res => next({ ...action, payload: res, }) ); } return next(action); }
71. 65 3. Push outside concerns into middleware.
72. 66 4. Use selectors state => ({ status: select.getPlayerStatus(state), })
73. 67 5. Use constants to name actions and use action creators
74. 68 6. Put everything in your global state tree.
75. 69 Redux
76. 70 • JavaScript — redux • .NET — redux.NET • Java — reductor • Swift — ReSwift • Objective-C — Reflow • PHP — php-redux • ruby — redux.rb
77. 71 @VinSpee