Do you hate lifecycle? componentWillReceiveProps make you bored? Let's make React pure again! I will show, how lifecycle brings complexity (and errors) to your code. And how we can avoid it. Or make it more safety.

1. Let's kill
lifecycle
Александр Шушунов
version 1.3

2. 2
Александр
Шушунов
или просто
Саша

3. 3
из Твери

4. 4

5. 5
Как дошёл до жизни такой
Получаю деньги за код ≈ 14 лет

6. 6
Как дошёл до жизни такой

7. 7

8. 8
Основная идея
f( )=

9. 9

10. 10

11. 11

12. 12

13. 13

14. 14
Lifecycle мешает команде React
reactjs.org/blog/2018/03/27/update-on-async-rendering.html
Observable

15. 15
Что делать?

16. 16
Что делать?
Не использовать
Lifecycle!
(хотя бы в клиентском коде)

17. 17
Прежде чем продолжить...

18. 18

19. 19
redux-form
<Field name="boo" …>

20. 20
redux-form
<Field name="boo" …>
Actions
Selectors

21. 21

22. 22

23. 23

24. 24

25. 25
Пример.
Дальше все будет про DX
Значит пришло время IDE…

26. 26
Проблема lifеcycle
Код превращается в кашу
Не декларативно!

27. 27
А что нам нужно
• Как-то отреагировать на
изменения состояния
приложения
• Сделать сайд эффект

28. 28
Complexity: Divide and Conquer!
How to decouple state and UI (a.k.a.
you don’t need componentWillMount)

29. 29
Middleware

30. 30
Middleware
«Выносите
сайд эффекты
в middleware»
© Древняя китайская мудрость

31. 31
Как работает Redux-Saga
Action Reducer Store

32. 32
Как работает Redux-Saga
Action Reducer Store
Middleware

33. 33

34. 34

35. 35
Как работает Redux-Saga

36. 36
Как работает Redux-Saga
Watcher
Worker

37. 37
Как работает Redux-Saga
Последовательность
действий
Асинхронность
+

38. 38
Как работает Redux-Saga
Последовательность
действий
Асинхронность
+ = Generators

39. 39
Пример.
Опять пришло время IDE…

40. 40
Все хорошо, но
• Надо работать только через
redux-store
• Generators
• Декларативно
• А что еще нужно )

41. 41

42. 42
Как работает redux-observable

43. 43
Как работает redux-observable
Epic
actions
state
new actions

44. 44
Пример.
И снова IDE…

45. 45
Все хорошо, но
• Надо работать только через
redux-store
• Rx
• Еще декларативнее
• Нет специального DSL

46. 46

47. 47
А что если нельзя Middleware

48. 48
Давайте напишем свое
+ =
react-redux-rxjs
github.com/redneckz/react-redux-rxjs

49. 49
Давайте напишем свое
connect
props
state
new props
actions

50. 50
Пример.
Это последний раз, обещаю

51. 51
Все хорошо, но
• Две звезды на github L
• Rx
• Так же декларативно
• Не надо дополнительных
манипуляций с redux-store

52. 52

53. 53
Реальность
HOC
(lifecycle)
new propsprops
actions

54. 54
Реальность
HOC
(lifecycle)
new propsprops
actions

55. 55
Выводы

56. 56
Выводы
f( )=

57. 57
Вопросы?
github.com/AlexanderShushunov/lets-kill-lifecycle
@ashushunov
Alexander_Shushunov@epam.com