Famchankou_statemanagement_for_lazy

Transcript

1. State Management for the Lazy Flux/Redux/Middlewares/MobX
2. 2 • 5 years of experience in Software Development • More than 2.5 years in EPAM • Work with in ECMAScript, NodeJS, React, Angular, etc. Aliaksandr Famchankou
3. 3 Agenda - Evolution of state management - Design patterns behind state management - Flux approach - Redux approach - Middlewares in Redux - Thunk/Saga - MobX brief introduction
4. 4 Bidirectional data flow
5. 5 Complexity - components tree
6. 6 Complexity - service-component
7. 7 Result
8. 8 Principles to keep in mind
9. 9 Command Query Responsibility Segregation
10. 10 Main principles - Single Responsibility of State Management - Immutability - Pure Function - Composability - Reactivity
11. 11 Observer
12. 12 State
14. 14 Unidirectional Data Flow
15. 15 Key concepts • Actions - Helper methods that facilitate passing data to the Dispatcher • Dispatcher - Receives actions and broadcasts payloads to registered callbacks • Stores - Containers for application state & logic that have callbacks registered to the dispatcher • Controller Views - React Components that grab the state from Stores and pass it down via props to child components
16. 16 Flux
17. 17 Flux implementations - Flummox - Reflux - Fluxible - Redux - NgRX - NgSX
18. 18 Clear component design Components are only responsible for the UI - Render UI - Dispatch Actions - React to State changes - Reads and Writes separated
19. 19 Redux Data Flow
20. 20 Differences
21. 21 Middlewares Thunk/Saga
22. 22 Where it is
23. 23 Some Code Examples
24. 24 Redux Thunk
25. 25 Side Effects
26. 26 Sagas
27. 27 Running in the background
28. 28 Redux Saga
29. 29 Saga Watchers
30. 30 Saga Workers
31. 31 Combining Effects - all
32. 32 Combining Effects - race
33. 33 MobX Brief Introduction
34. 34 Key points - Observable Values - Actions - Reactions - Computed Values
35. 35 MobX Data Flow
36. 36 MobX store example
37. 37 React component as Observer
38. 38 Rendered View
39. 39 Summary - Predictability - Maintainability - Declarative effects - Mechanism to handle async and nonparallel operations - Clear design patterns