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

Transcript

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

   View Slide

2. sigient.com
   

   View Slide

3. State
   

   View Slide

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

   View Slide

5. View
   Model
   Model
   Model
   Model
   Model
   View
   Model
   View
   Model
   View
   Model
   View
   Model
   Model
   Two-way Data Binding
   

   View Slide

6. Disorganized Changes
   {...}
   

   View Slide

7. ?
   

   View Slide

8. View Slide

9. Redux
   Unidirectional
   Organized changes
   Read-only state
   

   View Slide

10. Reducer
    View
    State
    Actions
    

    View Slide

11. Reducer
    View
    State
    Actions
    

    View Slide

12. Reducer
    View
    State
    Actions
    

    View Slide

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

    View Slide

14. Reducer
    View
    State
    Actions
    Dispatch
    

    View Slide

15. Reducer
    View
    State
    Actions
    Repeat
    

    View Slide

16. Store
    Reducer
    State
    View
    

    View Slide

17. Store
    Reducer
    State
    View
    

    View Slide

18. Store
    Reducer
    State
    View
    

    View Slide

19. Store
    Reducer
    State
    View
    

    View Slide

20. Store
    Reducer
    State
    View
    Action
    

    View Slide

21. Store
    Reducer
    State
    View
    Action
    

    View Slide

22. Store
    Reducer
    State
    View
    

    View Slide

23. Store
    Reducer
    State
    View
    

    View Slide

24. Store
    Reducer
    State
    View
    

    View Slide

25. Store
    Reducer
    State
    View
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

29. let state = 0;
    state += 1;
    state += 1;
    state -= 1;
    console.log(state); // 1
    

    View Slide

30. let state = 0;
    state += 1;
    state += 1;
    state -= 1;
    console.log(state); // 1
    

    View Slide

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

    View Slide

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

    View Slide

33. Reducer
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

43. function reducer(state = 0, action) {
    switch (action.type) {
    case 'INCREMENT':
    return state + 1;
    case 'DECREMENT':
    return state - 1;
    default:
    return state;
    }
    }
    

    View Slide

44. function reducer(state = 0, action) {
    switch (action.type) {
    case 'INCREMENT':
    return state + 1;
    case 'DECREMENT':
    return state - 1;
    default:
    return state;
    }
    }
    

    View Slide

45. function reducer(state = 0, action) {
    switch (action.type) {
    case 'INCREMENT':
    return state + 1;
    case 'DECREMENT':
    return state - 1;
    default:
    return state;
    }
    }
    

    View Slide

46. function reducer(state = 0, action) {
    switch (action.type) {
    case 'INCREMENT':
    return state + 1;
    case 'DECREMENT':
    return state - 1;
    default:
    return state;
    }
    }
    

    View Slide

47. function reducer(state = 0, action) {
    switch (action.type) {
    case 'INCREMENT':
    return state + 1;
    case 'DECREMENT':
    return state - 1;
    default:
    return state;
    }
    }
    

    View Slide

48. function reducer(state = 0, action) {
    switch (action.type) {
    case 'INCREMENT':
    return state + 1;
    case 'DECREMENT':
    return state - 1;
    default:
    return state;
    }
    }
    

    View Slide

49. function reducer(state = 0, action) {
    switch (action.type) {
    case 'INCREMENT':
    return state + 1;
    case 'DECREMENT':
    return state - 1;
    default:
    return state;
    }
    }
    

    View Slide

50. Store
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

55. store.dispatch({ type: 'INCREMENT' });
    store.dispatch({ type: 'INCREMENT' });
    store.dispatch({ type: 'DECREMENT' });
    store.getState(); // 1
    

    View Slide

56. store.dispatch({ type: 'INCREMENT' });
    store.dispatch({ type: 'INCREMENT' });
    store.dispatch({ type: 'DECREMENT' });
    store.getState(); // 1
    

    View Slide

57. store.dispatch({ type: 'INCREMENT' });
    store.dispatch({ type: 'INCREMENT' });
    store.dispatch({ type: 'DECREMENT' });
    store.getState(); // 1
    

    View Slide

58. store.dispatch({ type: 'INCREMENT' });
    store.dispatch({ type: 'INCREMENT' });
    store.dispatch({ type: 'DECREMENT' });
    store.getState(); // 1
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

63. Action
    Creators
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

69. import { bindActionCreators } from 'redux';
    const actions = bindActionCreators(
    { increment, decrement },
    store.dispatch
    );
    actions.increment();
    actions.increment();
    actions.decrement();
    // state = 1
    // state = 2
    // state = 1
    

    View Slide

70. import { bindActionCreators } from 'redux';
    const actions = bindActionCreators(
    { increment, decrement },
    store.dispatch
    );
    actions.increment();
    actions.increment();
    actions.decrement();
    // state = 1
    // state = 2
    // state = 1
    

    View Slide

71. import { bindActionCreators } from 'redux';
    const actions = bindActionCreators(
    { increment, decrement },
    store.dispatch
    );
    actions.increment();
    actions.increment();
    actions.decrement();
    // state = 1
    // state = 2
    // state = 1
    

    View Slide

72. import { bindActionCreators } from 'redux';
    const actions = bindActionCreators(
    { increment, decrement },
    store.dispatch
    );
    actions.increment();
    actions.increment();
    actions.decrement();
    // state = 1
    // state = 2
    // state = 1
    

    View Slide

73. import { bindActionCreators } from 'redux';
    const actions = bindActionCreators(
    { increment, decrement },
    store.dispatch
    );
    actions.increment();
    actions.increment();
    actions.decrement();
    // state = 1
    // state = 2
    // state = 1
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

79. Immutable
    Object State
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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;
    }
    }
    

    View Slide

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;
    }
    }
    

    View Slide

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;
    }
    }
    

    View Slide

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;
    }
    }
    

    View Slide

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;
    }
    }
    

    View Slide

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;
    }
    }
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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' } }
    

    View Slide

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' } }
    

    View Slide

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' } }
    

    View Slide

95. Middleware
    

    View Slide

96. Reducer
    View
    State
    Actions
    Middleware
    

    View Slide

97. Reducer
    View
    State
    Actions
    Middleware
    Intercept
    

    View Slide

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

    View Slide

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

    View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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' } }
     

     View Slide

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' } }
     

     View Slide

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' } }
     

     View Slide

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' } }
     

     View Slide

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' } }
     

     View Slide

112. Side Effects
     I/O
     Mutable
     State
     

     View Slide

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

     View Slide

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;
     }
     }
     

     View Slide

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;
     }
     }
     

     View Slide

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;
     }
     }
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

122. function fetchUsers() {
     return dispatch => {
     dispatch(requestUsers());
     return axios.get('/users')
     .then(({ data }) => {
     dispatch(receiveUsers(data));
     });
     };
     }
     store.dispatch(fetchUsers());
     

     View Slide

123. function fetchUsers() {
     return dispatch => {
     dispatch(requestUsers());
     return axios.get('/users')
     .then(({ data }) => {
     dispatch(receiveUsers(data));
     });
     };
     }
     store.dispatch(fetchUsers());
     Action Creator
     

     View Slide

124. function fetchUsers() {
     return dispatch => {
     dispatch(requestUsers());
     return axios.get('/users')
     .then(({ data }) => {
     dispatch(receiveUsers(data));
     });
     };
     }
     store.dispatch(fetchUsers());
     Action
     

     View Slide

125. function fetchUsers() {
     return dispatch => {
     dispatch(requestUsers());
     return axios.get('/users')
     .then(({ data }) => {
     dispatch(receiveUsers(data));
     });
     };
     }
     store.dispatch(fetchUsers());
     

     View Slide

126. View Slide

127. Reducer
     View
     State
     Actions
     Middleware
     Redux
     Saga
     

     View Slide

128. Reducer
     View
     State
     Actions
     Middleware
     Redux
     Saga
     

     View Slide

129. Reducer
     View
     State
     Actions
     Middleware
     Redux
     Saga
     

     View Slide

130. Reducer
     View
     State
     Actions
     Middleware
     Redux
     Saga
     

     View Slide

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

     View Slide

132. Redux Saga
     Sagas
     

     View Slide

133. Redux Saga
     Sagas
     

     View Slide

134. Redux Saga
     Sagas
     

     View Slide

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

     View Slide

136. Redux Saga
     Sagas
     IO
     APIs
     Console
     DB
     call, apply
     call, apply,
     fork, spawn,
     join, cancel
     

     View Slide

137. Redux Saga
     Sagas
     IO
     APIs
     Console
     DB
     call, apply
     call, apply,
     fork, spawn,
     join, cancel
     Redux
     Store
     put, select, take
     

     View Slide

138. Generator
     Functions
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

150. function* myGenerator() {
     yield 'hello';
     const value = yield 'world';
     return value * 2;
     }
     iterator.next(21);
     // { value: 42, done: true }
     

     View Slide

151. function* myGenerator() {
     yield 'hello';
     const value = yield 'world';
     return value * 2;
     }
     iterator.next(21);
     // { value: 42, done: true }
     

     View Slide

152. function* myGenerator() {
     yield 'hello';
     const value = yield 'world';
     return value * 2;
     }
     iterator.next(21);
     // { value: 42, done: true }
     

     View Slide

153. function* myGenerator() {
     yield 'hello';
     const value = yield 'world';
     return value * 2;
     }
     iterator.next();
     // { value: undefined, done: true }
     

     View Slide

154. function* myGenerator() {
     yield 'hello';
     const value = yield 'world';
     return value * 2;
     }
     iterator.next();
     // { value: undefined, done: true }
     

     View Slide

155. function* myGenerator() {
     yield 'hello';
     const value = yield 'world';
     return value * 2;
     }
     iterator.next();
     // { value: undefined, done: true }
     

     View Slide

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());
     

     View Slide

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());
     

     View Slide

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());
     

     View Slide

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());
     

     View Slide

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());
     

     View Slide

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());
     

     View Slide

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());
     

     View Slide

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());
     

     View Slide

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());
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

170. Set Up
     

     View Slide

171. import createSagaMiddleware from 'redux-saga';
     const sagaMiddleware = createSagaMiddleware();
     const store = createStore(
     reducer,
     applyMiddleware(sagaMiddleware)
     );
     sagaMiddleware.run(fetchUsersSaga);
     

     View Slide

172. import createSagaMiddleware from 'redux-saga';
     const sagaMiddleware = createSagaMiddleware();
     const store = createStore(
     reducer,
     applyMiddleware(sagaMiddleware)
     );
     sagaMiddleware.run(fetchUsersSaga);
     

     View Slide

173. import createSagaMiddleware from 'redux-saga';
     const sagaMiddleware = createSagaMiddleware();
     const store = createStore(
     reducer,
     applyMiddleware(sagaMiddleware)
     );
     sagaMiddleware.run(fetchUsersSaga);
     

     View Slide

174. import createSagaMiddleware from 'redux-saga';
     const sagaMiddleware = createSagaMiddleware();
     const store = createStore(
     reducer,
     applyMiddleware(sagaMiddleware)
     );
     sagaMiddleware.run(fetchUsersSaga);
     

     View Slide

175. import createSagaMiddleware from 'redux-saga';
     const sagaMiddleware = createSagaMiddleware();
     const store = createStore(
     reducer,
     applyMiddleware(sagaMiddleware)
     );
     sagaMiddleware.run(fetchUsersSaga);
     

     View Slide

176. Why Sagas?
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

180. Testing
     

     View Slide

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);
     });
     

     View Slide

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);
     });
     

     View Slide

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);
     });
     

     View Slide

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);
     });
     

     View Slide

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);
     });
     

     View Slide

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);
     });
     

     View Slide

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);
     });
     

     View Slide

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);
     });
     

     View Slide

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);
     });
     

     View Slide

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);
     });
     

     View Slide

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);
     });
     

     View Slide

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);
     });
     

     View Slide

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);
     });
     

     View Slide

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);
     });
     

     View Slide

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);
     });
     

     View Slide

196. Error
     Handling
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

200. function reducer(state = initialState, action) {
     switch (action.type) {
     // ...
     case 'FAIL_USERS':
     return { ...state, error: action.error };
     // ...
     }
     }
     

     View Slide

201. function reducer(state = initialState, action) {
     switch (action.type) {
     // ...
     case 'FAIL_USERS':
     return { ...state, error: action.error };
     // ...
     }
     }
     

     View Slide

202. function fetchUsers() {
     return dispatch => {
     dispatch(requestUsers());
     return axios.get('/users')
     .then(({ data }) => {
     dispatch(receiveUsers(data));
     })
     .catch((e) => {
     dispatch(failUsers(e));
     });
     };
     }
     

     View Slide

203. function fetchUsers() {
     return dispatch => {
     dispatch(requestUsers());
     return axios.get('/users')
     .then(({ data }) => {
     dispatch(receiveUsers(data));
     })
     .catch((e) => {
     dispatch(failUsers(e));
     });
     };
     }
     Swallowed
     without catch
     

     View Slide

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

     View Slide

205. function* fetchUsersSaga() {
     yield take('REQUEST_USERS');
     const response = yield call(axios.get, '/users');
     yield put(receiveUsers(response.data));
     }
     No swallowed errors
     

     View Slide

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));
     }
     }
     

     View Slide

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));
     }
     }
     

     View Slide

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));
     }
     }
     

     View Slide

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));
     }
     }
     

     View Slide

210. Multiple
     Requests
     

     View Slide

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));
     }
     

     View Slide

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));
     }
     

     View Slide

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));
     }
     

     View Slide

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));
     }
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

220. Saga Helpers
     

     View Slide

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);
     }
     }
     

     View Slide

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);
     }
     }
     

     View Slide

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);
     }
     

     View Slide

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);
     }
     

     View Slide

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);
     }
     

     View Slide

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);
     }
     

     View Slide

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);
     }
     

     View Slide

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

     View Slide

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

     View Slide

230. mainSaga
     fetchUsersSaga
     fork
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

235. Data Race Issues
     Use alternative takeLatest
     

     View Slide

236. Forking
     

     View Slide

237. function* mainSaga() {
     yield take('REQUEST_USERS');
     yield call(fetchUsersSaga);
     yield take('LOGOUT');
     yield call(logoutSaga);
     }
     store.dispatch(requestUsers());
     store.dispatch(logout());
     

     View Slide

238. function* mainSaga() {
     yield take('REQUEST_USERS');
     yield call(fetchUsersSaga);
     yield take('LOGOUT');
     yield call(logoutSaga);
     }
     store.dispatch(requestUsers());
     store.dispatch(logout());
     

     View Slide

239. function* mainSaga() {
     yield take('REQUEST_USERS');
     yield call(fetchUsersSaga);
     yield take('LOGOUT');
     yield call(logoutSaga);
     }
     store.dispatch(requestUsers());
     store.dispatch(logout());
     

     View Slide

240. function* mainSaga() {
     yield take('REQUEST_USERS');
     yield call(fetchUsersSaga);
     yield take('LOGOUT');
     yield call(logoutSaga);
     }
     store.dispatch(requestUsers());
     store.dispatch(logout());
     

     View Slide

241. function* mainSaga() {
     yield take('REQUEST_USERS');
     yield call(fetchUsersSaga);
     yield take('LOGOUT');
     yield call(logoutSaga);
     }
     store.dispatch(requestUsers());
     store.dispatch(logout());
     

     View Slide

242. function* mainSaga() {
     yield take('REQUEST_USERS');
     yield call(fetchUsersSaga);
     yield take('LOGOUT');
     yield call(logoutSaga);
     }
     store.dispatch(requestUsers());
     store.dispatch(logout());
     Missed
     

     View Slide

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
     

     View Slide

244. mainSaga
     yield take(
     'REQUEST_USERS'
     );
     

     View Slide

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

     View Slide

246. mainSaga
     fetchUsersSaga
     call
     

     View Slide

247. mainSaga
     fetchUsersSaga
     call
     yield call(
     fetchUsersSaga
     );
     

     View Slide

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

     View Slide

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);
     }
     

     View Slide

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);
     }
     

     View Slide

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
     

     View Slide

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);
     }
     

     View Slide

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
     

     View Slide

254. mainSaga
     

     View Slide

255. mainSaga
     fetchUsersSaga
     fork
     yield fork(
     fetchUsersSaga
     );
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

260. Miscellaneous Patterns
     

     View Slide

261. Miscellaneous Patterns
     • Autosaving background tasks
     

     View Slide

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

     View Slide

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

     View Slide

264. Miscellaneous Patterns
     • Autosaving background tasks
     • Races for timeouts
     • Task cancellation
     • Throttling and debouncing
     

     View Slide

265. Miscellaneous Patterns
     • Autosaving background tasks
     • Races for timeouts
     • Task cancellation
     • Throttling and debouncing
     • Hook up to other IO sources
     

     View Slide

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
     

     View Slide

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

     View Slide