Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
State Models for React
Stephan Schmidt
übercto
@codemonkeyism
Stephan Schmidt
Started
Programming
Computer
Science
University
Demo
Scene
Interactiva
PIN
Computer
Science...
• Framework[1] by Facebook
• The V in MVC (Rendering HTML)
• Promises to unifyiOS, Android and Web
• Wrote backend app for...
States - Web App with Server
HTML
(value)
Backend
(DB)
submit/
POST
render
State Buckets
HTML
(value)
Component
(this.state)
App
(store)
Backend
(DB)
Local Storage
(browser/app)
Syncing & State Flow
HTML
(value)
Component
(this.state)
App
(store)
Backend
(DB)
Local Storage
(browser/app)
React Unidirectional Data Flow
Component
(this.props)
Component
(this.props)
React/ render
(props)
React/ render
(props)
H...
Example App
React Libraries in Browser Without Build Tools
Component Tree
CommentBox
CommentList
Comment
Comment
CommentTitle
CommentTitle
React Components
React App
Example App With State
Unidirectional Flow With State
Component
(this.state)
Component
(this.props)
Component
(this.props)
React/ render
(props)
...
React Components With State
Example App With Mutable State
React App With Mutable State
HTML
(value)
Component
(this.state)
Component
(this.state)
React/
render
onChange/
setState
C...
Mixing State and Props
makes things confusing
• Use only props in components
• ‘Root’ component has state
• Why?
– State makes components difficult to test
– State make...
React App With Mutable State in Root Component
HTML
(value)
Component
(this.props)
Component
(this.state)
React/
render
Re...
ReactRootComponentHasState
Update Function Pushed Down
Component With onChange
React Developer Tools
• Clean unidirectional flow
• Changes in one place
• State transitions:
– stateNew = stateOld + changes
• State can easily...
• Action Types, Actions and Action Creators
• Reducers
• App
• Mappers
• Store
Redux Concepts
Redux Example
Example App
Redux	Developer	Tools
React App with Redux
HTML
(value)
Component
(this.props)
App
(store)
React/
render
onChange
Redux
stateToProps
Mapping
dis...
Actions and Reducers
Redux App
React Components Without State, only Props
React Components Wired To Store
Wiring Redux Store to React Props
React Immutability Helpers
React/Redux With AJAX Backend
e.g. Thunk
middleware
HTML
(value)
Component
(this.state)
App
(store)
Backend
(DB)
React/
re...
With AJAX
Flickr Brandon Atkinson CC BY 2.0
• Unidirectional flow -> Jipee!
• Mutable state? -> this.state
• Confusing props and state? -> Redux
• Complex state -> Im...
Some more thoughts …
When to sync?
Granularity to sync?
How to sync?
Sync = replication & persistence
Sync is visibility to others
Complexity?
HTML
(value)
Backend
(DB)
submit/
POST
Web App with Server
render
e.g. Thunk
middleware
HTML
(value)
Component...
Stephan Schmidt
@codemonkeyism
stephan@ubercto.de
Nächste SlideShare
Wird geladen in …5
×

State Models for React with Redux

3.681 Aufrufe

Veröffentlicht am

React is a fantastic Javascript rendering framework with a steep learning curve. One of the reasons is understanding state. We explore unidirectional flow, props, state Immutability and Redux.

Veröffentlicht in: Technologie
  • Loggen Sie sich ein, um Kommentare anzuzeigen.

State Models for React with Redux

  1. 1. State Models for React Stephan Schmidt übercto
  2. 2. @codemonkeyism Stephan Schmidt Started Programming Computer Science University Demo Scene Interactiva PIN Computer Science & Philosophy University Retraining Teacher Startup Fraunhofer Immobilien- Scout24 brands4friends eBay eventsofa
  3. 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. 4. States - Web App with Server HTML (value) Backend (DB) submit/ POST render
  5. 5. State Buckets HTML (value) Component (this.state) App (store) Backend (DB) Local Storage (browser/app)
  6. 6. Syncing & State Flow HTML (value) Component (this.state) App (store) Backend (DB) Local Storage (browser/app)
  7. 7. React Unidirectional Data Flow Component (this.props) Component (this.props) React/ render (props) React/ render (props) HTML (value) Component (this.props)
  8. 8. Example App
  9. 9. React Libraries in Browser Without Build Tools
  10. 10. Component Tree CommentBox CommentList Comment Comment CommentTitle CommentTitle
  11. 11. React Components
  12. 12. React App
  13. 13. Example App With State
  14. 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. 15. React Components With State
  16. 16. Example App With Mutable State
  17. 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. 18. Mixing State and Props makes things confusing
  19. 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. 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
  21. 21. ReactRootComponentHasState
  22. 22. Update Function Pushed Down
  23. 23. Component With onChange
  24. 24. React Developer Tools
  25. 25. • Clean unidirectional flow • Changes in one place • State transitions: – stateNew = stateOld + changes • State can easily be debugged Redux
  26. 26. • Action Types, Actions and Action Creators • Reducers • App • Mappers • Store Redux Concepts
  27. 27. Redux Example
  28. 28. Example App Redux Developer Tools
  29. 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
  30. 30. Actions and Reducers
  31. 31. Redux App
  32. 32. React Components Without State, only Props
  33. 33. React Components Wired To Store
  34. 34. Wiring Redux Store to React Props
  35. 35. React Immutability Helpers
  36. 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. 37. With AJAX
  38. 38. Flickr Brandon Atkinson CC BY 2.0
  39. 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. 40. Some more thoughts …
  41. 41. When to sync?
  42. 42. Granularity to sync?
  43. 43. How to sync?
  44. 44. Sync = replication & persistence
  45. 45. Sync is visibility to others
  46. 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
  47. 47. Stephan Schmidt @codemonkeyism stephan@ubercto.de

×