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

JazzCon 2017: State, Side Effects, and Redux. Oh my!

Jeremy Fairbank
March 23, 2017
Programming
0
110

JazzCon 2017: State, Side Effects, and Redux. Oh my!

Jeremy Fairbank

March 23, 2017
Tweet

More Decks by Jeremy Fairbank

See All by Jeremy Fairbank
Connect.Tech 2020: Advanced Cypress Testing
jfairbank
1
120
CodeMash 2020: Solving the Boolean Identity Crisis
jfairbank
1
110
CodeMash 2020: Practical Functional Programming
jfairbank
1
280
Connect.Tech 2019: Practical Functional Programming
jfairbank
0
220
Connect.Tech 2019: Solving the Boolean Identity Crisis
jfairbank
0
140
Lambda Squared 2019: Solving the Boolean Identity Crisis
jfairbank
0
42
All Things Open 2018: Practical Functional Programming
jfairbank
2
230
Connect.Tech 2018: Effective React Testing
jfairbank
1
110
Fluent Conf 2018: Building web apps with Elm Tutorial
jfairbank
2
710

Other Decks in Programming

See All in Programming
Showkase、Paparazziを用いたビジュアルリグレッションテストの導入にチャレンジした話 / MoT TechTalk #15
mot_techtalk
0
130
Unity+C#で学ぶ！ メモリレイアウトとvtableのすゝめ 〜動的ポリモーフィズムを実現する仕組み〜
rossam
1
350
監視せなあかんし、五大紙だけにオオカミってな🐺🐺🐺🐺🐺
sadnessojisan
2
1.6k
SwiftPMのPlugin入門 / introduction_to_swiftpm_plugin
uhooi
2
110
ポケモンで学ぶiOS 16弾丸ツアー 🚅
giginet
PRO
1
620
Swift Expression Macros: a practical introduction
kishikawakatsumi
2
740
Circuit⚡
monaapk
0
200
Hatena Engineer Seminar #23「新卒研修で気軽に『ありがとう』を伝え合える Slack アプリを開発した話」
slashnephy
0
380
Hono v3 - Do Everything, Run Anywhere, But Small, And Faster
yusukebe
4
140
まだ日本国内で利用できないAppActionsにトライしてみた / MoT TechTalk #15
mot_techtalk
0
140
Enumを自動で網羅的にテストしてみた
estie
0
1.3k
CDKでValidationする本当の方法 / cdk-validation
gotok365
1
230

Featured

See All Featured
Building Flexible Design Systems
yeseniaperezcruz
314
35k
BBQ
matthewcrist
75
8.1k
The Invisible Side of Design
smashingmag
292
48k
Into the Great Unknown - MozCon
thekraken
2
300
StorybookのUI Testing Handbookを読んだ
zakiyama
8
3.2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
152
13k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
351
21k
A Modern Web Designer's Workflow
chriscoyier
689
180k
10 Git Anti Patterns You Should be Aware of
lemiorhan
643
54k
Adopting Sorbet at Scale
ufuk
65
7.8k
Designing Experiences People Love
moore
130
22k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
10
1.3k

Transcript

  1. State, Side Effects, and Redux Oh my! Jeremy Fairbank @elpapapollo

    / jfairbank

  2. sigient.com

  3. State

  4. Controller View Model Model Model Model Model View View View

    View MVC

  5. View Model Model Model Model Model View Model View Model

    View Model View Model Model Two-way Data Binding

  6. Disorganized Changes {...}

  7. ?

  8. None

  9. Redux Unidirectional Organized changes Read-only state

  10. Reducer View State Actions

  11. Reducer View State Actions

  12. Reducer View State Actions

  13. Reducer View React, Angular, Vue, Vanilla JS, etc. State Actions

  14. Reducer View State Actions Dispatch

  15. Reducer View State Actions Repeat

  16. Store Reducer State View

  17. Store Reducer State View

  18. Store Reducer State View

  19. Store Reducer State View

  20. Store Reducer State View Action

  21. Store Reducer State View Action

  22. Store Reducer State View

  23. Store Reducer State View

  24. Store Reducer State View

  25. Store Reducer State View

  26. let state = 0; incrementBtn.addEventListener('click', () => { state +=

    1; }); decrementBtn.addEventListener('click', () => { state -= 1; });

  27. let state = 0; incrementBtn.addEventListener('click', () => { state +=

    1; }); decrementBtn.addEventListener('click', () => { state -= 1; });

  28. let state = 0; incrementBtn.addEventListener('click', () => { state +=

    1; }); decrementBtn.addEventListener('click', () => { state -= 1; });

  29. let state = 0; state += 1; state += 1;

    state -= 1; console.log(state); // 1

  30. let state = 0; state += 1; state += 1;

    state -= 1; console.log(state); // 1

  31. let state = 0; state += 1; state += 1;

    state -= 1; console.log(state); // 1 { type: 'INCREMENT' }; { type: 'INCREMENT' }; { type: 'DECREMENT' };

  32. let state = 0; state += 1; state += 1;

    state -= 1; console.log(state); // 1 { type: 'INCREMENT' }; { type: 'INCREMENT' }; { type: 'DECREMENT' }; Action

  33. Reducer

  34. let state = 0; state = reducer(state, { type: 'INCREMENT'

    }); state = reducer(state, { type: 'INCREMENT' }); state = reducer(state, { type: 'DECREMENT' }); console.log(state); // 1

  35. let state = 0; state = reducer(state, { type: 'INCREMENT'

    }); state = reducer(state, { type: 'INCREMENT' }); state = reducer(state, { type: 'DECREMENT' }); console.log(state); // 1

  36. let state = 0; state = reducer(state, { type: 'INCREMENT'

    }); state = reducer(state, { type: 'INCREMENT' }); state = reducer(state, { type: 'DECREMENT' }); console.log(state); // 1

  37. let state = 0; state = reducer(state, { type: 'INCREMENT'

    }); state = reducer(state, { type: 'INCREMENT' }); state = reducer(state, { type: 'DECREMENT' }); console.log(state); // 1

  38. let state = 0; state = reducer(state, { type: 'INCREMENT'

    }); state = reducer(state, { type: 'INCREMENT' }); state = reducer(state, { type: 'DECREMENT' }); console.log(state); // 1 Action

  39. let state = 0; state = reducer(state, { type: 'INCREMENT'

    }); state = reducer(state, { type: 'INCREMENT' }); state = reducer(state, { type: 'DECREMENT' }); console.log(state); // 1

  40. let state = 0; state = reducer(state, { type: 'INCREMENT'

    }); state = reducer(state, { type: 'INCREMENT' }); state = reducer(state, { type: 'DECREMENT' }); console.log(state); // 1

  41. let state = 0; state = reducer(state, { type: 'INCREMENT'

    }); state = reducer(state, { type: 'INCREMENT' }); state = reducer(state, { type: 'DECREMENT' }); console.log(state); // 1

  42. let state = 0; state = reducer(state, { type: 'INCREMENT'

    }); state = reducer(state, { type: 'INCREMENT' }); state = reducer(state, { type: 'DECREMENT' }); console.log(state); // 1

  43. function reducer(state = 0, action) { switch (action.type) { case

    'INCREMENT': return state + 1; case 'DECREMENT': return state - 1; default: return state; } }

  44. function reducer(state = 0, action) { switch (action.type) { case

    'INCREMENT': return state + 1; case 'DECREMENT': return state - 1; default: return state; } }

  45. function reducer(state = 0, action) { switch (action.type) { case

    'INCREMENT': return state + 1; case 'DECREMENT': return state - 1; default: return state; } }

  46. function reducer(state = 0, action) { switch (action.type) { case

    'INCREMENT': return state + 1; case 'DECREMENT': return state - 1; default: return state; } }

  47. function reducer(state = 0, action) { switch (action.type) { case

    'INCREMENT': return state + 1; case 'DECREMENT': return state - 1; default: return state; } }

  48. function reducer(state = 0, action) { switch (action.type) { case

    'INCREMENT': return state + 1; case 'DECREMENT': return state - 1; default: return state; } }

  49. function reducer(state = 0, action) { switch (action.type) { case

    'INCREMENT': return state + 1; case 'DECREMENT': return state - 1; default: return state; } }

  50. Store

  51. import { createStore } from 'redux'; const store = createStore(reducer);

    store.getState(); // 0

  52. import { createStore } from 'redux'; const store = createStore(reducer);

    store.getState(); // 0

  53. import { createStore } from 'redux'; const store = createStore(reducer);

    store.getState(); // 0

  54. import { createStore } from 'redux'; const store = createStore(reducer);

    store.getState(); // 0

  55. store.dispatch({ type: 'INCREMENT' }); store.dispatch({ type: 'INCREMENT' }); store.dispatch({ type:

    'DECREMENT' }); store.getState(); // 1

  56. store.dispatch({ type: 'INCREMENT' }); store.dispatch({ type: 'INCREMENT' }); store.dispatch({ type:

    'DECREMENT' }); store.getState(); // 1

  57. store.dispatch({ type: 'INCREMENT' }); store.dispatch({ type: 'INCREMENT' }); store.dispatch({ type:

    'DECREMENT' }); store.getState(); // 1

  58. store.dispatch({ type: 'INCREMENT' }); store.dispatch({ type: 'INCREMENT' }); store.dispatch({ type:

    'DECREMENT' }); store.getState(); // 1

  59. store.subscribe(() => { console.log('state =', store.getState()); }); store.dispatch({ type: 'INCREMENT'

    }); store.dispatch({ type: 'INCREMENT' }); store.dispatch({ type: 'DECREMENT' }); // state = 1 // state = 2 // state = 1

  60. store.subscribe(() => { console.log('state =', store.getState()); }); store.dispatch({ type: 'INCREMENT'

    }); store.dispatch({ type: 'INCREMENT' }); store.dispatch({ type: 'DECREMENT' }); // state = 1 // state = 2 // state = 1

  61. store.subscribe(() => { console.log('state =', store.getState()); }); store.dispatch({ type: 'INCREMENT'

    }); store.dispatch({ type: 'INCREMENT' }); store.dispatch({ type: 'DECREMENT' }); // state = 1 // state = 2 // state = 1

  62. store.subscribe(() => { console.log('state =', store.getState()); }); store.dispatch({ type: 'INCREMENT'

    }); store.dispatch({ type: 'INCREMENT' }); store.dispatch({ type: 'DECREMENT' }); // state = 1 // state = 2 // state = 1

  63. Action Creators

  64. const increment = () => ({ type: 'INCREMENT', }); const

    decrement = () => ({ type: 'DECREMENT', });

  65. const increment = () => ({ type: 'INCREMENT', }); const

    decrement = () => ({ type: 'DECREMENT', });

  66. const increment = () => ({ type: 'INCREMENT', }); const

    decrement = () => ({ type: 'DECREMENT', });

  67. const unsubscribe = store.subscribe(() => { console.log('state =', store.getState()); });

    store.dispatch(increment()); store.dispatch(increment()); store.dispatch(decrement()); // state = 1 // state = 2 // state = 1

  68. const unsubscribe = store.subscribe(() => { console.log('state =', store.getState()); });

    store.dispatch(increment()); store.dispatch(increment()); store.dispatch(decrement()); // state = 1 // state = 2 // state = 1

  69. import { bindActionCreators } from 'redux'; const actions = bindActionCreators(

    { increment, decrement }, store.dispatch ); actions.increment(); actions.increment(); actions.decrement(); // state = 1 // state = 2 // state = 1

  70. import { bindActionCreators } from 'redux'; const actions = bindActionCreators(

    { increment, decrement }, store.dispatch ); actions.increment(); actions.increment(); actions.decrement(); // state = 1 // state = 2 // state = 1

  71. import { bindActionCreators } from 'redux'; const actions = bindActionCreators(

    { increment, decrement }, store.dispatch ); actions.increment(); actions.increment(); actions.decrement(); // state = 1 // state = 2 // state = 1

  72. import { bindActionCreators } from 'redux'; const actions = bindActionCreators(

    { increment, decrement }, store.dispatch ); actions.increment(); actions.increment(); actions.decrement(); // state = 1 // state = 2 // state = 1

  73. import { bindActionCreators } from 'redux'; const actions = bindActionCreators(

    { increment, decrement }, store.dispatch ); actions.increment(); actions.increment(); actions.decrement(); // state = 1 // state = 2 // state = 1

  74. incrementBtn.addEventListener('click', actions.increment); decrementBtn.addEventListener('click', actions.decrement); store.subscribe(() => { counterElement.innerHTML = store.getState();

    }); incrementBtn.click(); incrementBtn.click(); decrementBtn.click(); console.log(counterElement.innerHTML); // 1

  75. incrementBtn.addEventListener('click', actions.increment); decrementBtn.addEventListener('click', actions.decrement); store.subscribe(() => { counterElement.innerHTML = store.getState();

    }); incrementBtn.click(); incrementBtn.click(); decrementBtn.click(); console.log(counterElement.innerHTML); // 1

  76. incrementBtn.addEventListener('click', actions.increment); decrementBtn.addEventListener('click', actions.decrement); store.subscribe(() => { counterElement.innerHTML = store.getState();

    }); incrementBtn.click(); incrementBtn.click(); decrementBtn.click(); console.log(counterElement.innerHTML); // 1

  77. incrementBtn.addEventListener('click', actions.increment); decrementBtn.addEventListener('click', actions.decrement); store.subscribe(() => { counterElement.innerHTML = store.getState();

    }); incrementBtn.click(); incrementBtn.click(); decrementBtn.click(); console.log(counterElement.innerHTML); // 1

  78. incrementBtn.addEventListener('click', actions.increment); decrementBtn.addEventListener('click', actions.decrement); store.subscribe(() => { counterElement.innerHTML = store.getState();

    }); incrementBtn.click(); incrementBtn.click(); decrementBtn.click(); console.log(counterElement.innerHTML); // 1

  79. Immutable Object State

  80. const initialState = { counter: 0, car: { color: 'red',

    }, };

  81. const initialState = { counter: 0, car: { color: 'red',

    }, };

  82. const initialState = { counter: 0, car: { color: 'red',

    }, };

  83. function reducer(state = initialState, action) { switch (action.type) { case

    'INCREMENT': return { ...state, counter: state.counter + 1 }; case 'DECREMENT': return { ...state, counter: state.counter - 1 }; case 'CHANGE_COLOR': return { ...state, car: { color: action.payload } }; default: return state; } }

  84. function reducer(state = initialState, action) { switch (action.type) { case

    'INCREMENT': return { ...state, counter: state.counter + 1 }; case 'DECREMENT': return { ...state, counter: state.counter - 1 }; case 'CHANGE_COLOR': return { ...state, car: { color: action.payload } }; default: return state; } }

  85. function reducer(state = initialState, action) { switch (action.type) { case

    'INCREMENT': return { ...state, counter: state.counter + 1 }; case 'DECREMENT': return { ...state, counter: state.counter - 1 }; case 'CHANGE_COLOR': return { ...state, car: { color: action.payload } }; default: return state; } }

  86. function reducer(state = initialState, action) { switch (action.type) { case

    'INCREMENT': return { ...state, counter: state.counter + 1 }; case 'DECREMENT': return { ...state, counter: state.counter - 1 }; case 'CHANGE_COLOR': return { ...state, car: { color: action.payload } }; default: return state; } }

  87. function reducer(state = initialState, action) { switch (action.type) { case

    'INCREMENT': return { ...state, counter: state.counter + 1 }; case 'DECREMENT': return { ...state, counter: state.counter - 1 }; case 'CHANGE_COLOR': return { ...state, car: { color: action.payload } }; default: return state; } }

  88. function reducer(state = initialState, action) { switch (action.type) { case

    'INCREMENT': return { ...state, counter: state.counter + 1 }; case 'DECREMENT': return { ...state, counter: state.counter - 1 }; case 'CHANGE_COLOR': return { ...state, car: { color: action.payload } }; default: return state; } }

  89. const increment = () => ({ type: 'INCREMENT', }); const

    decrement = () => ({ type: 'DECREMENT', }); const changeColor = color => ({ type: 'CHANGE_COLOR', payload: color, });

  90. const increment = () => ({ type: 'INCREMENT', }); const

    decrement = () => ({ type: 'DECREMENT', }); const changeColor = color => ({ type: 'CHANGE_COLOR', payload: color, });

  91. const increment = () => ({ type: 'INCREMENT', }); const

    decrement = () => ({ type: 'DECREMENT', }); const changeColor = color => ({ type: 'CHANGE_COLOR', payload: color, });

  92. store.subscribe(() => { console.log('state =', store.getState()); }); store.dispatch(increment()); store.dispatch(changeColor('green')); //

    state = { counter: 1, car: { color: 'red' } } // state = { counter: 1, car: { color: 'green' } }

  93. store.subscribe(() => { console.log('state =', store.getState()); }); store.dispatch(increment()); store.dispatch(changeColor('green')); //

    state = { counter: 1, car: { color: 'red' } } // state = { counter: 1, car: { color: 'green' } }

  94. store.subscribe(() => { console.log('state =', store.getState()); }); store.dispatch(increment()); store.dispatch(changeColor('green')); //

    state = { counter: 1, car: { color: 'red' } } // state = { counter: 1, car: { color: 'green' } }

  95. Middleware

  96. Reducer View State Actions Middleware

  97. Reducer View State Actions Middleware Intercept

  98. const logMiddleware = api => next => action => {

    console.log('dispatch', action); const result = next(action); console.log('state =', api.getState()); return result; };

  99. const logMiddleware = api => next => action => {

    console.log('dispatch', action); const result = next(action); console.log('state =', api.getState()); return result; };

  100. const logMiddleware = api => next => action => {

    console.log('dispatch', action); const result = next(action); console.log('state =', api.getState()); return result; };

  101. const logMiddleware = api => next => action => {

    console.log('dispatch', action); const result = next(action); console.log('state =', api.getState()); return result; };

  102. const logMiddleware = api => next => action => {

    console.log('dispatch', action); const result = next(action); console.log('state =', api.getState()); return result; };

  103. const logMiddleware = api => next => action => {

    console.log('dispatch', action); const result = next(action); console.log('state =', api.getState()); return result; };

  104. const logMiddleware = api => next => action => {

    console.log('dispatch', action); const result = next(action); console.log('state =', api.getState()); return result; };

  105. const logMiddleware = api => next => action => {

    console.log('dispatch', action); const result = next(action); console.log('state =', api.getState()); return result; };

  106. const logMiddleware = api => next => action => {

    console.log('dispatch', action); const result = next(action); console.log('state =', api.getState()); return result; };

  107. import { applyMiddleware } from 'redux'; const store = createStore(

    reducer, applyMiddleware(logMiddleware) ); store.dispatch(increment()); store.dispatch(changeColor('green')); // dispatch { type: 'INCREMENT' } // state = { counter: 1, car: { color: 'red' } } // dispatch { type: 'CHANGE_COLOR', payload: 'green' } // state = { counter: 1, car: { color: 'green' } }

  108. import { applyMiddleware } from 'redux'; const store = createStore(

    reducer, applyMiddleware(logMiddleware) ); store.dispatch(increment()); store.dispatch(changeColor('green')); // dispatch { type: 'INCREMENT' } // state = { counter: 1, car: { color: 'red' } } // dispatch { type: 'CHANGE_COLOR', payload: 'green' } // state = { counter: 1, car: { color: 'green' } }

  109. import { applyMiddleware } from 'redux'; const store = createStore(

    reducer, applyMiddleware(logMiddleware) ); store.dispatch(increment()); store.dispatch(changeColor('green')); // dispatch { type: 'INCREMENT' } // state = { counter: 1, car: { color: 'red' } } // dispatch { type: 'CHANGE_COLOR', payload: 'green' } // state = { counter: 1, car: { color: 'green' } }

  110. import { applyMiddleware } from 'redux'; const store = createStore(

    reducer, applyMiddleware(logMiddleware) ); store.dispatch(increment()); store.dispatch(changeColor('green')); // dispatch { type: 'INCREMENT' } // state = { counter: 1, car: { color: 'red' } } // dispatch { type: 'CHANGE_COLOR', payload: 'green' } // state = { counter: 1, car: { color: 'green' } }

  111. import { applyMiddleware } from 'redux'; const store = createStore(

    reducer, applyMiddleware(logMiddleware) ); store.dispatch(increment()); store.dispatch(changeColor('green')); // dispatch { type: 'INCREMENT' } // state = { counter: 1, car: { color: 'red' } } // dispatch { type: 'CHANGE_COLOR', payload: 'green' } // state = { counter: 1, car: { color: 'green' } }

  112. Side Effects I/O Mutable State

  113. const initialState = { users: [], isFetching: false, };

  114. function reducer(state = initialState, action) { switch (action.type) { case

    'REQUEST_USERS': return { ...state, isFetching: true }; case 'RECEIVE_USERS': return { ...state, isFetching: false, users: action.payload, }; default: return state; } }

  115. function reducer(state = initialState, action) { switch (action.type) { case

    'REQUEST_USERS': return { ...state, isFetching: true }; case 'RECEIVE_USERS': return { ...state, isFetching: false, users: action.payload, }; default: return state; } }

  116. function reducer(state = initialState, action) { switch (action.type) { case

    'REQUEST_USERS': return { ...state, isFetching: true }; case 'RECEIVE_USERS': return { ...state, isFetching: false, users: action.payload, }; default: return state; } }

  117. const requestUsers = () => ({ type: 'REQUEST_USERS', }); const

    receiveUsers = users => ({ type: 'RECEIVE_USERS', payload: users, });

  118. const thunkMiddleware = api => next => action => {

    if (typeof action === 'function') { return action(api.dispatch); } return next(action); }; const store = createStore( reducer, applyMiddleware(thunkMiddleware) );

  119. const thunkMiddleware = api => next => action => {

    if (typeof action === 'function') { return action(api.dispatch); } return next(action); }; const store = createStore( reducer, applyMiddleware(thunkMiddleware) );

  120. const thunkMiddleware = api => next => action => {

    if (typeof action === 'function') { return action(api.dispatch); } return next(action); }; const store = createStore( reducer, applyMiddleware(thunkMiddleware) );

  121. const thunkMiddleware = api => next => action => {

    if (typeof action === 'function') { return action(api.dispatch); } return next(action); }; const store = createStore( reducer, applyMiddleware(thunkMiddleware) );

  122. function fetchUsers() { return dispatch => { dispatch(requestUsers()); return axios.get('/users')

    .then(({ data }) => { dispatch(receiveUsers(data)); }); }; } store.dispatch(fetchUsers());

  123. function fetchUsers() { return dispatch => { dispatch(requestUsers()); return axios.get('/users')

    .then(({ data }) => { dispatch(receiveUsers(data)); }); }; } store.dispatch(fetchUsers()); Action Creator

  124. function fetchUsers() { return dispatch => { dispatch(requestUsers()); return axios.get('/users')

    .then(({ data }) => { dispatch(receiveUsers(data)); }); }; } store.dispatch(fetchUsers()); Action

  125. function fetchUsers() { return dispatch => { dispatch(requestUsers()); return axios.get('/users')

    .then(({ data }) => { dispatch(receiveUsers(data)); }); }; } store.dispatch(fetchUsers());
  126. None

  127. Reducer View State Actions Middleware Redux Saga

  128. Reducer View State Actions Middleware Redux Saga

  129. Reducer View State Actions Middleware Redux Saga

  130. Reducer View State Actions Middleware Redux Saga

  131. Effect Descriptors take('SOME_ACTION_TYPE') call(someAsyncFunction) put(someAction()) fork(someSagaFunction) Just values

  132. Redux Saga Sagas

  133. Redux Saga Sagas

  134. Redux Saga Sagas

  135. Redux Saga Sagas IO APIs Console DB call, apply

  136. Redux Saga Sagas IO APIs Console DB call, apply call,

    apply, fork, spawn, join, cancel

  137. Redux Saga Sagas IO APIs Console DB call, apply call,

    apply, fork, spawn, join, cancel Redux Store put, select, take

  138. Generator Functions

  139. function* myGenerator() { yield 'hello'; const value = yield 'world';

    return value * 2; }

  140. function* myGenerator() { yield 'hello'; const value = yield 'world';

    return value * 2; }

  141. function* myGenerator() { yield 'hello'; const value = yield 'world';

    return value * 2; }

  142. function* myGenerator() { yield 'hello'; const value = yield 'world';

    return value * 2; }

  143. function* myGenerator() { yield 'hello'; const value = yield 'world';

    return value * 2; } const iterator = myGenerator(); iterator.next(); // { value: 'hello', done: false }

  144. function* myGenerator() { yield 'hello'; const value = yield 'world';

    return value * 2; } const iterator = myGenerator(); iterator.next(); // { value: 'hello', done: false }

  145. function* myGenerator() { yield 'hello'; const value = yield 'world';

    return value * 2; } const iterator = myGenerator(); iterator.next(); // { value: 'hello', done: false }

  146. function* myGenerator() { yield 'hello'; const value = yield 'world';

    return value * 2; } const iterator = myGenerator(); iterator.next(); // { value: 'hello', done: false }

  147. function* myGenerator() { yield 'hello'; const value = yield 'world';

    return value * 2; } const iterator = myGenerator(); iterator.next(); // { value: 'hello', done: false }

  148. function* myGenerator() { yield 'hello'; const value = yield 'world';

    return value * 2; } iterator.next(); // { value: 'world', done: false }

  149. function* myGenerator() { yield 'hello'; const value = yield 'world';

    return value * 2; } iterator.next(); // { value: 'world', done: false }

  150. function* myGenerator() { yield 'hello'; const value = yield 'world';

    return value * 2; } iterator.next(21); // { value: 42, done: true }

  151. function* myGenerator() { yield 'hello'; const value = yield 'world';

    return value * 2; } iterator.next(21); // { value: 42, done: true }

  152. function* myGenerator() { yield 'hello'; const value = yield 'world';

    return value * 2; } iterator.next(21); // { value: 42, done: true }

  153. function* myGenerator() { yield 'hello'; const value = yield 'world';

    return value * 2; } iterator.next(); // { value: undefined, done: true }

  154. function* myGenerator() { yield 'hello'; const value = yield 'world';

    return value * 2; } iterator.next(); // { value: undefined, done: true }

  155. function* myGenerator() { yield 'hello'; const value = yield 'world';

    return value * 2; } iterator.next(); // { value: undefined, done: true }

  156. import { call, put, take } from 'redux-saga/effects'; function* fetchUsersSaga()

    { yield take('REQUEST_USERS'); const response = yield call(axios.get, '/users'); yield put(receiveUsers(response.data)); } store.dispatch(requestUsers());

  157. import { call, put, take } from 'redux-saga/effects'; function* fetchUsersSaga()

    { yield take('REQUEST_USERS'); const response = yield call(axios.get, '/users'); yield put(receiveUsers(response.data)); } store.dispatch(requestUsers());

  158. import { call, put, take } from 'redux-saga/effects'; function* fetchUsersSaga()

    { yield take('REQUEST_USERS'); const response = yield call(axios.get, '/users'); yield put(receiveUsers(response.data)); } store.dispatch(requestUsers());

  159. import { call, put, take } from 'redux-saga/effects'; function* fetchUsersSaga()

    { yield take('REQUEST_USERS'); const response = yield call(axios.get, '/users'); yield put(receiveUsers(response.data)); } store.dispatch(requestUsers());

  160. import { call, put, take } from 'redux-saga/effects'; function* fetchUsersSaga()

    { yield take('REQUEST_USERS'); const response = yield call(axios.get, '/users'); yield put(receiveUsers(response.data)); } store.dispatch(requestUsers());

  161. import { call, put, take } from 'redux-saga/effects'; function* fetchUsersSaga()

    { yield take('REQUEST_USERS'); const response = yield call(axios.get, '/users'); yield put(receiveUsers(response.data)); } store.dispatch(requestUsers());

  162. import { call, put, take } from 'redux-saga/effects'; function* fetchUsersSaga()

    { yield take('REQUEST_USERS'); const response = yield call(axios.get, '/users'); yield put(receiveUsers(response.data)); } store.dispatch(requestUsers());

  163. import { call, put, take } from 'redux-saga/effects'; function* fetchUsersSaga()

    { yield take('REQUEST_USERS'); const response = yield call(axios.get, '/users'); yield put(receiveUsers(response.data)); } store.dispatch(requestUsers());

  164. import { call, put, take } from 'redux-saga/effects'; function* fetchUsersSaga()

    { yield take('REQUEST_USERS'); const response = yield call(axios.get, '/users'); yield put(receiveUsers(response.data)); } store.dispatch(requestUsers());

  165. Saga Redux Saga yield take('REQUEST_USERS'); 1. Wait for action

  166. Saga Redux Saga View Middleware yield take('REQUEST_USERS'); 2. Receive action

  167. Saga Redux Saga yield call(axios.get, '/users'); 3. Call API

  168. const response = yield call(axios.get, '/users'); Saga Redux Saga 4.

    Receive response

  169. Saga Redux Saga Reducer Redux Store yield put( receiveUsers(response.data) );

    5. Dispatch (put) action

  170. Set Up

  171. import createSagaMiddleware from 'redux-saga'; const sagaMiddleware = createSagaMiddleware(); const store

    = createStore( reducer, applyMiddleware(sagaMiddleware) ); sagaMiddleware.run(fetchUsersSaga);

  172. import createSagaMiddleware from 'redux-saga'; const sagaMiddleware = createSagaMiddleware(); const store

    = createStore( reducer, applyMiddleware(sagaMiddleware) ); sagaMiddleware.run(fetchUsersSaga);

  173. import createSagaMiddleware from 'redux-saga'; const sagaMiddleware = createSagaMiddleware(); const store

    = createStore( reducer, applyMiddleware(sagaMiddleware) ); sagaMiddleware.run(fetchUsersSaga);

  174. import createSagaMiddleware from 'redux-saga'; const sagaMiddleware = createSagaMiddleware(); const store

    = createStore( reducer, applyMiddleware(sagaMiddleware) ); sagaMiddleware.run(fetchUsersSaga);

  175. import createSagaMiddleware from 'redux-saga'; const sagaMiddleware = createSagaMiddleware(); const store

    = createStore( reducer, applyMiddleware(sagaMiddleware) ); sagaMiddleware.run(fetchUsersSaga);

  176. Why Sagas?

  177. Business Logic Spread Out Component Thunk Service Service Component Reducer

  178. Business Logic Spread Out Component Thunk Service Service Component ×

    Reducer

  179. Business Logic Consolidated Saga Saga Saga Saga Saga Saga ✓

  180. Testing

  181. function* fetchUsersSaga() { yield take('REQUEST_USERS'); const response = yield call(axios.get,

    '/users'); yield put(receiveUsers(response.data)); } const saga = fetchUsersSaga(); it('waits for REQUEST_USERS', () => { const actual = saga.next().value; const expected = take('REQUEST_USERS'); expect(actual).toEqual(expected); });

  182. function* fetchUsersSaga() { yield take('REQUEST_USERS'); const response = yield call(axios.get,

    '/users'); yield put(receiveUsers(response.data)); } const saga = fetchUsersSaga(); it('waits for REQUEST_USERS', () => { const actual = saga.next().value; const expected = take('REQUEST_USERS'); expect(actual).toEqual(expected); });

  183. function* fetchUsersSaga() { yield take('REQUEST_USERS'); const response = yield call(axios.get,

    '/users'); yield put(receiveUsers(response.data)); } const saga = fetchUsersSaga(); it('waits for REQUEST_USERS', () => { const actual = saga.next().value; const expected = take('REQUEST_USERS'); expect(actual).toEqual(expected); });

  184. function* fetchUsersSaga() { yield take('REQUEST_USERS'); const response = yield call(axios.get,

    '/users'); yield put(receiveUsers(response.data)); } const saga = fetchUsersSaga(); it('waits for REQUEST_USERS', () => { const actual = saga.next().value; const expected = take('REQUEST_USERS'); expect(actual).toEqual(expected); });

  185. function* fetchUsersSaga() { yield take('REQUEST_USERS'); const response = yield call(axios.get,

    '/users'); yield put(receiveUsers(response.data)); } const saga = fetchUsersSaga(); it('waits for REQUEST_USERS', () => { const actual = saga.next().value; const expected = take('REQUEST_USERS'); expect(actual).toEqual(expected); });

  186. function* fetchUsersSaga() { yield take('REQUEST_USERS'); const response = yield call(axios.get,

    '/users'); yield put(receiveUsers(response.data)); } // ... it('fetches users', () => { const actual = saga.next().value; const expected = call(axios.get, '/users'); expect(actual).toEqual(expected); });

  187. function* fetchUsersSaga() { yield take('REQUEST_USERS'); const response = yield call(axios.get,

    '/users'); yield put(receiveUsers(response.data)); } // ... it('fetches users', () => { const actual = saga.next().value; const expected = call(axios.get, '/users'); expect(actual).toEqual(expected); });

  188. function* fetchUsersSaga() { yield take('REQUEST_USERS'); const response = yield call(axios.get,

    '/users'); yield put(receiveUsers(response.data)); } // ... it('fetches users', () => { const actual = saga.next().value; const expected = call(axios.get, '/users'); expect(actual).toEqual(expected); });

  189. function* fetchUsersSaga() { yield take('REQUEST_USERS'); const response = yield call(axios.get,

    '/users'); yield put(receiveUsers(response.data)); } // ... it('fetches users', () => { const actual = saga.next().value; const expected = call(axios.get, '/users'); expect(actual).toEqual(expected); });

  190. function* fetchUsersSaga() { yield take('REQUEST_USERS'); const response = yield call(axios.get,

    '/users'); yield put(receiveUsers(response.data)); } it('dispatches the users', () => { const users = [{ name: 'Bob' }, { name: 'Alice' }]; const response = { data: users }; const actual = saga.next(response).value; const expected = put(receiveUsers(users)); expect(actual).toEqual(expected); });

  191. function* fetchUsersSaga() { yield take('REQUEST_USERS'); const response = yield call(axios.get,

    '/users'); yield put(receiveUsers(response.data)); } it('dispatches the users', () => { const users = [{ name: 'Bob' }, { name: 'Alice' }]; const response = { data: users }; const actual = saga.next(response).value; const expected = put(receiveUsers(users)); expect(actual).toEqual(expected); });

  192. function* fetchUsersSaga() { yield take('REQUEST_USERS'); const response = yield call(axios.get,

    '/users'); yield put(receiveUsers(response.data)); } it('dispatches the users', () => { const users = [{ name: 'Bob' }, { name: 'Alice' }]; const response = { data: users }; const actual = saga.next(response).value; const expected = put(receiveUsers(users)); expect(actual).toEqual(expected); });

  193. function* fetchUsersSaga() { yield take('REQUEST_USERS'); const response = yield call(axios.get,

    '/users'); yield put(receiveUsers(response.data)); } it('dispatches the users', () => { const users = [{ name: 'Bob' }, { name: 'Alice' }]; const response = { data: users }; const actual = saga.next(response).value; const expected = put(receiveUsers(users)); expect(actual).toEqual(expected); });

  194. function* fetchUsersSaga() { yield take('REQUEST_USERS'); const response = yield call(axios.get,

    '/users'); yield put(receiveUsers(response.data)); } it('dispatches the users', () => { const users = [{ name: 'Bob' }, { name: 'Alice' }]; const response = { data: users }; const actual = saga.next(response).value; const expected = put(receiveUsers(users)); expect(actual).toEqual(expected); });

  195. function* fetchUsersSaga() { yield take('REQUEST_USERS'); const response = yield call(axios.get,

    '/users'); yield put(receiveUsers(response.data)); } it('dispatches the users', () => { const users = [{ name: 'Bob' }, { name: 'Alice' }]; const response = { data: users }; const actual = saga.next(response).value; const expected = put(receiveUsers(users)); expect(actual).toEqual(expected); });

  196. Error Handling

  197. const initialState = { users: [], isFetching: false, error: null,

    };

  198. const initialState = { users: [], isFetching: false, error: null,

    };

  199. const failUsers = error => ({ type: 'FAIL_USERS', error, });

  200. function reducer(state = initialState, action) { switch (action.type) { //

    ... case 'FAIL_USERS': return { ...state, error: action.error }; // ... } }

  201. function reducer(state = initialState, action) { switch (action.type) { //

    ... case 'FAIL_USERS': return { ...state, error: action.error }; // ... } }

  202. function fetchUsers() { return dispatch => { dispatch(requestUsers()); return axios.get('/users')

    .then(({ data }) => { dispatch(receiveUsers(data)); }) .catch((e) => { dispatch(failUsers(e)); }); }; }

  203. function fetchUsers() { return dispatch => { dispatch(requestUsers()); return axios.get('/users')

    .then(({ data }) => { dispatch(receiveUsers(data)); }) .catch((e) => { dispatch(failUsers(e)); }); }; } Swallowed without catch

  204. function* fetchUsersSaga() { yield take('REQUEST_USERS'); const response = yield call(axios.get,

    '/users'); yield put(receiveUsers(response.data)); }

  205. function* fetchUsersSaga() { yield take('REQUEST_USERS'); const response = yield call(axios.get,

    '/users'); yield put(receiveUsers(response.data)); } No swallowed errors

  206. function* fetchUsersSaga() { try { yield take('REQUEST_USERS'); const response =

    yield call(axios.get, '/users'); yield put(receiveUsers(response.data)); } catch (e) { yield put(failUsers(e)); } }

  207. function* fetchUsersSaga() { try { yield take('REQUEST_USERS'); const response =

    yield call(axios.get, '/users'); yield put(receiveUsers(response.data)); } catch (e) { yield put(failUsers(e)); } }

  208. function* fetchUsersSaga() { try { yield take('REQUEST_USERS'); const response =

    yield call(axios.get, '/users'); yield put(receiveUsers(response.data)); } catch (e) { yield put(failUsers(e)); } }

  209. function* fetchUsersSaga() { try { yield take('REQUEST_USERS'); const response =

    yield call(axios.get, '/users'); yield put(receiveUsers(response.data)); } catch (e) { yield put(failUsers(e)); } }

  210. Multiple Requests

  211. function* fetchUsersSaga() { yield take('REQUEST_USERS'); const responses = yield [

    call(axios.get, '/users/1'), call(axios.get, '/users/2'), call(axios.get, '/users/3'), ]; const users = responses.map(resp => resp.data); yield put(receiveUsers(users)); }

  212. function* fetchUsersSaga() { yield take('REQUEST_USERS'); const responses = yield [

    call(axios.get, '/users/1'), call(axios.get, '/users/2'), call(axios.get, '/users/3'), ]; const users = responses.map(resp => resp.data); yield put(receiveUsers(users)); }

  213. function* fetchUsersSaga() { yield take('REQUEST_USERS'); const responses = yield [

    call(axios.get, '/users/1'), call(axios.get, '/users/2'), call(axios.get, '/users/3'), ]; const users = responses.map(resp => resp.data); yield put(receiveUsers(users)); }

  214. function* fetchUsersSaga() { yield take('REQUEST_USERS'); const responses = yield [

    call(axios.get, '/users/1'), call(axios.get, '/users/2'), call(axios.get, '/users/3'), ]; const users = responses.map(resp => resp.data); yield put(receiveUsers(users)); }

  215. Saga yield [ call(axios.get, '/users/1'), call(axios.get, '/users/2'), call(axios.get, '/users/3'), ];

    // ...

  216. Saga yield [ call(axios.get, '/users/1'), call(axios.get, '/users/2'), call(axios.get, '/users/3'), ];

    // ... 1 2 3

  217. Saga yield [ call(axios.get, '/users/1'), call(axios.get, '/users/2'), call(axios.get, '/users/3'), ];

    // ... 1 2 3

  218. Saga yield [ call(axios.get, '/users/1'), call(axios.get, '/users/2'), call(axios.get, '/users/3'), ];

    // ... 1 3

  219. Saga yield [ call(axios.get, '/users/1'), call(axios.get, '/users/2'), call(axios.get, '/users/3'), ];

    // ... 3

  220. Saga Helpers

  221. function* fetchUsersSaga() { const response = yield call(axios.get, '/users'); yield

    put(receiveUsers(response.data)); } function* mainSaga() { while (true) { yield take('REQUEST_USERS'); yield call(fetchUsersSaga); } }

  222. function* fetchUsersSaga() { const response = yield call(axios.get, '/users'); yield

    put(receiveUsers(response.data)); } function* mainSaga() { while (true) { yield take('REQUEST_USERS'); yield call(fetchUsersSaga); } }

  223. import { takeEvery } from 'redux-saga/effects'; function* fetchUsersSaga() { const

    response = yield call(axios.get, '/users'); yield put(receiveUsers(response.data)); } function* mainSaga() { yield takeEvery('REQUEST_USERS', fetchUsersSaga); }

  224. import { takeEvery } from 'redux-saga/effects'; function* fetchUsersSaga() { const

    response = yield call(axios.get, '/users'); yield put(receiveUsers(response.data)); } function* mainSaga() { yield takeEvery('REQUEST_USERS', fetchUsersSaga); }

  225. import { takeEvery } from 'redux-saga/effects'; function* fetchUsersSaga() { const

    response = yield call(axios.get, '/users'); yield put(receiveUsers(response.data)); } function* mainSaga() { yield takeEvery('REQUEST_USERS', fetchUsersSaga); }

  226. import { takeEvery } from 'redux-saga/effects'; function* fetchUsersSaga() { const

    response = yield call(axios.get, '/users'); yield put(receiveUsers(response.data)); } function* mainSaga() { yield takeEvery('REQUEST_USERS', fetchUsersSaga); }

  227. import { takeEvery } from 'redux-saga/effects'; function* fetchUsersSaga() { const

    response = yield call(axios.get, '/users'); yield put(receiveUsers(response.data)); } function* mainSaga() { yield takeEvery('REQUEST_USERS', fetchUsersSaga); }

  228. mainSaga fetchUsersSaga yield takeEvery( 'REQUEST_USERS', fetchUsersSaga );

  229. View Middleware store.dispatch( requestUsers() ); mainSaga fetchUsersSaga

  230. mainSaga fetchUsersSaga fork

  231. mainSaga fetchUsersSaga yield call( axios.get, '/users' );

  232. mainSaga fetchUsersSaga const response = yield call( axios.get, '/users' );

  233. mainSaga fetchUsersSaga yield put( receiveUsers( response.data ) ); Reducer Redux

    Store

  234. mainSaga fetchUsersSaga yield takeEvery( 'REQUEST_USERS', fetchUsersSaga ); And repeat…

  235. Data Race Issues Use alternative takeLatest

  236. Forking

  237. function* mainSaga() { yield take('REQUEST_USERS'); yield call(fetchUsersSaga); yield take('LOGOUT'); yield

    call(logoutSaga); } store.dispatch(requestUsers()); store.dispatch(logout());

  238. function* mainSaga() { yield take('REQUEST_USERS'); yield call(fetchUsersSaga); yield take('LOGOUT'); yield

    call(logoutSaga); } store.dispatch(requestUsers()); store.dispatch(logout());

  239. function* mainSaga() { yield take('REQUEST_USERS'); yield call(fetchUsersSaga); yield take('LOGOUT'); yield

    call(logoutSaga); } store.dispatch(requestUsers()); store.dispatch(logout());

  240. function* mainSaga() { yield take('REQUEST_USERS'); yield call(fetchUsersSaga); yield take('LOGOUT'); yield

    call(logoutSaga); } store.dispatch(requestUsers()); store.dispatch(logout());

  241. function* mainSaga() { yield take('REQUEST_USERS'); yield call(fetchUsersSaga); yield take('LOGOUT'); yield

    call(logoutSaga); } store.dispatch(requestUsers()); store.dispatch(logout());

  242. function* mainSaga() { yield take('REQUEST_USERS'); yield call(fetchUsersSaga); yield take('LOGOUT'); yield

    call(logoutSaga); } store.dispatch(requestUsers()); store.dispatch(logout()); Missed

  243. function* mainSaga() { yield take('REQUEST_USERS'); yield call(fetchUsersSaga); yield take('LOGOUT'); yield

    call(logoutSaga); } store.dispatch(requestUsers()); store.dispatch(logout()); Missed Never reached

  244. mainSaga yield take( 'REQUEST_USERS' );

  245. View Middleware store.dispatch( requestUsers() ); mainSaga

  246. mainSaga fetchUsersSaga call

  247. mainSaga fetchUsersSaga call yield call( fetchUsersSaga );

  248. mainSaga fetchUsersSaga call View Middleware store.dispatch( logout() ); ×

  249. import { fork } from 'redux-saga/effects'; function* fetchUsersSaga() { yield

    take('REQUEST_USERS'); const response = yield call(axios.get, '/users'); yield put(receiveUsers(response.data)); } function* mainSaga() { yield fork(fetchUsersSaga); yield take('LOGOUT'); yield call(logoutSaga); }

  250. import { fork } from 'redux-saga/effects'; function* fetchUsersSaga() { yield

    take('REQUEST_USERS'); const response = yield call(axios.get, '/users'); yield put(receiveUsers(response.data)); } function* mainSaga() { yield fork(fetchUsersSaga); yield take('LOGOUT'); yield call(logoutSaga); }

  251. import { fork } from 'redux-saga/effects'; function* fetchUsersSaga() { yield

    take('REQUEST_USERS'); const response = yield call(axios.get, '/users'); yield put(receiveUsers(response.data)); } function* mainSaga() { yield fork(fetchUsersSaga); yield take('LOGOUT'); yield call(logoutSaga); } Nonblocking

  252. import { fork } from 'redux-saga/effects'; function* fetchUsersSaga() { yield

    take('REQUEST_USERS'); const response = yield call(axios.get, '/users'); yield put(receiveUsers(response.data)); } function* mainSaga() { yield fork(fetchUsersSaga); yield take('LOGOUT'); yield call(logoutSaga); }

  253. import { fork } from 'redux-saga/effects'; function* fetchUsersSaga() { yield

    take('REQUEST_USERS'); const response = yield call(axios.get, '/users'); yield put(receiveUsers(response.data)); } function* mainSaga() { yield fork(fetchUsersSaga); yield take('LOGOUT'); yield call(logoutSaga); } Won’t miss now

  254. mainSaga

  255. mainSaga fetchUsersSaga fork yield fork( fetchUsersSaga );

  256. View Middleware store.dispatch( requestUsers() ); mainSaga fetchUsersSaga

  257. mainSaga fetchUsersSaga yield call( axios.get, '/users' );

  258. mainSaga fetchUsersSaga yield take( 'LOGOUT' );

  259. mainSaga fetchUsersSaga View Middleware store.dispatch( logout() );

  260. Miscellaneous Patterns

  261. Miscellaneous Patterns • Autosaving background tasks

  262. Miscellaneous Patterns • Autosaving background tasks • Races for timeouts

  263. Miscellaneous Patterns • Autosaving background tasks • Races for timeouts

    • Task cancellation

  264. Miscellaneous Patterns • Autosaving background tasks • Races for timeouts

    • Task cancellation • Throttling and debouncing

  265. Miscellaneous Patterns • Autosaving background tasks • Races for timeouts

    • Task cancellation • Throttling and debouncing • Hook up to other IO sources

  266. Resources •Redux • redux.js.org • egghead.io/courses/getting-started-with-redux •React • github.com/reactjs/react-redux •Redux

    Saga • redux-saga.github.io/redux-saga • Testing • github.com/jfairbank/redux-saga-test-plan

  267. Thanks! Code: github.com/jfairbank/state-side-effects-and-redux Slides: bit.ly/jazzcon-redux Jeremy Fairbank @elpapapollo / jfairbank