The State of State Management in React 2018

These days, managing state in web applications is increasingly difficult. Frameworks like Angular, Ember or Aurelia have some mechanism for managing state built in. But what if you're using React? How do you know which state management solution is right for you? In this session, we'll survey the landscape for managing state in React applications, and walk through some of the more popular solutions, such as Redux and MobX, as well as alternatives like Vue, RxJS and Elm.

Transcript

1. The State of State Management in React Jonathan Kemp
3. Overview - What is State? - Managing State with React, Redux, and Mobx - Context - Alternatives
4. Managing state is hard
5. What is state?
6. Storing State in the DOM doesn’t scale
7. MV-Whatever
8. Bidirectional Data Flow
9. Side effects
10. Costs - Hard to predict - Performance, memory, efficiency - Large JS payloads
11. React
12. Component Based UI
13. React State
14. React Components - Class components have the ability to maintain internal state. - Functional components do not manage state.
15. class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } render() { return ( <div> <h1>Hello, world!</h1> <h2>It is {this.state.date.toLocaleTimeString()}.</h2> </div> ); } }
16. What goes in state?
17. Unidirectional Data Flow
18. Because Performance
19. Easier to Reason About
20. Do Not Modify State Directly
21. class TodoApp extends React.Component { constructor(props) { super(props); ... this.state = { items: [], text: '' }; } onChange(e) { this.setState({text: e.target.value}); }
22. Single source of truth
23. Lifting State Up
24. Lifting State Up => Reduce bugs
25. Example
26. Counter CountIt CountIt this.state = { count: 0 }; this.setState((prevState) => ({ count: prevState.count + 1 })); this.setState((prevState) => ({ count: prevState.count - 1 }));
27. Summary of React State - Data used for the visual output is stored in state - Unidirectional Data Flow - Performance, Easier to Reason about, Reduce Bugs
28. Flux
29. Unidirectional Data Flow
30. Benefits of Flux - Makes it easy to reason about complex data changes - Opens up possibilities impossible with classic MVC, such as recording and replaying UI state - Easy Testability
31. Redux
32. Three Principles of Redux 1. Single source of truth 2. State is read-only 3. Changes are made with pure functions
33. Pure Functions
34. Master the JavaScript Interview: What is a Pure Function? https://medium.com/javascript-scene/master-the-javascript-interview-what- is-a-pure-function-d1c076bec976
35. Reducers
36. Reduce (Composing Software) https://medium.com/javascript-scene/reduce-composing-software- fe22f0c39a1d
37. Things to understand:
38. Everything that happens in your app is an “action”.
39. One giant state object represents all the state in your app
40. You write “reducers” for everything that changes state
41. Transactional, deterministic state management
42. Do amazing things
43. 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()) );
44. store.dispatch({ type: 'INCREMENT' }) // 1 store.dispatch({ type: 'INCREMENT' }) // 2 store.dispatch({ type: 'DECREMENT' }) // 1
45. 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. –Eric Elliott “Redux is mandatory learning, even if you never use Redux for a production project.”
49. React not required
50. Usage with React Presentational and Container Components
51. Example
52. Counter CountIt CountIt const { count } = this.props dispatch({ type: 'INCREMENT' }) dispatch({ type: 'DECREMENT' }) appReducer Store
53. Middleware
54. Criticism - Too much boilerplate - Unnecessary complexity
55. Functional Reactive Programming
56. The introduction to Reactive Programming You’ve been missing https://gist.github.com/staltz/868e7e9bc2a7b8c1f754 ...Or just Google It
57. Introduction to Reactive Programming https://egghead.io/courses/introduction-to-reactive-programming
58. Actions = Event streams
59. Dumb Components
60. No need for separate actions and stores
61. RxJS
62. React Example http://reactivex.io/rxjs/manual/tutorial.html#react
63. MobX
64. Becoming Reactive
65. @observable, @computed Decorators
66. Observable state
67. Autorun
68. MobX + React
69. 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();
70. @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);
71. Actions Modify the State
72. class ObservableTodoStore { @observable todos = []; constructor() { mobx.autorun(() => console.log(this.report)); } @action.bound addTodo(task) { this.todos.push({ task: task, completed: false, assignee: null }); } } const observableTodoStore = new ObservableTodoStore();
73. More on Actions - Actions should always be used on functions that modify state. - Using actions yields performance benefits - action provides useful debugging information with devtools. - Strict mode enforces all state modifications are done by an action.
74. Example
75. Counter CountIt CountIt observer this.countUp this.countDown count: observable, countUp: action, countDown: action Store
76. MobX is not a state container
77. Summary
78. Use the @observable decorator
79. Use the @observer decorator
80. Use @action to update state
81. MobX is simpler
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. Context https://reactjs.org/docs/context.html
85. Disclaimer - It is an experimental API likely to break in future releases of React. - The vast majority of applications do not need to use context. - It is far more likely that Redux or Mobx is the right solution. - If you aren’t an experienced React developer, don’t use context.
86. Mainly used by library Authors
87. New Version of Context
88. Example
89. Counter Provider this.state = { count: 0 }; Context.Provider Context.Consumer Context
90. how React's New Context API Works https://www.youtube.com/watch?v=XLJN4JfniH4
91. Other Alternatives - Vue - Cycle.js - Elm - No framework
92. Vue.js
93. var app = new Vue({ el: '#app', data: { list: [] }, methods: { addTodo: function () { var input = document.getElementById('update'); this.list = this.list.concat(input.value); } } });
94. State management is simple and intuitive
95. Veux https://vuex.vuejs.org/
96. Cycle.js
97. Learn it in 1h 37min https://egghead.io/courses/cycle-js-fundamentals
98. Elm
99. Features - Functional programming - pure functions, immutable data - Statically typed - Compiler - descriptively tell what went wrong and in some cases even suggest a solution
100. Learn Elm https://guide.elm-lang.org
102. Jonathan Kemp @jonkemp https://github.com/jonkemp
103. Jonathan Kemp CodePen - https://codepen.io/jonkemp/pens/public/ Slides - https://speakerdeck.com/jonkemp