Advanced State Management Patterns with React

Slides for ReactJs Day 2019 Workshop

Transcript

1. Advanced State Management Patterns with React
2. Francesco Strazzullo (AKA Strazz) @TheStrazz86 (Follow me on Twitter!) Ego Slide
3. WE DEVELOP DIGITAL PROJECT TOGETHER WITH YOU.
4. http://frameworklessmovement.org/
5. https://www.apress.com/it/book/9781484249666 Use “TheStrazz” discount code
6. Source Code for the Workshop https://github.com/ideatosrl/reactjs-advanced-state-management-workshop
7. Why are you here?
8. What is “State Management”?
9. “State management refers to the management of the state of one or more user interface controls such as text fields, OK buttons, radio buttons, etc. in a graphical user interface.” Wikipedia
10. React State API
16. What’s Wrong with that?
17. What is the best State Management Pattern?
19. Bring out tradeoffs
20. Framework Compass Chart
21. Model View Controller
22. “Trygve Reenskaug introduced MVC into Smalltalk-79 while visiting the Xerox Palo Alto Research Center (PARC) in the 1970s.” Wikipedia
25. Reactive Programming (or I learned the real meaning of reactive programming…)
26. Reactive Manifesto
27. Responsive, Resilient, Elastic, Message Driven
29. “In computing, reactive programming is a programming paradigm oriented around data flows and the propagation of change.” Wikipedia
31. RxJS
33. Let’s try with an example
34. const a = b + c;
35. =B1+C1
39. Is React Reactive?
41. MobX
42. “MobX is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming” MobX Getting Started
43. MobX helps you observe your Model
47. Event Bus
51. Redux
52. “A Predictable State Container for JS Apps” redux.js.org
53. Redux Cheatsheet Event = Action Model = Reducers Event Bus = Store
55. Thanks! Francesco Strazzullo francesco.strazzullo@flowing.it