state models for react with redux
TRANSCRIPT
State Models for React
Stephan Schmidtübercto
@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
• 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
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)
HTML
(value)Component
(this.props)
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/ render (props)
React/ render (props)
HTML
(value)Component
(this.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
Component
(this.state)
React/render
setState
setState
https://facebook.github.io/react/docs/two-way-binding-helpers.html
Mixing State and Props makes things confusing
• 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
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
Reac
t Roo
t Com
pone
nt H
as S
tate
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 be debugged
Redux
• Action Types, Actions and Action Creators• Reducers• App• Mappers• Store
Redux Concepts
Redux Example
Example App
ReduxDeveloperTools
React App with Redux
HTML
(value)
Component
(this.props)
App
(store)
React/render
onChange
ReduxstateToProps
Mapping
dispatch Action+ Reducer
Component
(this.props)
React/render
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. 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
With AJAX
Flickr Brandon Atkinson CC BY 2.0
• 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!...
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. 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
