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.

1. State Models for React
Stephan Schmidt
übercto

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

5. State Buckets
HTML
(value)
Component
(this.state)
App
(store)
Backend
(DB)
Local Storage
(browser/app)

6. Syncing & State Flow
HTML
(value)
Component
(this.state)
App
(store)
Backend
(DB)
Local Storage
(browser/app)

7. React Unidirectional Data Flow
Component
(this.props)
Component
(this.props)
React/ render
(props)
React/ render
(props)
HTML
(value)
Component
(this.props)

8. Example App

9. React Libraries in Browser Without Build Tools

10. Component Tree
CommentBox
CommentList
Comment
Comment
CommentTitle
CommentTitle

11. React Components

12. React App

13. Example App With State

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. React Components With State

16. Example App With Mutable State

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. Mixing State and Props
makes things confusing

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

21. ReactRootComponentHasState

22. Update Function Pushed Down

23. Component With onChange

24. React Developer Tools

25. • Clean unidirectional flow
• 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. Redux Example

28. Example App
Redux Developer Tools

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. Actions and Reducers

31. Redux App

32. React Components Without State, only Props

33. React Components Wired To Store

34. Wiring Redux Store to React Props

35. React Immutability Helpers

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. With AJAX

38. Flickr Brandon Atkinson CC 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. Some more thoughts …

41. When to sync?

42. Granularity to sync?

43. How to sync?

44. Sync = replication & persistence

45. Sync is visibility to others

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. Stephan Schmidt
@codemonkeyism
stephan@ubercto.de