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?
   

   View Slide

2. Giorgio Polvara
   

   View Slide

3. Giorgio Polvara
   

   View Slide

4. View Slide

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.”
   

   View Slide

6. The V in MVC
   

   View Slide

7. View Slide

8. ¯\_(ϑ)_/¯
   

   View Slide

9. Flux
   

   View Slide

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.”
    

    View Slide

11. +
    

    View Slide

12. View Slide

13. Alt
    

    View Slide

14. Alt Reflux
    

    View Slide

15. Alt Reflux
    Fluxible
    

    View Slide

16. Alt Reflux
    Flummox Fluxible
    

    View Slide

17. Alt Reflux
    Flummox Fluxible
    Fluxxor
    

    View Slide

18. Alt Reflux
    Flummox Fluxible
    Fluxxor
    Fluxify
    

    View Slide

19. Alt Reflux
    Flummox Fluxible
    Fluxxor
    Fynx
    Fluxify
    

    View Slide

20. Alt Reflux
    Flummox Fluxible
    Fluxxor
    marty.js
    Fynx
    Fluxify
    

    View Slide

21. Alt Reflux
    Flummox Fluxible
    Fluxxor
    marty.js
    Fynx
    Delorean
    Fluxify
    

    View Slide

22. Alt Reflux
    Flummox Fluxible
    Fluxxor
    marty.js
    Fynx
    McFly
    Delorean
    Fluxify
    

    View Slide

23. View Slide

24. View Slide

25. Dan Abramov
    

    View Slide

26. View Slide

27. View Slide

28. View Slide

29. View Slide

30. View Slide

31. MVC
    

    View Slide

32. MVC
    

    View Slide

33. View Slide

34. View Slide

35. View Slide

36. View Slide

37. View Slide

38. View Slide

39. author
    

    View Slide

40. author
    name
    

    View Slide

41. author
    name
    handler
    

    View Slide

42. author
    name
    handler
    photo
    

    View Slide

43. author
    name
    handler
    isFollowing
    photo
    

    View Slide

44. author
    name
    handler
    text
    photo
    isFollowing
    

    View Slide

45. author
    name
    handler
    text
    retweets
    photo
    isFollowing
    

    View Slide

46. author
    name
    handler
    text
    retweets
    likes
    photo
    isFollowing
    

    View Slide

47. author
    name
    handler
    text
    retweets
    likes
    photo
    likePhotos
    isFollowing
    

    View Slide

48. author
    name
    handler
    text
    retweets
    likes
    timestamp
    photo
    likePhotos
    isFollowing
    

    View Slide

49. author
    name
    handler
    text
    retweets
    likes
    timestamp
    photo
    likePhotos
    isFollowing
    

    View Slide

50. author
    name
    handler
    text
    retweets
    likes
    timestamp
    {
    }
    photo
    likePhotos
    isFollowing
    

    View Slide

51. View Slide

52. View Slide

53. View Slide

54. View Slide

55. View Slide

56. View Slide

57. { … }
    

    View Slide

58. State
    

    View Slide

59. Store
    

    View Slide

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

    View Slide

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

    View Slide

62. View Slide

63. View Slide

64. View Slide

65. Store
    

    View Slide

66. State
    Store
    

    View Slide

67. State
    Store
    

    View Slide

68. State
    Store
    

    View Slide

69. State
    Store
    

    View Slide

70. State
    Store
    

    View Slide

71. const Root = () => (
    
    )
    AppRegistry
    .registerComponent("App", () => Root)
    

    View Slide

72. import { Provider } from 'react-redux/native'
    const Root = () => (
    
    )
    AppRegistry
    .registerComponent("App", () => Root)
    

    View Slide

73. import { Provider } from 'react-redux/native'
    const Root = () => (
    
    
    
    )
    AppRegistry
    .registerComponent("App", () => Root)
    

    View Slide

74. class App extends Component {}
    export default App
    

    View Slide

75. import { connect } from 'react-redux'

    class App extends Component {}
    export default App
    

    View Slide

76. import { connect } from 'react-redux'

    class App extends Component {}
    export default connect()(App)
    

    View Slide

77. State
    Store
    

    View Slide

78. State
    Store
    

    View Slide

79. View Slide

80. View Slide

81. State
    Store
    

    View Slide

82. State
    Store
    Action
    
    

    View Slide

83. View Slide

84. {
    }
    

    View Slide

85. {
    type: '...'
    }
    

    View Slide

86. {
    type: 'LOGOUT'
    }
    

    View Slide

87. {
    type: '...',
    payload: ...
    }
    

    View Slide

88. {
    type: 'LIKE_TWEET',
    payload: tweetId
    }
    

    View Slide

89. {
    type: 'CREATE_TWEET',
    payload: text
    }
    

    View Slide

90. {
    type: 'ADD_POST',
    payload: {
    text: ...,
    author: ...
    tags: [...]
    }
    }
    

    View Slide

91. {
    type: 'LIKE_TWEET',
    payload: tweetId
    }
    

    View Slide

92. function likeTweet (tweetId) {
    {
    type: 'LIKE_TWEET',
    payload: tweetId
    }
    }
    

    View Slide

93. function likeTweet (tweetId) {
    return {
    type: 'LIKE_TWEET',
    payload: tweetId
    }
    }
    

    View Slide

94. function likeTweet (tweetId) {
    return {
    type: 'LIKE_TWEET',
    payload: tweetId
    }
    }
    const action = likeTweet(1)
    

    View Slide

95. State
    Store
    Action
    
    

    View Slide

96. store.getState()
    store.subscribe(...)
    

    View Slide

97. store.getState()
    store.subscribe(...)
    store.dispatch(action)
    

    View Slide

98. State
    Store
    Action
    
    

    View Slide

99. Reducers
    

    View Slide

100. function(state, action) => nextState
     

     View Slide

101. function(state, action) => nextState
     

     View Slide

102. function(state, action) => nextState
     

     View Slide

103. function(state, action) => nextState
     

     View Slide

104. View Slide

105. View Slide

106. { count: 85 }
     

     View Slide

107. { count: 85 }
     { type: 'INCREMENT' }
     { type: 'DECREMENT' }
     

     View Slide

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
     }
     }
     

     View Slide

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
     }
     }
     

     View Slide

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
     }
     }
     

     View Slide

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
     }
     }
     

     View Slide

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
     }
     }
     

     View Slide

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

     View Slide

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

     View Slide

115. State
     Store
     Action
     
     

     View Slide

116. State
     Store
     Action
     
     

     View Slide

117. State
     Store
     Action
     
     

     View Slide

118. State
     Store
     Action
     
     

     View Slide

119. State
     Store
     Action
     
     

     View Slide

120. State
     Store
     Action
     
     

     View Slide

121. State
     Store
     Action
     
     

     View Slide

122. State
     State
     Store
     Action
     
     

     View Slide

123. State
     State
     Store
     Action
     
     

     View Slide

124. State
     State
     Store
     Action
     
     

     View Slide

125. State
     State
     Store
     Action
     
     
     

     View Slide

126. State
     State
     Store
     Action
     
     
     Unidirectional
     Data Cycle
     

     View Slide

127. Demo Time!
     

     View Slide

128. State
     Store
     Action
     
     

     View Slide

129. Where to go from here?
     

     View Slide

130. Where to go from here?
     Create small Redux apps
     

     View Slide

131. Where to go from here?
     Create small Redux apps
     Check combineReducers
     

     View Slide

132. Where to go from here?
     Create small Redux apps
     Async actions with thunks
     Check combineReducers
     

     View Slide

133. Where to go from here?
     Create small Redux apps
     Check combineReducers
     Async actions with thunks
     …
     

     View Slide

134. Thank You
     Giorgio Polvara
     @gpx
     

     View Slide