Download as PDF, PPTX
![• 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/75/State-Models-for-React-with-Redux-3-2048.jpg)
Uploaded byStephan Schmidt
State Models for React with Redux
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.
State Models for React with Redux
- 1. State Models forReact Stephan Schmidt übercto
- 2.
- 3. • Framework[1] byFacebook • 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 - WebApp with Server HTML (value) Backend (DB) submit/ POST render
- 5.
- 6. Syncing & StateFlow HTML (value) Component (this.state) App (store) Backend (DB) Local Storage (browser/app)
- 7. React Unidirectional DataFlow Component (this.props) Component (this.props) React/ render (props) React/ render (props) HTML (value) Component (this.props)
- 8.
- 9. React Libraries inBrowser Without Build Tools
- 10.
- 11.
- 12.
- 13. Example App WithState
- 14. Unidirectional Flow WithState Component (this.state) Component (this.props) Component (this.props) React/ render (props) React/ render (props) React/ render (props) HTML (value) Component (this.props)
- 15.
- 16. Example App WithMutable State
- 17. React App WithMutable 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 andProps makes things confusing
- 19. • Use onlyprops 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 WithMutable State in Root Component HTML (value) Component (this.props) Component (this.state) React/ render React/ render onChange/ setState Component (this.props) React/ render
- 21.
- 22.
- 23.
- 24.
- 25. • Clean unidirectionalflow • 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.
- 28.
- 29. React App withRedux HTML (value) Component (this.props) App (store) React/ render onChange Redux stateToProps Mapping dispatch Action + Reducer Component (this.props) React/ render
- 30.
- 31.
- 32. React Components WithoutState, only Props
- 33. React Components WiredTo Store
- 34. Wiring Redux Storeto React Props
- 35.
- 36. React/Redux With AJAXBackend 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.
- 38. Flickr Brandon AtkinsonCC 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.
- 41.
- 42.
- 43.
- 44. Sync = replication& persistence
- 45. Sync is visibilityto others
- 46. Complexity? HTML (value) Backend (DB) submit/ POST Web App withServer 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.