Better async redux saga

Slides on Generator Functions and Redux Saga

Transcript

1. GENERATORS REDUX SAGA & Kushan Joshi
2. KUSHAN JOSHI Mapbox OpenStreetMap @kushan2020
3. GENERATORS What are Generator Functions ? Are functions that can hold state They can be paused / resumed 
 on demand.
4. GENERATORS Unlike functions, Generator functions do not run to completion "
5. GENERATORS Should I run?
6. GENERATORS EXAMPLE
7. GENERATORS EXAMPLE
8. GENERATORS EXAMPLE
9. GENERATORS EXAMPLE is called an iterator
10. ITERABLE
11. ITERABLE
12. ITERABLE
13. GENERATORS Built in iterables Array, String, Map, Set, TypedArray
14. GENERATORS EXAMPLE
15. GENERATORS EXAMPLE
16. GENERATORS EXAMPLE
17. GENERATORS EXAMPLE
18. GENERATORS EXAMPLE
19. GENERATORS EXAMPLE
20. GENERATORS EXAMPLE
21. GENERATORS What are generators, again ? Give you a nice way to generate an Iterator
22. GENERATORS Great! Let us look at Redux
23. REDUX PROBLEM Store ✈ Action
24. REDUX PROBLEM Store ✈ ✈ ✈ ✈ ✈ Actions
25. REDUX PROBLEM Store Async Actions? Async-Action
26. REDUX PROBLEM Store There are a lot of tools to solve this problem. Async-Action
27. REDUX PROBLEM Store There are a lot of tools to solve this problem. Async-Action
28. REDUX PROBLEM Store There are a lot of tools to solve this problem. Async-Action
29. REDUX PROBLEM Store There are a lot of tools to solve this problem. Async-Action
30. REDUX PROBLEM Store There are a lot of tools to solve this problem. Async-Action
31. REDUX PROBLEM Store There are a lot of tools to solve this problem. Async-Action
32. REDUX PROBLEM Store There are a lot of tools to solve this problem. Async-Action
33. REDUX PROBLEM Store There are a lot of tools to solve this problem. Async-Action
34. REDUX PROBLEM Store There are a lot of tools to solve this problem. Async-Action
35. REDUX PROBLEM Store There are a lot of tools to solve this problem. Async-Action
36. REDUX PROBLEM Store There are a lot of tools to solve this problem. Async-Action
37. REDUX PROBLEM Store There are a lot of tools to solve this problem. Async-Action
38. REDUX PROBLEM Store Async-Action Easy bro!
39. REDUX PROBLEM Store Async-Action One of them is Redux Saga
40. REDUX SAGA Is a library which helps manage async actions with generators. 5 Redux Saga
41. REDUX SAGA It runs the generator functions 
 for you. It gives you helper functions to interact with Redux
42. REDUX SAGA ✈
43. REDUX SAGA ✈
44. REDUX SAGA
45. REDUX SAGA
46. GENERATORS How does it compare with 
 Redux Thunks Nice!
47. REDUX THUNKS LOGIN WITH THUNKS
48. REDUX THUNKS LOGIN WITH THUNKS
49. REDUX THUNKS LOGIN WITH THUNKS
50. REDUX THUNKS LOGIN WITH THUNKS
51. SAGA LOGIN WITH SAGA
52. SAGA LOGIN WITH SAGA
53. SAGA LOGIN WITH SAGA
54. SAGA LOGIN WITH SAGA
55. SAGA LOGIN WITH SAGA
56. SAGA LOGIN WITH SAGA
57. THUNKS FEATURE PARITY WITH THUNKS
58. GENERATORS Isn’t this just too complex for a login
59. THUNKS
60. THUNKS FEATURE PARITY WITH THUNKS
61. NETWORK RACE
62. NETWORK RACE
63. NETWORK RACE
64. NETWORK RACE
65. SAGA LOGIN WITH SAGA
66. SAGA LOGIN WITH SAGA
67. SAGA LOGIN WITH SAGA ✈ Logout!
68. SAGA LOGIN WITH SAGA Me?
69. SAGA LOGIN WITH SAGA
70. SAGA LOGIN WITH SAGA
71. SAGA LOGIN WITH SAGA
72. SAGA LOGIN WITH SAGA
73. SAGA LOGIN WITH SAGA
74. GENERATORS Can’t you just use Async / Await and be happy?
75. SAGA ASYNC AWAIT IMPLEMENTATION OF REDUX SAGA
76. SAGA ASYNC AWAIT IMPLEMENTATION OF REDUX SAGA
77. GENERATORS So, are generators useless?
78. GENERATORS The whole point of generators is that you can manipulate them while they are suspended.
79. GENERATORS Think of it as a conversation between the code that runs the generator and the generator itself. Generator Redux Saga
 (runner)
80. GENERATORS Generator Redux Saga
 (runner)
81. GENERATORS Generator Redux Saga
 (runner)
82. GENERATORS Generator Redux Saga
 (runner)
83. GENERATORS Generator Redux Saga
 (runner)
84. GENERATORS Generator Redux Saga
 (runner)
85. GENERATORS Generator Redux Saga
 (runner)
86. GENERATORS Async or any other magical being Redux Saga
 (runner)
87. GENERATORS ? Async or any other magical being Redux Saga
 (runner)
88. GENERATORS Which is why it is so easy to test a redux saga, at every yield @
89. REDUX SAGA TESTING
90. REDUX SAGA TESTING
91. REDUX SAGA TESTING
92. REDUX SAGA TAKE AWAYS Generator functions are fun Redux Saga is an amazing solution to the async action problem
93. REDUX SAGA THANK YOU
94. REDUX SAGA TAKEAWAY
95. REDUX SAGA TAKEAWAY
96. REDUX SAGA TAKEAWAY
97. REDUX SAGA TAKEAWAY