Tweet
Tweet

Slide 1

Slide 1 text

GENERATORS REDUX SAGA & Kushan Joshi

Slide 2

Slide 2 text

KUSHAN JOSHI Mapbox OpenStreetMap @kushan2020

Slide 3

Slide 3 text

GENERATORS What are Generator Functions ? Are functions that can hold state They can be paused / resumed 
 on demand.

Slide 4

Slide 4 text

GENERATORS Unlike functions, Generator functions do not run to completion "

Slide 5

Slide 5 text

GENERATORS Should I run?

Slide 6

Slide 6 text

GENERATORS EXAMPLE

Slide 7

Slide 7 text

GENERATORS EXAMPLE

Slide 8

Slide 8 text

GENERATORS EXAMPLE

Slide 9

Slide 9 text

GENERATORS EXAMPLE is called an iterator

Slide 10

Slide 10 text

ITERABLE

Slide 11

Slide 11 text

ITERABLE

Slide 12

Slide 12 text

ITERABLE

Slide 13

Slide 13 text

GENERATORS Built in iterables Array, String, Map, Set, TypedArray

Slide 14

Slide 14 text

GENERATORS EXAMPLE

Slide 15

Slide 15 text

GENERATORS EXAMPLE

Slide 16

Slide 16 text

GENERATORS EXAMPLE

Slide 17

Slide 17 text

GENERATORS EXAMPLE

Slide 18

Slide 18 text

GENERATORS EXAMPLE

Slide 19

Slide 19 text

GENERATORS EXAMPLE

Slide 20

Slide 20 text

GENERATORS EXAMPLE

Slide 21

Slide 21 text

GENERATORS What are generators, again ? Give you a nice way to generate an Iterator

Slide 22

Slide 22 text

GENERATORS Great! Let us look at Redux

Slide 23

Slide 23 text

REDUX PROBLEM Store ✈ Action

Slide 24

Slide 24 text

REDUX PROBLEM Store ✈ ✈ ✈ ✈ ✈ Actions

Slide 25

Slide 25 text

REDUX PROBLEM Store Async Actions? Async-Action

Slide 26

Slide 26 text

REDUX PROBLEM Store There are a lot of tools to solve this problem. Async-Action

Slide 27

Slide 27 text

REDUX PROBLEM Store There are a lot of tools to solve this problem. Async-Action

Slide 28

Slide 28 text

REDUX PROBLEM Store There are a lot of tools to solve this problem. Async-Action

Slide 29

Slide 29 text

REDUX PROBLEM Store There are a lot of tools to solve this problem. Async-Action

Slide 30

Slide 30 text

REDUX PROBLEM Store There are a lot of tools to solve this problem. Async-Action

Slide 31

Slide 31 text

REDUX PROBLEM Store There are a lot of tools to solve this problem. Async-Action

Slide 32

Slide 32 text

REDUX PROBLEM Store There are a lot of tools to solve this problem. Async-Action

Slide 33

Slide 33 text

REDUX PROBLEM Store There are a lot of tools to solve this problem. Async-Action

Slide 34

Slide 34 text

REDUX PROBLEM Store There are a lot of tools to solve this problem. Async-Action

Slide 35

Slide 35 text

REDUX PROBLEM Store There are a lot of tools to solve this problem. Async-Action

Slide 36

Slide 36 text

REDUX PROBLEM Store There are a lot of tools to solve this problem. Async-Action

Slide 37

Slide 37 text

REDUX PROBLEM Store There are a lot of tools to solve this problem. Async-Action

Slide 38

Slide 38 text

REDUX PROBLEM Store Async-Action Easy bro!

Slide 39

Slide 39 text

REDUX PROBLEM Store Async-Action One of them is Redux Saga

Slide 40

Slide 40 text

REDUX SAGA Is a library which helps manage async actions with generators. 5 Redux Saga

Slide 41

Slide 41 text

REDUX SAGA It runs the generator functions 
 for you. It gives you helper functions to interact with Redux

Slide 42

Slide 42 text

REDUX SAGA ✈

Slide 43

Slide 43 text

REDUX SAGA ✈

Slide 44

Slide 44 text

REDUX SAGA

Slide 45

Slide 45 text

REDUX SAGA

Slide 46

Slide 46 text

GENERATORS How does it compare with 
 Redux Thunks Nice!

Slide 47

Slide 47 text

REDUX THUNKS LOGIN WITH THUNKS

Slide 48

Slide 48 text

REDUX THUNKS LOGIN WITH THUNKS

Slide 49

Slide 49 text

REDUX THUNKS LOGIN WITH THUNKS

Slide 50

Slide 50 text

REDUX THUNKS LOGIN WITH THUNKS

Slide 51

Slide 51 text

SAGA LOGIN WITH SAGA

Slide 52

Slide 52 text

SAGA LOGIN WITH SAGA

Slide 53

Slide 53 text

SAGA LOGIN WITH SAGA

Slide 54

Slide 54 text

SAGA LOGIN WITH SAGA

Slide 55

Slide 55 text

SAGA LOGIN WITH SAGA

Slide 56

Slide 56 text

SAGA LOGIN WITH SAGA

Slide 57

Slide 57 text

THUNKS FEATURE PARITY WITH THUNKS

Slide 58

Slide 58 text

GENERATORS Isn’t this just too complex for a login

Slide 59

Slide 59 text

THUNKS

Slide 60

Slide 60 text

THUNKS FEATURE PARITY WITH THUNKS

Slide 61

Slide 61 text

NETWORK RACE

Slide 62

Slide 62 text

NETWORK RACE

Slide 63

Slide 63 text

NETWORK RACE

Slide 64

Slide 64 text

NETWORK RACE

Slide 65

Slide 65 text

SAGA LOGIN WITH SAGA

Slide 66

Slide 66 text

SAGA LOGIN WITH SAGA

Slide 67

Slide 67 text

SAGA LOGIN WITH SAGA ✈ Logout!

Slide 68

Slide 68 text

SAGA LOGIN WITH SAGA Me?

Slide 69

Slide 69 text

SAGA LOGIN WITH SAGA

Slide 70

Slide 70 text

SAGA LOGIN WITH SAGA

Slide 71

Slide 71 text

SAGA LOGIN WITH SAGA

Slide 72

Slide 72 text

SAGA LOGIN WITH SAGA

Slide 73

Slide 73 text

SAGA LOGIN WITH SAGA

Slide 74

Slide 74 text

GENERATORS Can’t you just use Async / Await and be happy?

Slide 75

Slide 75 text

SAGA ASYNC AWAIT IMPLEMENTATION OF REDUX SAGA

Slide 76

Slide 76 text

SAGA ASYNC AWAIT IMPLEMENTATION OF REDUX SAGA

Slide 77

Slide 77 text

GENERATORS So, are generators useless?

Slide 78

Slide 78 text

GENERATORS The whole point of generators is that you can manipulate them while they are suspended.

Slide 79

Slide 79 text

GENERATORS Think of it as a conversation between the code that runs the generator and the generator itself. Generator Redux Saga
 (runner)

Slide 80

Slide 80 text

GENERATORS Generator Redux Saga
 (runner)

Slide 81

Slide 81 text

GENERATORS Generator Redux Saga
 (runner)

Slide 82

Slide 82 text

GENERATORS Generator Redux Saga
 (runner)

Slide 83

Slide 83 text

GENERATORS Generator Redux Saga
 (runner)

Slide 84

Slide 84 text

GENERATORS Generator Redux Saga
 (runner)

Slide 85

Slide 85 text

GENERATORS Generator Redux Saga
 (runner)

Slide 86

Slide 86 text

GENERATORS Async or any other magical being Redux Saga
 (runner)

Slide 87

Slide 87 text

GENERATORS ? Async or any other magical being Redux Saga
 (runner)

Slide 88

Slide 88 text

GENERATORS Which is why it is so easy to test a redux saga, at every yield @

Slide 89

Slide 89 text

REDUX SAGA TESTING

Slide 90

Slide 90 text

REDUX SAGA TESTING

Slide 91

Slide 91 text

REDUX SAGA TESTING

Slide 92

Slide 92 text

REDUX SAGA TAKE AWAYS Generator functions are fun Redux Saga is an amazing solution to the async action problem

Slide 93

Slide 93 text

REDUX SAGA THANK YOU

Slide 94

Slide 94 text

REDUX SAGA TAKEAWAY

Slide 95

Slide 95 text

REDUX SAGA TAKEAWAY

Slide 96

Slide 96 text

REDUX SAGA TAKEAWAY

Slide 97

Slide 97 text

REDUX SAGA TAKEAWAY