State Models for React with Redux
-
Upload
stephan-schmidt -
Category
Technology
-
view
1.628 -
download
0
Transcript of State Models for React with Redux
![Page 1: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/1.jpg)
State Models for React
Stephan Schmidtübercto
![Page 2: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/2.jpg)
@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
![Page 3: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/3.jpg)
• Framework[1] by Facebook• The V in MVC (Rendering HTML)• Promises to unify iOS, Android and Web• Wrote backend app for eventsofa• Steep learning curve, mostly due to state• Concepts
– Components– Props– State– JSX
React
[1]Frameworkand Libraryhttp://martinfowler.com/bliki/InversionOfControl.html
![Page 4: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/4.jpg)
States - Web App with Server
HTML
(value)
Backend
(DB)
submit/
POST
render
![Page 5: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/5.jpg)
State Buckets
HTML
(value)Component
(this.state)App
(store)Backend
(DB)Local Storage
(browser/app)
![Page 6: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/6.jpg)
Syncing & State Flow
HTML
(value)Component
(this.state)App
(store)Backend
(DB)Local Storage
(browser/app)
![Page 7: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/7.jpg)
React Unidirectional Data Flow
Component
(this.props)Component
(this.props)
React/ render (props)
React/ render (props)
HTML
(value)Component
(this.props)
![Page 8: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/8.jpg)
Example App
![Page 9: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/9.jpg)
React Libraries in Browser Without Build Tools
![Page 10: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/10.jpg)
Component Tree
CommentBox
CommentList
Comment
Comment
CommentTitle
CommentTitle
![Page 11: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/11.jpg)
React Components
![Page 12: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/12.jpg)
React App
![Page 13: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/13.jpg)
Example App With State
![Page 14: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/14.jpg)
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)
![Page 15: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/15.jpg)
React Components With State
![Page 16: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/16.jpg)
Example App With Mutable State
![Page 17: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/17.jpg)
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
![Page 18: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/18.jpg)
Mixing State and Props makes things confusing
![Page 19: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/19.jpg)
• 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
![Page 20: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/20.jpg)
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
![Page 21: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/21.jpg)
Reac
t Roo
t Com
pone
nt H
as S
tate
![Page 22: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/22.jpg)
Update Function Pushed Down
![Page 23: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/23.jpg)
Component With onChange
![Page 24: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/24.jpg)
React Developer Tools
![Page 25: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/25.jpg)
• Clean unidirectional flow• Changes in one place• State transitions:
– stateNew = stateOld + changes• State can easily be debugged
Redux
![Page 26: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/26.jpg)
• Action Types, Actions and Action Creators• Reducers• App• Mappers• Store
Redux Concepts
![Page 27: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/27.jpg)
Redux Example
![Page 28: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/28.jpg)
Example App
ReduxDeveloperTools
![Page 29: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/29.jpg)
React App with Redux
HTML
(value)
Component
(this.props)
App
(store)
React/render
onChange
ReduxstateToProps
Mapping
dispatch Action+ Reducer
Component
(this.props)
React/render
![Page 30: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/30.jpg)
Actions and Reducers
![Page 31: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/31.jpg)
Redux App
![Page 32: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/32.jpg)
React Components Without State, only Props
![Page 33: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/33.jpg)
React Components Wired To Store
![Page 34: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/34.jpg)
Wiring Redux Store to React Props
![Page 35: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/35.jpg)
React Immutability Helpers
![Page 36: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/36.jpg)
React/Redux With AJAX Backend
e.g. Thunkmiddleware
HTML
(value)
Component
(this.state)
App
(store)
Backend
(DB)
React/render
onChange/setState
ReduxAction/Reducer
componentDidMount/HTTP GET
onSubmit/HTTP POST
Action/Reducer
Action/Reducer
Component
(this.props)
React/render
![Page 37: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/37.jpg)
With AJAX
![Page 38: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/38.jpg)
Flickr Brandon Atkinson CC BY 2.0
![Page 39: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/39.jpg)
• Unidirectional flow -> Jipee!• Mutable state? -> this.state• Confusing props and state? -> Redux• Complex state -> Immutable.js / Immutability helpers• Side effects in pure functions? -> Middleware/Thunk• Boilerplate? -> Magic• Magic Boilerplate? -> More Magic• Many dependencies? -> Toolchain (Babel, Webpack, ...)
How did we get here?
AlsoseeHaskell:Purefunctions? Jipee!SideEffects?Monads!Complexsideeffects?MonadTransformers!...
![Page 40: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/40.jpg)
Some more thoughts …
![Page 41: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/41.jpg)
When to sync?
![Page 42: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/42.jpg)
Granularity to sync?
![Page 43: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/43.jpg)
How to sync?
![Page 44: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/44.jpg)
Sync = replication & persistence
![Page 45: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/45.jpg)
Sync is visibility to others
![Page 46: State Models for React with Redux](https://reader030.fdocuments.in/reader030/viewer/2022021502/588a0dba1a28ab132f8b51f7/html5/thumbnails/46.jpg)
Complexity?
HTML
(value)
Backend
(DB)
submit/
POST
Web App with Server
render
e.g. Thunkmiddleware
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