Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Better async redux saga

Better async redux saga

Slides on Generator Functions and Redux Saga

8be7bdc2d8cde52fb8900c8d0c813faf?s=128

Kushan Joshi

June 28, 2017
Tweet

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