What's Redux Anyway?

React's community nowadays is all about Redux. But what is it and how can you use it in your React applications? How does it compare to Flux? What are reducers and unidirectional data flow, immutability, stores, thunks...

If none of this makes sense to you don't worry, this talk is for you.

I'm going to explain how Redux came to be, how it changes the way we build applications and how you can use it.

Transcript

1. What’s Redux Anyway?
2. Giorgio Polvara
3. Giorgio Polvara
5. “React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the V in MVC.”
6. The V in MVC
8. ¯\_(ϑ)_/¯
9. Flux
10. “Flux is the application architecture that Facebook uses for building client-side web applications. It complements React's composable view components by utilizing a unidirectional data flow. It's more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code.”
11. +
13. Alt
14. Alt Reflux
15. Alt Reflux Fluxible
16. Alt Reflux Flummox Fluxible
17. Alt Reflux Flummox Fluxible Fluxxor
18. Alt Reflux Flummox Fluxible Fluxxor Fluxify
19. Alt Reflux Flummox Fluxible Fluxxor Fynx Fluxify
20. Alt Reflux Flummox Fluxible Fluxxor marty.js Fynx Fluxify
21. Alt Reflux Flummox Fluxible Fluxxor marty.js Fynx Delorean Fluxify
22. Alt Reflux Flummox Fluxible Fluxxor marty.js Fynx McFly Delorean Fluxify
25. Dan Abramov
31. MVC
32. MVC
39. author
40. author name
41. author name handler
42. author name handler photo
43. author name handler isFollowing photo
44. author name handler text photo isFollowing
45. author name handler text retweets photo isFollowing
46. author name handler text retweets likes photo isFollowing
47. author name handler text retweets likes photo likePhotos isFollowing
48. author name handler text retweets likes timestamp photo likePhotos isFollowing
49. author name handler text retweets likes timestamp photo likePhotos isFollowing
50. author name handler text retweets likes timestamp { } photo likePhotos isFollowing
57. { … }
58. State
59. Store
60. import { createStore } from 'redux' const store = createStore(...)
61. store.getState() store.subscribe(function () { console.log(store.getState()) })
65. Store
66. State Store
67. State Store <App />
68. State Store <App />
69. State Store <App />
70. State Store <App />
71. const Root = () => ( <App /> ) AppRegistry .registerComponent("App", () => Root)
72. import { Provider } from 'react-redux/native' const Root = () => ( <App /> ) AppRegistry .registerComponent("App", () => Root)
73. import { Provider } from 'react-redux/native' const Root = () => ( <Provider store={store}> <App /> </Provider> ) AppRegistry .registerComponent("App", () => Root)
74. class App extends Component {} export default App
75. import { connect } from 'react-redux'
 class App extends Component {} export default App
76. import { connect } from 'react-redux'
 class App extends Component {} export default connect()(App)
77. State Store <App />
78. State Store <App />
81. State Store <App />
82. State Store Action <App />
84. { }
85. { type: '...' }
86. { type: 'LOGOUT' }
87. { type: '...', payload: ... }
88. { type: 'LIKE_TWEET', payload: tweetId }
89. { type: 'CREATE_TWEET', payload: text }
90. { type: 'ADD_POST', payload: { text: ..., author: ... tags: [...] } }
91. { type: 'LIKE_TWEET', payload: tweetId }
92. function likeTweet (tweetId) { { type: 'LIKE_TWEET', payload: tweetId } }
93. function likeTweet (tweetId) { return { type: 'LIKE_TWEET', payload: tweetId } }
94. function likeTweet (tweetId) { return { type: 'LIKE_TWEET', payload: tweetId } } const action = likeTweet(1)
95. State Store Action <App />
96. store.getState() store.subscribe(...)
97. store.getState() store.subscribe(...) store.dispatch(action)
98. State Store Action <App />
99. Reducers
100. function(state, action) => nextState
101. function(state, action) => nextState
102. function(state, action) => nextState
103. function(state, action) => nextState
106. { count: 85 }
107. { count: 85 } { type: 'INCREMENT' } { type: 'DECREMENT' }
108. const reducer = (state, action) => { switch(action.type) { case 'INCREMENT': return {total: state.total + 1 } case 'DECREMENT': return {total: state.total - 1 } default: return state } }
109. const reducer = (state, action) => { switch(action.type) { case 'INCREMENT': return {total: state.total + 1 } case 'DECREMENT': return {total: state.total - 1 } default: return state } }
110. const reducer = (state, action) => { switch(action.type) { case 'INCREMENT': return { count: state.count + 1 } case 'DECREMENT': return {total: state.total - 1 } default: return state } }
111. const reducer = (state, action) => { switch(action.type) { case 'INCREMENT': return { count: state.count + 1 } case 'DECREMENT': return { count: state.count - 1 } default: return state } }
112. const reducer = (state, action) => { switch(action.type) { case 'INCREMENT': return { count: state.count + 1 } case 'DECREMENT': return { count: state.count - 1 } default: return state } }
113. import { createStore } from 'redux' const store = createStore(...)
114. import { createStore } from 'redux' const store = createStore(reducer)
115. State Store Action <App />
116. State Store Action <App />
117. State Store Action <App />
118. State Store Action <App />
119. State Store Action <App />
120. State Store Action <App />
121. State Store Action <App />
122. State State Store Action <App />
123. State State Store Action <App />
124. State State Store Action <App />
125. State State Store Action <App /> <App />
126. State State Store Action <App /> <App /> Unidirectional Data Cycle
127. Demo Time!
128. State Store Action <App />
129. Where to go from here?
130. Where to go from here? Create small Redux apps
131. Where to go from here? Create small Redux apps Check combineReducers
132. Where to go from here? Create small Redux apps Async actions with thunks Check combineReducers
133. Where to go from here? Create small Redux apps Check combineReducers Async actions with thunks …
134. Thank You Giorgio Polvara @gpx