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.
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
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
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! ...
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