Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
September 2017
Redux Saga,

the Viking way to manage side effects
Nacho Martín
Thanks to our sponsors!
Nacho Martin
I write code at Limenius.
We build tailor-made projects,
and provide consultancy
and formation.
We are very h...
Roadmap:
• Are Sagas indispensable?
• Is there a theoretical background?
• ES6 Generators
• Sagas
Maybe you don’t need redux-saga
What we need
dispatch({type:‘API_REQUEST’})
Reducer
What we need
dispatch({type:‘API_REQUEST’})
Reducer
state = {…state, requesting : true }
Store
What we need
dispatch({type:‘API_REQUEST’})
Reducer
Store
Middleware
⚙
What we need
dispatch({type:‘API_REQUEST’})
Reducer
Store
Middleware
dispatch({type:‘API_REQUEST_SUCCESS’, data})
⚙
What we need
dispatch({type:‘API_REQUEST’})
Reducer
state = {…state, data : action.data }
Store
Middleware
dispatch({type:...
What we need
dispatch({type:‘API_REQUEST’})
Reducer
state = {…state, showError: true }
Store
Middleware
dispatch({type:‘AP...
What we need
dispatch({type:‘API_REQUEST’})
Reducer
state = {…state, showError: true }
Store
Middleware
dispatch({type:‘AP...
Redux-thunk
function makeASandwichWithSecretSauce() {
return function (dispatch) {
dispatch({type: Constants.SANDWICH_REQU...
Redux-thunk
The lib has only 14 lines of code
If you don’t need more, stick with it
But what if you do?
If you need more
•Redux-saga
•Redux-observable
•…
•Maybe your own in the future?
Sagas: an abused word
Originally
Originally
Originally
Originally
But nowadays
A long and complicated story with many details
e.g. “my neighbor told me the saga of his divorce again”
Originally in C.S.
Héctor García-Molina
Originally in C.S.
Héctor García-Molina
( )
Originally in C.S.
Héctor García-Molina
( )
Originally in C.S.
Héctor García-Molina
( )
Multiple workflows, each providing
compensating actions for every step of
the w...
But nowadays
A process manager used to
orchestrate complex operations.
But nowadays
A process manager used to
orchestrate complex operations.
A library to manage side-effects.
And in redux-saga:
Generators
function*
First generator
function* myFirstGenerator() {
yield "one"
yield "two"
yield "three"
}
var it = myFirstGenerator()
console...
First generator
function* myFirstGenerator() {
yield "one"
yield "two"
yield "three"
}
var it = myFirstGenerator()
console...
First generator
function* myFirstGenerator() {
yield "one"
yield "two"
yield "three"
}
var it = myFirstGenerator()
console...
First generator
function* myFirstGenerator() {
yield "one"
yield "two"
yield "three"
}
var it = myFirstGenerator()
console...
First generator
function* myFirstGenerator() {
yield "one"
yield "two"
yield "three"
}
var it = myFirstGenerator()
console...
First generator
function* myFirstGenerator() {
yield "one"
yield "two"
yield "three"
}
var it = myFirstGenerator()
console...
First generator
function* myFirstGenerator() {
yield "one"
yield "two"
yield "three"
}
var it = myFirstGenerator()
console...
First generator
function* myFirstGenerator() {
yield "one"
yield "two"
yield "three"
}
var it = myFirstGenerator()
console...
First generator
function* myFirstGenerator() {
yield "one"
yield "two"
yield "three"
}
var it = myFirstGenerator()
console...
First generator
function* myFirstGenerator() {
yield "one"
yield "two"
yield "three"
}
var it = myFirstGenerator()
console...
First generator
function* myFirstGenerator() {
yield "one"
yield "two"
yield "three"
}
var it = myFirstGenerator()
console...
function* sum() {
var x = 0
x += (yield "1st " + x)
x += (yield "2nd " + x)
x += (yield "3rd " + x)
x += (yield "4th " + x...
function* sum() {
var x = 0
x += (yield "1st " + x)
x += (yield "2nd " + x)
x += (yield "3rd " + x)
x += (yield "4th " + x...
function* sum() {
var x = 0
x += (yield "1st " + x)
x += (yield "2nd " + x)
x += (yield "3rd " + x)
x += (yield "4th " + x...
function* sum() {
var x = 0
x += (yield "1st " + x)
x += (yield "2nd " + x)
x += (yield "3rd " + x)
x += (yield "4th " + x...
function* sum() {
var x = 0
x += (yield "1st " + x)
x += (yield "2nd " + x)
x += (yield "3rd " + x)
x += (yield "4th " + x...
function* sum() {
var x = 0
x += (yield "1st " + x)
x += (yield "2nd " + x)
x += (yield "3rd " + x)
x += (yield "4th " + x...
function* sum() {
var x = 0
x += (yield "1st " + x)
x += (yield "2nd " + x)
x += (yield "3rd " + x)
x += (yield "4th " + x...
function* sum() {
var x = 0
x += (yield "1st " + x)
x += (yield "2nd " + x)
x += (yield "3rd " + x)
x += (yield "4th " + x...
function* sum() {
var x = 0
x += (yield "1st " + x)
x += (yield "2nd " + x)
x += (yield "3rd " + x)
x += (yield "4th " + x...
function* sum() {
var x = 0
x += (yield "1st " + x)
x += (yield "2nd " + x)
x += (yield "3rd " + x)
x += (yield "4th " + x...
function* sum() {
var x = 0
x += (yield "1st " + x)
x += (yield "2nd " + x)
x += (yield "3rd " + x)
x += (yield "4th " + x...
function* sum() {
var x = 0
x += (yield "1st " + x)
x += (yield "2nd " + x)
x += (yield "3rd " + x)
x += (yield "4th " + x...
function* sum() {
var x = 0
x += (yield "1st " + x)
x += (yield "2nd " + x)
x += (yield "3rd " + x)
x += (yield "4th " + x...
function* sum() {
var x = 0
x += (yield "1st " + x)
x += (yield "2nd " + x)
x += (yield "3rd " + x)
x += (yield "4th " + x...
function* sum() {
var x = 0
x += (yield "1st " + x)
x += (yield "2nd " + x)
x += (yield "3rd " + x)
x += (yield "4th " + x...
function* sum() {
var x = 0
x += (yield "1st " + x)
x += (yield "2nd " + x)
x += (yield "3rd " + x)
x += (yield "4th " + x...
function* sum() {
var x = 0
x += (yield "1st " + x)
x += (yield "2nd " + x)
x += (yield "3rd " + x)
x += (yield "4th " + x...
function* sum() {
var x = 0
x += (yield "1st " + x)
x += (yield "2nd " + x)
x += (yield "3rd " + x)
x += (yield "4th " + x...
function* sum() {
var x = 0
x += (yield "1st " + x)
x += (yield "2nd " + x)
x += (yield "3rd " + x)
x += (yield "4th " + x...
function* sum() {
var x = 0
x += (yield "1st " + x)
x += (yield "2nd " + x)
x += (yield "3rd " + x)
x += (yield "4th " + x...
function* sum() {
var x = 0
x += (yield "1st " + x)
x += (yield "2nd " + x)
x += (yield "3rd " + x)
x += (yield "4th " + x...
function* sum() {
var x = 0
while(true) {
x += (yield x)
}
}
Similar, in a loop
var it = sum()
console.log(it.next(‘unused...
function* sum() {
var x = 0
while(true) {
x += (yield x)
}
}
Similar, in a loop
var it = sum()
console.log(it.next(‘unused...
function* sum() {
var x = 0
while(true) {
x += (yield x)
}
}
Similar, in a loop
var it = sum()
console.log(it.next(‘unused...
function* sum() {
var x = 0
while(true) {
x += (yield x)
}
}
Similar, in a loop
var it = sum()
console.log(it.next(‘unused...
function* sum() {
var x = 0
while(true) {
x += (yield x)
}
}
Similar, in a loop
var it = sum()
console.log(it.next(‘unused...
function* sum() {
var x = 0
while(true) {
x += (yield x)
}
}
Similar, in a loop
var it = sum()
console.log(it.next(‘unused...
const fetchUser = () => new Promise(
resolve => {
setTimeout(() => resolve(
{
username: 'nacho',
hash: ‘12345'
}
), 4000)
...
const fetchUser = () => new Promise(
resolve => {
setTimeout(() => resolve(
{
username: 'nacho',
hash: ‘12345'
}
), 4000)
...
const fetchUser = () => new Promise(
resolve => {
setTimeout(() => resolve(
{
username: 'nacho',
hash: ‘12345'
}
), 4000)
...
With async code (+ promises)
const fetchUser = () => new Promise(
resolve => {
setTimeout(() => resolve(
{
username: 'nach...
With async code (+ promises)
const fetchUser = () => new Promise(
resolve => {
setTimeout(() => resolve(
{
username: 'nach...
With async code (+ promises)
function* apiCalls(username, password) {
var user = yield fetchUser(username)
var hash = yiel...
With async code (+ promises)
function* apiCalls(username, password) {
var user = yield fetchUser(username)
var hash = yiel...
With async code (+ promises)
function* apiCalls(username, password) {
var user = yield fetchUser(username)
var hash = yiel...
With async code (+ promises)
function* apiCalls(username, password) {
var user = yield fetchUser(username)
var hash = yiel...
redux-saga
(or other libs)
With async code (+ promises)
function* apiCalls(username, password) {
var user = yield fetchUse...
Sagas
Setup
import { createStore, applyMiddleware } from 'redux'
import createSagaMiddleware from 'redux-saga'
// ...
import { h...
Simple problem: How to play a sound?
Imagine that we have a class SoundManager
that can load sounds, do a set up,
and has ...
Naive solution
class MoveButton extends Component {
render() {
return (
<Button
onPress={() => soundManager.play( ‘buzz’)}...
Naive solution
class MoveButton extends Component {
render() {
return (
<Button
onPress={() => soundManager.play( ‘buzz’)}...
Naive solution
class MoveButton extends Component {
render() {
return (
<Button
onPress={() => dispatch(playSound( ‘buzz’)...
Naive solution
class MoveButton extends Component {
render() {
return (
<Button
onPress={() => dispatch(playSound( ‘buzz’)...
Naive solution
class MoveButton extends Component {
render() {
return (
<Button
onPress={() => this.props.soundManager(‘bu...
Naive solution
class MoveButton extends Component {
render() {
return (
<Button
onPress={() => this.props.soundManager(‘bu...
Naive solution
class MoveButton extends Component {
render() {
return (
<Button
onPress={() => playSound(this.props.soundM...
Naive solution
class MoveButton extends Component {
render() {
return (
<Button
onPress={() => playSound(this.props.soundM...
Naive solution
What if we want to play a sound when the opponent moves too
and we receive her movements from a websocket?
Naive solution
What if we want to play a sound when the opponent moves too
and we receive her movements from a websocket?
...
Naive solution
What if we want to play a sound when the opponent moves too
and we receive her movements from a websocket?
...
Using sagas
import { take } from 'redux-saga/effects'
export default function* rootSaga() {
const action = yield take(Cons...
Using sagas
import { take } from 'redux-saga/effects'
export default function* rootSaga(soundManager) {
const action = yie...
Using sagas
import { take } from 'redux-saga/effects'
export default function* rootSaga(soundManager) {
const action = yie...
Example: Play sound (call)
import { take, call } from 'redux-saga/effects'
export default function* rootSaga(soundManager)...
Example: Play sound (call)
import { take, call } from 'redux-saga/effects'
export default function* rootSaga(soundManager)...
Declarative effects
Effects are declarative, so they are easier to test
export function* delayAndDo() {
yield call(delay, 10...
Example: Play sound
import { take, call } from 'redux-saga/effects'
export default function* rootSaga(soundManager) {
cons...
Example: Play sound
import { take, call } from 'redux-saga/effects'
export default function* rootSaga(soundManager) {
cons...
Example: Play sound
import { take, call } from 'redux-saga/effects'
export default function* rootSaga(soundManager) {
whil...
Example: Play sound
import { take, call } from 'redux-saga/effects'
export default function* rootSaga(soundManager) {
whil...
Example: Play sound (takeEvery)
import { takeEvery, call } from 'redux-saga/effects'
function* playSound(soundManager, act...
Dispatching (put)
import { take, put } from 'redux-saga/effects'
function* watchLogin() {
while (true) {
const action = yi...
Dispatching (put)
import { take, put } from 'redux-saga/effects'
function* watchLogin() {
while (true) {
const action = yi...
Ajax example
Thunk
function makeASandwichWithSecretSauce() {
return function (dispatch) {
dispatch({type: Constants.SANDWI...
Ajax example
import { takeEvery, put, call } from 'redux-saga/effects'
export default function* rootSaga() {
const action ...
takeLatest
import { takeLatest } from 'redux-saga/effects'
function* watchFetchData() {
yield takeLatest('FETCH_REQUESTED'...
takeLatest
import { takeLatest } from 'redux-saga/effects'
function* watchFetchData() {
yield takeLatest('FETCH_REQUESTED'...
Non-blocking (fork)
function* watchJoinGame(socket) {
let gameSaga = null;
while (true) {
let action = yield take(Constant...
Non-blocking (fork)
function* watchJoinGame(socket) {
let gameSaga = null;
while (true) {
let action = yield take(Constant...
Cancellation (cancel)
function* watchJoinGame(socket) {
let gameSaga = null;
while (true) {
let action = yield take(Consta...
Cancellation (cancel)
function* game(socket, gameId) {
try {
const result = yield call(joinChannel, socket, 'game:'+gameId...
Cancellation (cancel)
function* game(socket, gameId) {
try {
const result = yield call(joinChannel, socket, 'game:'+gameId...
Cancellation (cancel)
function* game(socket, gameId) {
try {
const result = yield call(joinChannel, socket, 'game:'+gameId...
Cancellation (cancel)
function* game(socket, gameId) {
try {
const result = yield call(joinChannel, socket, 'game:'+gameId...
Non-blocking detached (spawn)
A tasks waits for all its forks to terminate
Errors are bubbled up
Cancelling a tasks cancel...
Implement takeEvery from take
function* takeEvery(pattern, saga, ...args) {
const task = yield fork(function* () {
while (...
export default function* rootSaga() {
yield all([
playSounds(),
watchJoinGame(),
//…
])
}
Parallel (all)
Will block until ...
Races (race)
import { race, take } from 'redux-saga/effects'
function* aiCalculate() {
while (true) { ... }
}
function* wa...
Watch and fork pattern
https://medium.com/@pierremaoui/using-websockets-with-redux-sagas-a2bf26467cab
function* watchReque...
Sequentially, using channels
https://medium.com/@pierremaoui/using-websockets-with-redux-sagas-a2bf26467cab
import { take,...
Sequentially, using channels
https://medium.com/@pierremaoui/using-websockets-with-redux-sagas-a2bf26467cab
import { take,...
Connect + listen from socket
function websocketInitChannel() {
return eventChannel( emitter => {
const ws = new WebSocket(...
Obtaining the state (select)
import { select, takeEvery } from 'redux-saga/effects'
function* watchAndLog() {
yield takeEv...
Summary
•Take (takeEvery, takeLast)
•Call
•Put
•Fork & Spawn
•Cancel
•Channels & EventChannels
•All & race
•Select
Takeaways
• Don’t use sagas until you need to orchestrate
complex side effects, but prepare for that moment.
• Forget about...
Thanks! @nacmartin
nacho@limenius.com
Redux Sagas - React Alicante
Redux Sagas - React Alicante
Upcoming SlideShare
Loading in …5
×

Redux Sagas - React Alicante

838 views

Published on

Introduction to Redux-saga, presented at React Alicante 2017.
With an introduction about ES6 generators in the context of async operations.

Published in: Software
  • Be the first to comment

Redux Sagas - React Alicante

  1. 1. September 2017 Redux Saga, the Viking way to manage side effects Nacho Martín
  2. 2. Thanks to our sponsors!
  3. 3. Nacho Martin I write code at Limenius. We build tailor-made projects, and provide consultancy and formation. We are very happy with React and React Native.
  4. 4. Roadmap: • Are Sagas indispensable? • Is there a theoretical background? • ES6 Generators • Sagas
  5. 5. Maybe you don’t need redux-saga
  6. 6. What we need dispatch({type:‘API_REQUEST’}) Reducer
  7. 7. What we need dispatch({type:‘API_REQUEST’}) Reducer state = {…state, requesting : true } Store
  8. 8. What we need dispatch({type:‘API_REQUEST’}) Reducer Store Middleware ⚙
  9. 9. What we need dispatch({type:‘API_REQUEST’}) Reducer Store Middleware dispatch({type:‘API_REQUEST_SUCCESS’, data}) ⚙
  10. 10. What we need dispatch({type:‘API_REQUEST’}) Reducer state = {…state, data : action.data } Store Middleware dispatch({type:‘API_REQUEST_SUCCESS’, data}) ⚙
  11. 11. What we need dispatch({type:‘API_REQUEST’}) Reducer state = {…state, showError: true } Store Middleware dispatch({type:‘API_REQUEST_ERROR’}) ⚙
  12. 12. What we need dispatch({type:‘API_REQUEST’}) Reducer state = {…state, showError: true } Store Middleware dispatch({type:‘API_REQUEST_ERROR’}) ⚙ Side effects Pure code
  13. 13. Redux-thunk function makeASandwichWithSecretSauce() { return function (dispatch) { dispatch({type: Constants.SANDWICH_REQUEST}) return fetch('https://www.google.com/search?q=secret+sauce') .then( sauce => dispatch({type: Constants.SANDWICH_SUCCESS, sauce}), error => dispatch({type: Constants.SANDWICH_ERROR, error}) ) } } dispatch(makeASandwichWithSecretSauce())
  14. 14. Redux-thunk The lib has only 14 lines of code If you don’t need more, stick with it But what if you do?
  15. 15. If you need more •Redux-saga •Redux-observable •… •Maybe your own in the future?
  16. 16. Sagas: an abused word
  17. 17. Originally
  18. 18. Originally
  19. 19. Originally
  20. 20. Originally
  21. 21. But nowadays A long and complicated story with many details e.g. “my neighbor told me the saga of his divorce again”
  22. 22. Originally in C.S. Héctor García-Molina
  23. 23. Originally in C.S. Héctor García-Molina ( )
  24. 24. Originally in C.S. Héctor García-Molina ( )
  25. 25. Originally in C.S. Héctor García-Molina ( ) Multiple workflows, each providing compensating actions for every step of the workflow where it can fail
  26. 26. But nowadays A process manager used to orchestrate complex operations.
  27. 27. But nowadays A process manager used to orchestrate complex operations. A library to manage side-effects. And in redux-saga:
  28. 28. Generators function*
  29. 29. First generator function* myFirstGenerator() { yield "one" yield "two" yield "three" } var it = myFirstGenerator() console.log(it) console.log(it.next()) console.log(it.next()) console.log(it.next()) console.log(it.next())
  30. 30. First generator function* myFirstGenerator() { yield "one" yield "two" yield "three" } var it = myFirstGenerator() console.log(it) console.log(it.next()) console.log(it.next()) console.log(it.next()) console.log(it.next())
  31. 31. First generator function* myFirstGenerator() { yield "one" yield "two" yield "three" } var it = myFirstGenerator() console.log(it) console.log(it.next()) console.log(it.next()) console.log(it.next()) console.log(it.next()) {}
  32. 32. First generator function* myFirstGenerator() { yield "one" yield "two" yield "three" } var it = myFirstGenerator() console.log(it) console.log(it.next()) console.log(it.next()) console.log(it.next()) console.log(it.next())
  33. 33. First generator function* myFirstGenerator() { yield "one" yield "two" yield "three" } var it = myFirstGenerator() console.log(it) console.log(it.next()) console.log(it.next()) console.log(it.next()) console.log(it.next()) { value: 'one', done: false }
  34. 34. First generator function* myFirstGenerator() { yield "one" yield "two" yield "three" } var it = myFirstGenerator() console.log(it) console.log(it.next()) console.log(it.next()) console.log(it.next()) console.log(it.next())
  35. 35. First generator function* myFirstGenerator() { yield "one" yield "two" yield "three" } var it = myFirstGenerator() console.log(it) console.log(it.next()) console.log(it.next()) console.log(it.next()) console.log(it.next()) { value: 'two', done: false }
  36. 36. First generator function* myFirstGenerator() { yield "one" yield "two" yield "three" } var it = myFirstGenerator() console.log(it) console.log(it.next()) console.log(it.next()) console.log(it.next()) console.log(it.next())
  37. 37. First generator function* myFirstGenerator() { yield "one" yield "two" yield "three" } var it = myFirstGenerator() console.log(it) console.log(it.next()) console.log(it.next()) console.log(it.next()) console.log(it.next()) { value: 'three', done: false }
  38. 38. First generator function* myFirstGenerator() { yield "one" yield "two" yield "three" } var it = myFirstGenerator() console.log(it) console.log(it.next()) console.log(it.next()) console.log(it.next()) console.log(it.next())
  39. 39. First generator function* myFirstGenerator() { yield "one" yield "two" yield "three" } var it = myFirstGenerator() console.log(it) console.log(it.next()) console.log(it.next()) console.log(it.next()) console.log(it.next()) { value: undefined, done: true }
  40. 40. function* sum() { var x = 0 x += (yield "1st " + x) x += (yield "2nd " + x) x += (yield "3rd " + x) x += (yield "4th " + x) } Passing values to generators var it = sum() console.log(it.next(‘unused’)) console.log(it.next(1)) console.log(it.next(20)) console.log(it.next(300))
  41. 41. function* sum() { var x = 0 x += (yield "1st " + x) x += (yield "2nd " + x) x += (yield "3rd " + x) x += (yield "4th " + x) } Passing values to generators var it = sum() console.log(it.next(‘unused’)) console.log(it.next(1)) console.log(it.next(20)) console.log(it.next(300)) heaven of data
  42. 42. function* sum() { var x = 0 x += (yield "1st " + x) x += (yield "2nd " + x) x += (yield "3rd " + x) x += (yield "4th " + x) } Passing values to generators var it = sum() console.log(it.next(‘unused’)) console.log(it.next(1)) console.log(it.next(20)) console.log(it.next(300))
  43. 43. function* sum() { var x = 0 x += (yield "1st " + x) x += (yield "2nd " + x) x += (yield "3rd " + x) x += (yield "4th " + x) } Passing values to generators var it = sum() console.log(it.next(‘unused’)) console.log(it.next(1)) console.log(it.next(20)) console.log(it.next(300))
  44. 44. function* sum() { var x = 0 x += (yield "1st " + x) x += (yield "2nd " + x) x += (yield "3rd " + x) x += (yield "4th " + x) } Passing values to generators var it = sum() console.log(it.next(‘unused’)) console.log(it.next(1)) console.log(it.next(20)) console.log(it.next(300)) { value: '1st 0’, done: false }
  45. 45. function* sum() { var x = 0 x += (yield "1st " + x) x += (yield "2nd " + x) x += (yield "3rd " + x) x += (yield "4th " + x) } Passing values to generators var it = sum() console.log(it.next(‘unused’)) console.log(it.next(1)) console.log(it.next(20)) console.log(it.next(300))
  46. 46. function* sum() { var x = 0 x += (yield "1st " + x) x += (yield "2nd " + x) x += (yield "3rd " + x) x += (yield "4th " + x) } Passing values to generators var it = sum() console.log(it.next(‘unused’)) console.log(it.next(1)) console.log(it.next(20)) console.log(it.next(300)) x = 0 + 1
  47. 47. function* sum() { var x = 0 x += (yield "1st " + x) x += (yield "2nd " + x) x += (yield "3rd " + x) x += (yield "4th " + x) } Passing values to generators var it = sum() console.log(it.next(‘unused’)) console.log(it.next(1)) console.log(it.next(20)) console.log(it.next(300))
  48. 48. function* sum() { var x = 0 x += (yield "1st " + x) x += (yield "2nd " + x) x += (yield "3rd " + x) x += (yield "4th " + x) } Passing values to generators var it = sum() console.log(it.next(‘unused’)) console.log(it.next(1)) console.log(it.next(20)) console.log(it.next(300))
  49. 49. function* sum() { var x = 0 x += (yield "1st " + x) x += (yield "2nd " + x) x += (yield "3rd " + x) x += (yield "4th " + x) } Passing values to generators var it = sum() console.log(it.next(‘unused’)) console.log(it.next(1)) console.log(it.next(20)) console.log(it.next(300)) { value: '2nd 1’, done: false }
  50. 50. function* sum() { var x = 0 x += (yield "1st " + x) x += (yield "2nd " + x) x += (yield "3rd " + x) x += (yield "4th " + x) } Passing values to generators var it = sum() console.log(it.next(‘unused’)) console.log(it.next(1)) console.log(it.next(20)) console.log(it.next(300))
  51. 51. function* sum() { var x = 0 x += (yield "1st " + x) x += (yield "2nd " + x) x += (yield "3rd " + x) x += (yield "4th " + x) } Passing values to generators var it = sum() console.log(it.next(‘unused’)) console.log(it.next(1)) console.log(it.next(20)) console.log(it.next(300)) x = 1 + 20
  52. 52. function* sum() { var x = 0 x += (yield "1st " + x) x += (yield "2nd " + x) x += (yield "3rd " + x) x += (yield "4th " + x) } Passing values to generators var it = sum() console.log(it.next(‘unused’)) console.log(it.next(1)) console.log(it.next(20)) console.log(it.next(300))
  53. 53. function* sum() { var x = 0 x += (yield "1st " + x) x += (yield "2nd " + x) x += (yield "3rd " + x) x += (yield "4th " + x) } Passing values to generators var it = sum() console.log(it.next(‘unused’)) console.log(it.next(1)) console.log(it.next(20)) console.log(it.next(300))
  54. 54. function* sum() { var x = 0 x += (yield "1st " + x) x += (yield "2nd " + x) x += (yield "3rd " + x) x += (yield "4th " + x) } Passing values to generators var it = sum() console.log(it.next(‘unused’)) console.log(it.next(1)) console.log(it.next(20)) console.log(it.next(300))
  55. 55. function* sum() { var x = 0 x += (yield "1st " + x) x += (yield "2nd " + x) x += (yield "3rd " + x) x += (yield "4th " + x) } Passing values to generators var it = sum() console.log(it.next(‘unused’)) console.log(it.next(1)) console.log(it.next(20)) console.log(it.next(300)) { value: '3rd 21’, done: false }
  56. 56. function* sum() { var x = 0 x += (yield "1st " + x) x += (yield "2nd " + x) x += (yield "3rd " + x) x += (yield "4th " + x) } Passing values to generators var it = sum() console.log(it.next(‘unused’)) console.log(it.next(1)) console.log(it.next(20)) console.log(it.next(300))
  57. 57. function* sum() { var x = 0 x += (yield "1st " + x) x += (yield "2nd " + x) x += (yield "3rd " + x) x += (yield "4th " + x) } Passing values to generators var it = sum() console.log(it.next(‘unused’)) console.log(it.next(1)) console.log(it.next(20)) console.log(it.next(300)) x = 21 + 300
  58. 58. function* sum() { var x = 0 x += (yield "1st " + x) x += (yield "2nd " + x) x += (yield "3rd " + x) x += (yield "4th " + x) } Passing values to generators var it = sum() console.log(it.next(‘unused’)) console.log(it.next(1)) console.log(it.next(20)) console.log(it.next(300))
  59. 59. function* sum() { var x = 0 x += (yield "1st " + x) x += (yield "2nd " + x) x += (yield "3rd " + x) x += (yield "4th " + x) } Passing values to generators var it = sum() console.log(it.next(‘unused’)) console.log(it.next(1)) console.log(it.next(20)) console.log(it.next(300))
  60. 60. function* sum() { var x = 0 x += (yield "1st " + x) x += (yield "2nd " + x) x += (yield "3rd " + x) x += (yield "4th " + x) } Passing values to generators var it = sum() console.log(it.next(‘unused’)) console.log(it.next(1)) console.log(it.next(20)) console.log(it.next(300)) { value: '4th 321’, done: false }
  61. 61. function* sum() { var x = 0 while(true) { x += (yield x) } } Similar, in a loop var it = sum() console.log(it.next(‘unused’)) console.log(it.next(1)) console.log(it.next(20)) console.log(it.next(300))
  62. 62. function* sum() { var x = 0 while(true) { x += (yield x) } } Similar, in a loop var it = sum() console.log(it.next(‘unused’)) console.log(it.next(1)) console.log(it.next(20)) console.log(it.next(300))
  63. 63. function* sum() { var x = 0 while(true) { x += (yield x) } } Similar, in a loop var it = sum() console.log(it.next(‘unused’)) console.log(it.next(1)) console.log(it.next(20)) console.log(it.next(300)) { value: 0, done: false }
  64. 64. function* sum() { var x = 0 while(true) { x += (yield x) } } Similar, in a loop var it = sum() console.log(it.next(‘unused’)) console.log(it.next(1)) console.log(it.next(20)) console.log(it.next(300)) { value: 1, done: false }
  65. 65. function* sum() { var x = 0 while(true) { x += (yield x) } } Similar, in a loop var it = sum() console.log(it.next(‘unused’)) console.log(it.next(1)) console.log(it.next(20)) console.log(it.next(300)) { value:21, done: false }
  66. 66. function* sum() { var x = 0 while(true) { x += (yield x) } } Similar, in a loop var it = sum() console.log(it.next(‘unused’)) console.log(it.next(1)) console.log(it.next(20)) console.log(it.next(300)) { value:321, done: false }
  67. 67. const fetchUser = () => new Promise( resolve => { setTimeout(() => resolve( { username: 'nacho', hash: ‘12345' } ), 4000) }) With async code (+ promises) function* apiCalls(username, password) { var user = yield fetchUser(username) return user } var it = apiCalls() var promise = it.next().value console.log(promise) promise.then((result) => { console.log(result) var response = it.next(result) console.log(response) })
  68. 68. const fetchUser = () => new Promise( resolve => { setTimeout(() => resolve( { username: 'nacho', hash: ‘12345' } ), 4000) }) With async code (+ promises) function* apiCalls(username, password) { var user = yield fetchUser(username) return user } var it = apiCalls() var promise = it.next().value console.log(promise) promise.then((result) => { console.log(result) var response = it.next(result) console.log(response) })
  69. 69. const fetchUser = () => new Promise( resolve => { setTimeout(() => resolve( { username: 'nacho', hash: ‘12345' } ), 4000) }) With async code (+ promises) function* apiCalls(username, password) { var user = yield fetchUser(username) return user } var it = apiCalls() var promise = it.next().value console.log(promise) promise.then((result) => { console.log(result) var response = it.next(result) console.log(response) }) Promise { <pending> }
  70. 70. With async code (+ promises) const fetchUser = () => new Promise( resolve => { setTimeout(() => resolve( { username: 'nacho', hash: ‘12345' } ), 4000) }) function* apiCalls(username, password) { var user = yield fetchUser(username) return user } var it = apiCalls() var promise = it.next().value console.log(promise) promise.then((result) => { console.log(result) var response = it.next(result) console.log(response) }) { username: 'nacho', hash: '12345' }
  71. 71. With async code (+ promises) const fetchUser = () => new Promise( resolve => { setTimeout(() => resolve( { username: 'nacho', hash: ‘12345' } ), 4000) }) function* apiCalls(username, password) { var user = yield fetchUser(username) return user } var it = apiCalls() var promise = it.next().value console.log(promise) promise.then((result) => { console.log(result) var response = it.next(result) console.log(response) }) { value: { username: 'nacho', hash: '12345' }, done: true }
  72. 72. With async code (+ promises) function* apiCalls(username, password) { var user = yield fetchUser(username) var hash = yield someCrypto(password) if (user.hash == hash) { var hash = yield setSession(user.username) var posts = yield fetchPosts(user) } //... }
  73. 73. With async code (+ promises) function* apiCalls(username, password) { var user = yield fetchUser(username) var hash = yield someCrypto(password) if (user.hash == hash) { var hash = yield setSession(user.username) var posts = yield fetchPosts(user) } //... } We are doing async as if it was sync Easy to understand, dependent on our project
  74. 74. With async code (+ promises) function* apiCalls(username, password) { var user = yield fetchUser(username) var hash = yield someCrypto(password) if (user.hash == hash) { var hash = yield setSession(user.username) var posts = yield fetchPosts(user) } //... } We are doing async as if it was sync Easy to understand, dependent on our project ?
  75. 75. With async code (+ promises) function* apiCalls(username, password) { var user = yield fetchUser(username) var hash = yield someCrypto(password) if (user.hash == hash) { var hash = yield setSession(user.username) var posts = yield fetchPosts(user) } //... } We are doing async as if it was sync Easy to understand, dependent on our project ? More complex code but reusable between projects
  76. 76. redux-saga (or other libs) With async code (+ promises) function* apiCalls(username, password) { var user = yield fetchUser(username) var hash = yield someCrypto(password) if (user.hash == hash) { var hash = yield setSession(user.username) var posts = yield fetchPosts(user) } //... } We are doing async as if it was sync Easy to understand, dependent on our project More complex code but reusable between projects
  77. 77. Sagas
  78. 78. Setup import { createStore, applyMiddleware } from 'redux' import createSagaMiddleware from 'redux-saga' // ... import { helloSaga } from './sagas' const sagaMiddleware = createSagaMiddleware() const store = createStore( reducer, applyMiddleware(sagaMiddleware) ) sagaMiddleware.run(helloSaga)
  79. 79. Simple problem: How to play a sound? Imagine that we have a class SoundManager that can load sounds, do a set up, and has a method SoundManager.play(sound) How could we use it in React?
  80. 80. Naive solution class MoveButton extends Component { render() { return ( <Button onPress={() => soundManager.play( ‘buzz’)} /> ) } }
  81. 81. Naive solution class MoveButton extends Component { render() { return ( <Button onPress={() => soundManager.play( ‘buzz’)} /> ) } } But where does soundManager come from?
  82. 82. Naive solution class MoveButton extends Component { render() { return ( <Button onPress={() => dispatch(playSound( ‘buzz’))} /> ) } }
  83. 83. Naive solution class MoveButton extends Component { render() { return ( <Button onPress={() => dispatch(playSound( ‘buzz’))} /> ) } } Dispatch an action and we’ll see. But the action creator doesn’t have access to SoundManager :_(
  84. 84. Naive solution class MoveButton extends Component { render() { return ( <Button onPress={() => this.props.soundManager(‘buzz’)} /> ) } } Passing it from its parent, and the parent of its parent with props?
  85. 85. Naive solution class MoveButton extends Component { render() { return ( <Button onPress={() => this.props.soundManager(‘buzz’)} /> ) } } Passing it from its parent, and the parent of its parent with props? Hairball ahead
  86. 86. Naive solution class MoveButton extends Component { render() { return ( <Button onPress={() => playSound(this.props.soundManager,‘buzz’)} /> ) } } From redux connect: • But soundManager is not serializable. • Breaks time-travel, persist and rehydrate store…
  87. 87. Naive solution class MoveButton extends Component { render() { return ( <Button onPress={() => playSound(this.props.soundManager,‘buzz’)} /> ) } } From redux connect: • But soundManager is not serializable. • Breaks time-travel, persist and rehydrate store… Then what, maybe use context?
  88. 88. Naive solution What if we want to play a sound when the opponent moves too and we receive her movements from a websocket?
  89. 89. Naive solution What if we want to play a sound when the opponent moves too and we receive her movements from a websocket? class Game extends Component { componentDidMount() { this.props.dispatch(connectSocket(soundManager)) } //... }
  90. 90. Naive solution What if we want to play a sound when the opponent moves too and we receive her movements from a websocket? class Game extends Component { componentDidMount() { this.props.dispatch(connectSocket(soundManager)) } //... } What has to do connectSocket with soundManager? We are forced to do this because we don’t know anything better :_(
  91. 91. Using sagas import { take } from 'redux-saga/effects' export default function* rootSaga() { const action = yield take(Constants.PLAY_SOUND_REQUEST) console.log(action.sound) }
  92. 92. Using sagas import { take } from 'redux-saga/effects' export default function* rootSaga(soundManager) { const action = yield take(Constants.PLAY_SOUND_REQUEST) soundManager.play(action.sound) }
  93. 93. Using sagas import { take } from 'redux-saga/effects' export default function* rootSaga(soundManager) { const action = yield take(Constants.PLAY_SOUND_REQUEST) soundManager.play(action.sound) } Ok, but we need a mock to test it
  94. 94. Example: Play sound (call) import { take, call } from 'redux-saga/effects' export default function* rootSaga(soundManager) { const action = yield take(Constants.PLAY_SOUND_REQUEST) yield call(soundManager.play, action.sound) }
  95. 95. Example: Play sound (call) import { take, call } from 'redux-saga/effects' export default function* rootSaga(soundManager) { const action = yield take(Constants.PLAY_SOUND_REQUEST) yield call(soundManager.play, action.sound) } { CALL: { fn: soundManager.play, args: ['buzz'] } } Call returns an object
  96. 96. Declarative effects Effects are declarative, so they are easier to test export function* delayAndDo() { yield call(delay, 1000) yield call(doSomething) } test('delayAndDo Saga test', (assert) => { const it = delayAndDo() assert.deepEqual( it.next().value, call(delay, 1000), 'delayAndDo Saga must call delay(1000)' ) assert.deepEqual( it.next().value, call(doSomething), 'delayAndDo Saga must call doSomething' ) { CALL: {fn: delay, args: [1000]}} { CALL: {fn: doSomething, args: []}}
  97. 97. Example: Play sound import { take, call } from 'redux-saga/effects' export default function* rootSaga(soundManager) { const action = yield take(Constants.PLAY_SOUND_REQUEST) yield call(soundManager.play, action.sound) }
  98. 98. Example: Play sound import { take, call } from 'redux-saga/effects' export default function* rootSaga(soundManager) { const action = yield take(Constants.PLAY_SOUND_REQUEST) yield call(soundManager.play, action.sound) } Will take 1 action, play a sound, and terminate
  99. 99. Example: Play sound import { take, call } from 'redux-saga/effects' export default function* rootSaga(soundManager) { while (true) { const action = yield take(Constants.PLAY_SOUND_REQUEST) yield call(soundManager.play, action.sound) } }
  100. 100. Example: Play sound import { take, call } from 'redux-saga/effects' export default function* rootSaga(soundManager) { while (true) { const action = yield take(Constants.PLAY_SOUND_REQUEST) yield call(soundManager.play, action.sound) } } Will take every action
  101. 101. Example: Play sound (takeEvery) import { takeEvery, call } from 'redux-saga/effects' function* playSound(soundManager, action) { yield call(soundManager.play, action.sound) } export default function* rootSaga(soundManager) { const action = yield takeEvery(Constants.PLAY_SOUND_REQUEST, playSound, soundManager) }
  102. 102. Dispatching (put) import { take, put } from 'redux-saga/effects' function* watchLogin() { while (true) { const action = yield take('USER_LOGIN_SUCCESS') yield put({type: 'FETCH_NEW_MESSAGES'}) } }
  103. 103. Dispatching (put) import { take, put } from 'redux-saga/effects' function* watchLogin() { while (true) { const action = yield take('USER_LOGIN_SUCCESS') yield put({type: 'FETCH_NEW_MESSAGES'}) } } put dispatches a new action
  104. 104. Ajax example Thunk function makeASandwichWithSecretSauce() { return function (dispatch) { dispatch({type: Constants.SANDWICH_REQUEST}) return fetch('https://www.google.com/search?q=secret+sauce') .then( sauce => dispatch({type: Constants.SANDWICH_SUCCESS, sauce}), error => dispatch({type: Constants.SANDWICH_ERROR, error}) ) } } dispatch(makeASandwichWithSecretSauce())
  105. 105. Ajax example import { takeEvery, put, call } from 'redux-saga/effects' export default function* rootSaga() { const action = yield takeEvery(Constants.SANDWICH_REQUEST, sandwichRequest) } function* sandwichRequest() { yield put({type:Constants.SANDWICH_REQUEST_SHOW_LOADER}) try { const sauce = yield call(() => fetch('https://www.google.com/search?q=secret+sauce')) yield put {type: Constants.SANDWICH_SUCCESS, sauce} } catch (error) { yield put {type: Constants.SANDWICH_ERROR, error} } } dispatch({type:Constants.SANDWICH_REQUEST}) Saga
  106. 106. takeLatest import { takeLatest } from 'redux-saga/effects' function* watchFetchData() { yield takeLatest('FETCH_REQUESTED', fetchData) }
  107. 107. takeLatest import { takeLatest } from 'redux-saga/effects' function* watchFetchData() { yield takeLatest('FETCH_REQUESTED', fetchData) } Ensure that only the last fetchData will be running
  108. 108. Non-blocking (fork) function* watchJoinGame(socket) { let gameSaga = null; while (true) { let action = yield take(Constants.JOIN_GAME) gameSaga = yield fork(game, socket, action.gameId) yield fork(watchLeaveGame, gameSaga) } } function* game(socket, response) { yield fork(listenToSocket, socket, 'game:move', processMovements) yield fork(listenToSocket, socket, 'game:end', processEndGame) // More things that we want to do inside a game //... }
  109. 109. Non-blocking (fork) function* watchJoinGame(socket) { let gameSaga = null; while (true) { let action = yield take(Constants.JOIN_GAME) gameSaga = yield fork(game, socket, action.gameId) yield fork(watchLeaveGame, gameSaga) } } function* game(socket, response) { yield fork(listenToSocket, socket, 'game:move', processMovements) yield fork(listenToSocket, socket, 'game:end', processEndGame) // More things that we want to do inside a game //... } Fork will create a new task without blocking in the caller
  110. 110. Cancellation (cancel) function* watchJoinGame(socket) { let gameSaga = null; while (true) { let action = yield take(Constants.JOIN_GAME) gameSaga = yield fork(game, socket, action.gameId) yield fork(watchLeaveGame, gameSaga) } }
  111. 111. Cancellation (cancel) function* game(socket, gameId) { try { const result = yield call(joinChannel, socket, 'game:'+gameId) // Call instead of fork so it blocks and we can cancel it yield call(gameSequence, result.channel, result.response) } catch (error) { console.log(error) } finally { if (yield cancelled()) { socket.channel('game:'+gameId, {}).leave() } } } function* watchJoinGame(socket) { let gameSaga = null; while (true) { let action = yield take(Constants.JOIN_GAME) gameSaga = yield fork(game, socket, action.gameId) yield fork(watchLeaveGame, gameSaga) } }
  112. 112. Cancellation (cancel) function* game(socket, gameId) { try { const result = yield call(joinChannel, socket, 'game:'+gameId) // Call instead of fork so it blocks and we can cancel it yield call(gameSequence, result.channel, result.response) } catch (error) { console.log(error) } finally { if (yield cancelled()) { socket.channel('game:'+gameId, {}).leave() } } } function* watchJoinGame(socket) { let gameSaga = null; while (true) { let action = yield take(Constants.JOIN_GAME) gameSaga = yield fork(game, socket, action.gameId) yield fork(watchLeaveGame, gameSaga) } } function* watchLeaveGame(gameSaga) { while (true) { yield take(Constants.GAME_LEAVE) if (gameSaga) { yield cancel(gameSaga) } } }
  113. 113. Cancellation (cancel) function* game(socket, gameId) { try { const result = yield call(joinChannel, socket, 'game:'+gameId) // Call instead of fork so it blocks and we can cancel it yield call(gameSequence, result.channel, result.response) } catch (error) { console.log(error) } finally { if (yield cancelled()) { socket.channel('game:'+gameId, {}).leave() } } } function* watchJoinGame(socket) { let gameSaga = null; while (true) { let action = yield take(Constants.JOIN_GAME) gameSaga = yield fork(game, socket, action.gameId) yield fork(watchLeaveGame, gameSaga) } } function* watchLeaveGame(gameSaga) { while (true) { yield take(Constants.GAME_LEAVE) if (gameSaga) { yield cancel(gameSaga) } } }
  114. 114. Cancellation (cancel) function* game(socket, gameId) { try { const result = yield call(joinChannel, socket, 'game:'+gameId) // Call instead of fork so it blocks and we can cancel it yield call(gameSequence, result.channel, result.response) } catch (error) { console.log(error) } finally { if (yield cancelled()) { socket.channel('game:'+gameId, {}).leave() } } } function* watchJoinGame(socket) { let gameSaga = null; while (true) { let action = yield take(Constants.JOIN_GAME) gameSaga = yield fork(game, socket, action.gameId) yield fork(watchLeaveGame, gameSaga) } } function* watchLeaveGame(gameSaga) { while (true) { yield take(Constants.GAME_LEAVE) if (gameSaga) { yield cancel(gameSaga) } } }
  115. 115. Non-blocking detached (spawn) A tasks waits for all its forks to terminate Errors are bubbled up Cancelling a tasks cancels all its forks Fork Spawn New tasks are detached Errors don’t bubble up We have to cancel them manually
  116. 116. Implement takeEvery from take function* takeEvery(pattern, saga, ...args) { const task = yield fork(function* () { while (true) { const action = yield take(pattern) yield fork(saga, ...args.concat(action)) } }) return task }
  117. 117. export default function* rootSaga() { yield all([ playSounds(), watchJoinGame(), //… ]) } Parallel (all) Will block until all terminate
  118. 118. Races (race) import { race, take } from 'redux-saga/effects' function* aiCalculate() { while (true) { ... } } function* watchStartBackgroundTask() { while (true) { yield take('START_AI_COMPUTE_PLAYS') yield race({ task: call(aiCalculate), cancelAi: take('FORCE_MOVE_USER_IS_TIRED_OF_WAITING') }) } } In race, if one tasks terminates, the others are cancelled
  119. 119. Watch and fork pattern https://medium.com/@pierremaoui/using-websockets-with-redux-sagas-a2bf26467cab function* watchRequests() { while (true) { const { payload } = yield take('REQUEST') yield fork(handleRequest, payload) } }
  120. 120. Sequentially, using channels https://medium.com/@pierremaoui/using-websockets-with-redux-sagas-a2bf26467cab import { take, actionChannel, call, ... } from ‘redux-saga/effects' function* watchRequests() { const requestChan = yield actionChannel('REQUEST') while (true) { const { payload } = yield take(requestChan) yield call(handleRequest, payload) } }
  121. 121. Sequentially, using channels https://medium.com/@pierremaoui/using-websockets-with-redux-sagas-a2bf26467cab import { take, actionChannel, call, ... } from ‘redux-saga/effects' function* watchRequests() { const requestChan = yield actionChannel('REQUEST') while (true) { const { payload } = yield take(requestChan) yield call(handleRequest, payload) } } Channels act as buffers, buffering actions while we block in call
  122. 122. Connect + listen from socket function websocketInitChannel() { return eventChannel( emitter => { const ws = new WebSocket() ws.onmessage = msg => { return emitter( { type:‘WS_EVENT’, msg } ) } // unsubscribe function return () => { ws.close() emitter(END) } }) } https://medium.com/@pierremaoui/using-websockets-with-redux-sagas-a2bf26467cab eventChannel turns the ws connection into a channel export default function* websocketSagas() { const channel = yield call(websocketInitChannel) while (true) { const action = yield take(channel) yield put(action) } } import { eventChannel, END } from 'redux-saga'
  123. 123. Obtaining the state (select) import { select, takeEvery } from 'redux-saga/effects' function* watchAndLog() { yield takeEvery('*', function* logger(action) { const state = yield select() console.log('action', action) console.log('state after', state) }) } select() gives us the state after the reducers have applied the action It is better that sagas don’t to rely on the state, but it is still possible
  124. 124. Summary •Take (takeEvery, takeLast) •Call •Put •Fork & Spawn •Cancel •Channels & EventChannels •All & race •Select
  125. 125. Takeaways • Don’t use sagas until you need to orchestrate complex side effects, but prepare for that moment. • Forget about the sagas paper to use redux-saga. • Generators = friends. Generators + promises = love. • Think how to model your problem with the effects of the lib, or combinations of them.
  126. 126. Thanks! @nacmartin nacho@limenius.com

×