State Models for React with Redux
19 likes3,895 views
Stephan Schmidt discusses state management in React applications, exploring concepts like components, props, and state within a unidirectional data flow framework. He emphasizes the challenges of mutable state, advocating for stateless components and the use of Redux for better state management. Additionally, he touches on the complexities of syncing and the importance of clean structure in web apps with server integration.
![• Framework[1] by Facebook
• The V in MVC (Rendering HTML)
• Promises to unifyiOS, Android and Web
• Wrote backend app for eventsofa
• Steep learning curve,mostly due to state
• Concepts
– Components
– Props
– State
– JSX
React
[1] Framework and Library http://martinfowler.com/bliki/InversionOfControl.html](https://image.slidesharecdn.com/statemodesforreact-160208084252/85/State-Models-for-React-with-Redux-3-320.jpg)
State Models for React with Redux
- 1. State Models for React Stephan Schmidt übercto
- 3. • Framework[1] by Facebook • The V in MVC (Rendering HTML) • Promises to unifyiOS, Android and Web • Wrote backend app for eventsofa • Steep learning curve,mostly due to state • Concepts – Components – Props – State – JSX React [1] Framework and Library http://martinfowler.com/bliki/InversionOfControl.html
- 4. States - Web App with Server HTML (value) Backend (DB) submit/ POST render
- 6. Syncing & State Flow HTML (value) Component (this.state) App (store) Backend (DB) Local Storage (browser/app)
- 7. React Unidirectional Data Flow Component (this.props) Component (this.props) React/ render (props) React/ render (props) HTML (value) Component (this.props)
- 8. Example App
- 9. React Libraries in Browser Without Build Tools
- 11. React Components
- 12. React App
- 13. Example App With State
- 14. Unidirectional Flow With State Component (this.state) Component (this.props) Component (this.props) React/ render (props) React/ render (props) React/ render (props) HTML (value) Component (this.props)
- 15. React Components With State
- 16. Example App With Mutable State
- 17. React App With Mutable State HTML (value) Component (this.state) Component (this.state) React/ render onChange/ setState Component (this.state) React/ render setState setState https://facebook.github.io/react/docs/two-way-binding-helpers.html
- 18. Mixing State and Props makes things confusing
- 19. • Use only props in components • ‘Root’ component has state • Why? – State makes components difficult to test – State makes components difficult to reason about – State makes it too easy to put business logic in the component – State makes it difficult to share information to other parts of the app Stateless Components https://camjackson.net/post/9-things-every-reactjs-beginner-should-know
- 20. React App With Mutable State in Root Component HTML (value) Component (this.props) Component (this.state) React/ render React/ render onChange/ setState Component (this.props) React/ render
- 22. Update Function Pushed Down
- 25. • Clean unidirectional flow • Changes in one place • State transitions: – stateNew = stateOld + changes • State can easily be debugged Redux
- 26. • Action Types, Actions and Action Creators • Reducers • App • Mappers • Store Redux Concepts
- 27. Redux Example
- 29. React App with Redux HTML (value) Component (this.props) App (store) React/ render onChange Redux stateToProps Mapping dispatch Action + Reducer Component (this.props) React/ render
- 31. Redux App
- 32. React Components Without State, only Props
- 33. React Components Wired To Store
- 34. Wiring Redux Store to React Props
- 36. React/Redux With AJAX Backend e.g. Thunk middleware HTML (value) Component (this.state) App (store) Backend (DB) React/ render onChange/ setState Redux Action/ Reducer componentDidMount/ HTTP GET onSubmit/ HTTP POST Action/ Reducer Action/ Reducer Component (this.props) React/ render
- 37. With AJAX
- 38. Flickr Brandon Atkinson CC BY 2.0
- 39. • Unidirectional flow -> Jipee! • Mutable state? -> this.state • Confusing props and state? -> Redux • Complex state -> Immutable.js / Immutabilityhelpers • Side effects in pure functions?-> Middleware/Thunk • Boilerplate?-> Magic • Magic Boilerplate?-> More Magic • Many dependencies?-> Toolchain (Babel, Webpack, ...) How did we get here? Also see Haskell: Pure functions? Jipee! Side Effects? Monads! Complex side effects? Monad Transformers! ...
- 40. Some more thoughts …
- 41. When to sync?
- 43. How to sync?
- 44. Sync = replication & persistence
- 45. Sync is visibility to others
- 46. Complexity? HTML (value) Backend (DB) submit/ POST Web App with Server render e.g. Thunk middleware HTML (value) Component (this.state) App (store) Backend (DB) React/ render onChange/ setState Redux React/Redux with AJAX Backend and ‚save‘ on submit forms Action/ Reducer componentDidMount/ HTTP GET onSubmit/ HTTP POST Action/ Reducer Action/ Reducer Component (this.props) React/ render