What's Redux Anyway?

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.

2334ff4bd8e0678248853d80c1604f27?s=128

Giorgio Polvara

September 29, 2016
Tweet

Transcript

  1. What’s Redux Anyway?

  2. Giorgio Polvara

  3. Giorgio Polvara

  4. None
  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

  7. None
  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. +

  12. None
  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

  23. None
  24. None
  25. Dan Abramov

  26. None
  27. None
  28. None
  29. None
  30. None
  31. MVC

  32. MVC

  33. None
  34. None
  35. None
  36. None
  37. None
  38. None
  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
  51. None
  52. None
  53. None
  54. None
  55. None
  56. None
  57. { … }

  58. State

  59. Store

  60. import { createStore } from 'redux' const store = createStore(...)

  61. store.getState() store.subscribe(function () { console.log(store.getState()) })

  62. None
  63. None
  64. None
  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 />

  79. None
  80. None
  81. State Store <App />

  82. State Store Action <App />

  83. None
  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

  104. None
  105. None
  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