Simplify State Management with Redux 2018

Managing state in web applications these days is increasingly difficult. Redux is a JavaScript framework for managing and maintaining application state that simplifies state management by restricting how data is updated in web apps. These restrictions make it easier to manage data changes and enable powerful developer tools. In this session, we'll look at how data flows in Redux applications and the role functional programming plays by looking at how to build applications with React and Redux. We'll also look at the role developer tools play, as well as how all this can make you a better developer.

Transcript

1. Simplify State Management with Redux Jonathan Kemp
3. Overview - What is State? - Managing State with Redux - MobX + Alternatives
4. Managing state is hard
5. What is state?
6. Bidirectional Data Flow
7. Non-deterministic = hard to reproduce bugs
8. Redux
9. Redux is... - following certain constraints to create a good developer experience. - teaching you programming principles that can make you a better developer.
10. Recalculator https://github.com/jonkemp/recalculator
11. Features: - Plain Text Calculator - Every calculation gets saved to the history - Refer to calculations and reuse them in the calculator
12. Core Concepts
13. A Single state object represents all the state in your app
14. { items: [ { id: 0, expression: '', result: 0 } ], lastResult: 0, lastExpression: '' }
15. Everything that happens in your app is an “action”.
19. You write “reducers” for everything that changes state
20. function calculateApp(state, action) { switch (action.type) { case ADD_ENTRY: return Object.assign({}, state, { items: [ { id: state.items.reduce((maxId, todo) => Math.max(todo.id, maxId), -1) + 1, expression: action.text, result: eval(action.text) }, ...state.items ] }) ... } }
22. function calculateApp(state, action) { switch (action.type) { case REMOVE_ENTRY: return Object.assign({}, state, { items: [ ...state.items.slice(0, action.index), ...state.items.slice(action.index + 1) ] }) ... } }
23. Make state mutations predictable
24. Three Principles of Redux 1. Single source of truth 2. State is read-only 3. Changes are made with pure functions
25. Single source of truth - The state of your whole application is stored in an object tree within a single store. - A single state tree also makes it easier to debug or introspect an application.
26. State is read-only - The only way to mutate the state is to emit an action, an object describing what happened. - This ensures that neither the views nor the network callbacks will ever write directly to the state.
28. Changes are made with pure functions - To specify how the state tree is transformed by actions, you write pure reducers.
29. Deterministic View Render
30. Pure Functions
31. Pure Functions 1. Given the same input, always returns the same output. 2. Do Not Cause Side Effects. 3. Don’t Mutate Arguments.
32. Pure Functions - Avoid globals - Ensure its data comes from inputs and it never reaches outside itself - Don’t modify input - Avoid side-effects
33. Master the JavaScript Interview: What is a Pure Function? https://medium.com/javascript-scene/master-the-javascript-interview-what- is-a-pure-function-d1c076bec976
34. Reducers
35. Reduce
36. const array1 = [1, 2, 3, 4]; const reducer = (accumulator, currentValue) => accumulator + currentValue; // 1 + 2 + 3 + 4 console.log(array1.reduce(reducer)); // expected output: 10 // 5 + 1 + 2 + 3 + 4 console.log(array1.reduce(reducer, 5)); // expected output: 15
37. Keep Reducers Pure
38. Reduce (Composing Software) https://medium.com/javascript-scene/reduce-composing-software- fe22f0c39a1d
39. Transactional, deterministic state management
40. Do amazing things
41. Developer Tools
42. function counter(state = 0, action) { switch (action.type) { case 'INCREMENT': return state + 1; case 'DECREMENT': return state - 1; default: return state; } } let store = createStore(counter); store.subscribe(() => console.log(store.getState()) );
43. store.dispatch({ type: 'INCREMENT' }) // 1 store.dispatch({ type: 'INCREMENT' }) // 2 store.dispatch({ type: 'DECREMENT' }) // 1
44. Reducer composition
46. export default theDefaultReducer = (state = 0, action) => state; export const firstNamedReducer = (state = 1, action) => state; export const secondNamedReducer = (state = 2, action) => state; const rootReducer = combineReducers({ theDefaultReducer, firstNamedReducer, secondNamedReducer }); const store = createStore(rootReducer); console.log(store.getState()); // {theDefaultReducer : 0, firstNamedReducer : 1, secondNamedReducer : 2}
47. Redux Can Make you a Better Developer
48. React and Redux - Pure functions, immutable state, reduce, function composition, deterministic state - These concepts have carried over into many other libraries and frameworks.
49. –Eric Elliott “Redux is mandatory learning, even if you never use Redux for a production project.”
50. *React not required
51. React Redux npm install --save react-redux
52. Usage with React Presentational and Container Components
53. Get started with Redux - create-react-app - CodeSandbox *Redux not included
54. CodeSandbox https://codesandbox.io/s/new
55. React Slingshot React, Redux, React Router Tooling: Babel, WEbpack, ESLint, Unit Testing, ETC.
56. Example
57. Counter CountIt CountIt const { count } = this.props dispatch({ type: 'INCREMENT' }) dispatch({ type: 'DECREMENT' }) appReducer Store
58. Data Flow - call store.dispatch(action). - The Redux store calls the reducer function. - The Redux store saves the state tree returned by the root reducer.
59. Middleware
60. Redux Overview - State of your app is in a single store. - Only way to change the state tree is to emit an action. - specify how the actions transform the state with pure reducers.
61. Criticism - Too much boilerplate - Unnecessary complexity
62. Learn to Think in React, First.
63. Resources - Getting Started with Redux
 https://egghead.io/courses/getting-started-with-redux - Building Applications with Idiomatic Redux
 https://egghead.io/courses/building-react-applications-with-idiomatic-redux
64. Github - React Slingshot
 https://github.com/coryhouse/react-slingshot - Recalculator
 https://github.com/jonkemp/recalculator
65. Redux - Helps you write applications that behave consistently - Good developer experience - use together with React, or with any other view library. - Teaches concepts important to functional programming
66. Functional Reactive Programming
67. Actions = Event streams
68. Simple Components
69. No need for separate actions and stores
70. MobX
71. Becoming Reactive
72. @observable, @computed Decorators
73. Observable state
74. Autorun
75. MobX + React
76. class ObservableTodoStore { @observable todos = []; constructor() { mobx.autorun(() => console.log(this.report)); } addTodo(task) { this.todos.push({ task: task, completed: false, assignee: null }); } } const observableTodoStore = new ObservableTodoStore();
77. @observer class TodoList extends React.Component { render() { const store = this.props.store; return ( <ul> {store.todos.map(todo => ( <li key={todo.id}>{todo.text}</li> ))} </ul> ); } } ReactDOM.render(<TodoApp store={ observableTodoStore } />, mountNode);
78. Example
79. Counter CountIt CountIt observer this.countUp this.countDown count: observable, countUp: action, countDown: action Store
80. MobX is not a state container
81. MobX is simpler State Management
82. MobX Free Course https://egghead.io/courses/manage-complex-state-in-react-apps-with-mobx
83. Ten minute introduction to MobX and React https://mobx.js.org/getting-started.html
84. Other Alternatives - Vue - Cycle.js - Elm - No framework
86. Jonathan Kemp @jonkemp https://github.com/jonkemp
87. Jonathan Kemp CodePen - https://codepen.io/jonkemp/pens/public/ Slides - https://speakerdeck.com/jonkemp