Connect.Tech 2017: Get Started with Redux

Transcript

1. Jeremy Fairbank
   @elpapapollo / jfairbank
   Get Started with
   Redux
   

   View Slide

2. Software is broken.
   We are here to fix it.
   Say hi@testdouble.com
   

   View Slide

3. The Wild West of State
   

   View Slide

4. 
   ...
   
   var $el = $('[data-id="42"]');
   var currentName = $el.data('name');
   $el.data('name', currentName.toUpperCase());
   Data in the DOM
   

   View Slide

5. Controller
   View
   Model
   Model
   Model
   Model
   Model
   View
   View
   View
   View
   MVC
   

   View Slide

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

   View Slide

7. The Wild West of State
   State is everywhere and
   anyone can change it!
   

   View Slide

8. Predictable
   State Container
   

   View Slide

9. All application
   state in one place
   State Container
   

   View Slide

10. Predictable
    Old
    State
    REDUCER
    New
    State
    

    View Slide

11. Predictable
    Old
    State
    REDUCER
    New
    State
    • State changes in one place
    

    View Slide

12. Predictable
    Old
    State
    REDUCER
    New
    State
    • State changes in one place
    • State changes in well-defined ways
    

    View Slide

13. Predictable
    Old
    State
    REDUCER
    New
    State
    • State changes in one place
    • State changes in well-defined ways
    • Changes are serialized
    

    View Slide

14. Reducer
    View
    State
    Actions
    

    View Slide

15. Reducer
    View
    State
    Actions
    

    View Slide

16. Reducer
    View
    React,
    Angular,
    Vanilla JS,
    etc.
    State
    Actions
    

    View Slide

17. Reducer
    View
    State
    Actions
    Dispatch
    

    View Slide

18. Reducer
    View
    State
    Actions
    

    View Slide

19. -
    0
    +
    

    View Slide

20. incrementBtn.addEventListener('click', () => {
    counter.innerText = Number(counter.innerText) + 1;
    });
    decrementBtn.addEventListener('click', () => {
    counter.innerText = Number(counter.innerText) - 1;
    });
    

    View Slide

21. let state = 0;
    function render() {
    counter.innerText = state;
    }
    incrementBtn.addEventListener('click', () => {
    state += 1;
    render();
    });
    decrementBtn.addEventListener('click', () => {
    state -= 1;
    render();
    });
    

    View Slide

22. let state = 0;
    function render() {
    counter.innerText = state;
    }
    incrementBtn.addEventListener('click', () => {
    state += 1;
    render();
    });
    decrementBtn.addEventListener('click', () => {
    state -= 1;
    render();
    });
    

    View Slide

23. let state = 0;
    function render() {
    counter.innerText = state;
    }
    incrementBtn.addEventListener('click', () => {
    state += 1;
    render();
    });
    decrementBtn.addEventListener('click', () => {
    state -= 1;
    render();
    });
    

    View Slide

24. let state = 0;
    function render() {
    counter.innerText = state;
    }
    incrementBtn.addEventListener('click', () => {
    state += 1;
    render();
    });
    decrementBtn.addEventListener('click', () => {
    state -= 1;
    render();
    });
    

    View Slide

25. state += 1;
    state -= 1;
    Anyone can access and
    mutate state
    

    View Slide

26. state += 1
    state -= 1
    { type: 'INCREMENT' }
    { type: 'DECREMENT' }
    Tokens/descriptors that describe a type of change.
    Actions
    

    View Slide

27. function reducer(state = 0, action) {
    switch (action.type) {
    case 'INCREMENT':
    return state + 1;
    case 'DECREMENT':
    return state - 1;
    default:
    return state;
    }
    }
    Returns new state from current state and action.
    Reducer
    

    View Slide

28. function reducer(state = 0, action) {
    switch (action.type) {
    case 'INCREMENT':
    return state + 1;
    case 'DECREMENT':
    return state - 1;
    default:
    return state;
    }
    }
    Returns new state from current state and action.
    Reducer
    

    View Slide

29. function reducer(state = 0, action) {
    switch (action.type) {
    case 'INCREMENT':
    return state + 1;
    case 'DECREMENT':
    return state - 1;
    default:
    return state;
    }
    }
    Returns new state from current state and action.
    Reducer
    

    View Slide

30. function reducer(state = 0, action) {
    switch (action.type) {
    case 'INCREMENT':
    return state + 1;
    case 'DECREMENT':
    return state - 1;
    default:
    return state;
    }
    }
    Returns new state from current state and action.
    Reducer
    

    View Slide

31. function reducer(state = 0, action) {
    switch (action.type) {
    case 'INCREMENT':
    return state + 1;
    case 'DECREMENT':
    return state - 1;
    default:
    return state;
    }
    }
    Returns new state from current state and action.
    Reducer
    

    View Slide

32. function reducer(state = 0, action) {
    switch (action.type) {
    case 'INCREMENT':
    return state + 1;
    case 'DECREMENT':
    return state - 1;
    default:
    return state;
    }
    }
    Returns new state from current state and action.
    Reducer
    

    View Slide

33. function reducer(state = 0, action) {
    switch (action.type) {
    case 'INCREMENT':
    return state + 1;
    case 'DECREMENT':
    return state - 1;
    default:
    return state;
    }
    }
    Returns new state from current state and action.
    Reducer
    

    View Slide

34. Updating state is just a function call now
    let state = 0;
    state = reducer(state, { type: 'INCREMENT' }); // 1
    state = reducer(state, { type: 'INCREMENT' }); // 2
    state = reducer(state, { type: 'DECREMENT' }); // 1
    state = reducer(state, { type: 'ADD_2' }); // 1
    console.log(state); // 1
    

    View Slide

35. Updating state is just a function call now
    let state = 0;
    state = reducer(state, { type: 'INCREMENT' }); // 1
    state = reducer(state, { type: 'INCREMENT' }); // 2
    state = reducer(state, { type: 'DECREMENT' }); // 1
    state = reducer(state, { type: 'ADD_2' }); // 1
    console.log(state); // 1
    Unhandled types are ignored
    

    View Slide

36. function dispatch(action) {
    state = reducer(state, action);
    render();
    }
    incrementBtn.addEventListener('click', () => {
    dispatch({ type: 'INCREMENT' });
    });
    decrementBtn.addEventListener('click', () => {
    dispatch({ type: 'DECREMENT' });
    });
    Decouple event from state change.
    

    View Slide

37. function dispatch(action) {
    state = reducer(state, action);
    render();
    }
    incrementBtn.addEventListener('click', () => {
    dispatch({ type: 'INCREMENT' });
    });
    decrementBtn.addEventListener('click', () => {
    dispatch({ type: 'DECREMENT' });
    });
    Decouple event from state change.
    

    View Slide

38. function dispatch(action) {
    state = reducer(state, action);
    render();
    }
    incrementBtn.addEventListener('click', () => {
    dispatch({ type: 'INCREMENT' });
    });
    decrementBtn.addEventListener('click', () => {
    dispatch({ type: 'DECREMENT' });
    });
    Decouple event from state change.
    

    View Slide

39. function dispatch(action) {
    state = reducer(state, action);
    render();
    }
    incrementBtn.addEventListener('click', () => {
    dispatch({ type: 'INCREMENT' });
    });
    decrementBtn.addEventListener('click', () => {
    dispatch({ type: 'DECREMENT' });
    });
    Decouple event from state change.
    

    View Slide

40. function dispatch(action) {
    state = reducer(state, action);
    render();
    }
    incrementBtn.addEventListener('click', () => {
    dispatch({ type: 'INCREMENT' });
    });
    decrementBtn.addEventListener('click', () => {
    dispatch({ type: 'DECREMENT' });
    });
    Decouple event from state change.
    

    View Slide

41. STORE
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

47. incrementBtn.addEventListener('click', () => {
    store.dispatch({ type: 'INCREMENT' });
    });
    decrementBtn.addEventListener('click', () => {
    store.dispatch({ type: 'DECREMENT' });
    });
    store.subscribe(() => {
    counter.innerText = store.getState();
    });
    

    View Slide

48. incrementBtn.addEventListener('click', () => {
    store.dispatch({ type: 'INCREMENT' });
    });
    decrementBtn.addEventListener('click', () => {
    store.dispatch({ type: 'DECREMENT' });
    });
    store.subscribe(() => {
    counter.innerText = store.getState();
    });
    

    View Slide

49. incrementBtn.addEventListener('click', () => {
    store.dispatch({ type: 'INCREMENT' });
    });
    decrementBtn.addEventListener('click', () => {
    store.dispatch({ type: 'DECREMENT' });
    });
    store.subscribe(() => {
    counter.innerText = store.getState();
    });
    

    View Slide

50. Store
    Reducer
    State
    View
    0
    

    View Slide

51. Store
    Reducer
    State
    View
    0
    

    View Slide

52. Store
    Reducer
    State
    View
    0
    getState
    

    View Slide

53. Store
    Reducer
    View
    State
    0
    

    View Slide

54. Store
    Reducer
    View
    State
    0
    INCREMENT
    dispatch
    

    View Slide

55. Store
    Reducer
    View
    State
    0
    INCREMENT
    dispatch
    

    View Slide

56. Store
    Reducer
    View
    State
    0
    

    View Slide

57. Store
    Reducer
    View
    State
    1
    

    View Slide

58. Store
    Reducer
    View
    State
    1
    

    View Slide

59. Store
    Reducer
    View
    State
    1
    1
    subscribe
    getState
    

    View Slide

60. incrementBtn.addEventListener('click', () => {
    store.dispatch({ type: 'INCREMENT' });
    });
    decrementBtn.addEventListener('click', () => {
    store.dispatch({ type: 'DECREMENT' });
    });
    Problems:
    • Creating actions are cumbersome
    • Requires direct access to store
    

    View Slide

61. const increment = () => ({
    type: 'INCREMENT',
    });
    const decrement = () => ({
    type: 'DECREMENT',
    });
    Reusable functions that create actions
    Action Creators
    

    View Slide

62. const increment = () => ({
    type: 'INCREMENT',
    });
    const decrement = () => ({
    type: 'DECREMENT',
    });
    Reusable functions that create actions
    Action Creators
    

    View Slide

63. const increment = () => ({
    type: 'INCREMENT',
    });
    const decrement = () => ({
    type: 'DECREMENT',
    });
    Reusable functions that create actions
    Action Creators
    

    View Slide

64. incrementBtn.addEventListener('click', () => {
    store.dispatch(increment());
    });
    decrementBtn.addEventListener('click', () => {
    store.dispatch(decrement());
    });
    Problems:
    • Creating actions are cumbersome
    • Requires direct access to store
    

    View Slide

65. const actions = {
    increment: () => store.dispatch(increment()),
    decrement: () => store.dispatch(decrement()),
    };
    Automatically dispatch when invoked
    Bound Action Creators
    

    View Slide

66. const actions = {
    increment: () => store.dispatch(increment()),
    decrement: () => store.dispatch(decrement()),
    };
    Automatically dispatch when invoked
    Bound Action Creators
    Manually created
    

    View Slide

67. const actions = {
    increment: () => store.dispatch(increment()),
    decrement: () => store.dispatch(decrement()),
    };
    Automatically dispatch when invoked
    Bound Action Creators
    

    View Slide

68. import { bindActionCreators } from 'redux';
    const actions = bindActionCreators(
    { increment, decrement },
    store.dispatch
    );
    Automatically dispatch when invoked
    Bound Action Creators
    

    View Slide

69. import { bindActionCreators } from 'redux';
    const actions = bindActionCreators(
    { increment, decrement },
    store.dispatch
    );
    Automatically dispatch when invoked
    Bound Action Creators
    

    View Slide

70. import { bindActionCreators } from 'redux';
    const actions = bindActionCreators(
    { increment, decrement },
    store.dispatch
    );
    Automatically dispatch when invoked
    Bound Action Creators
    Automatically
    created
    

    View Slide

71. Problems:
    • Creating actions are cumbersome
    • Requires direct access to store
    incrementBtn.addEventListener('click', actions.increment);
    decrementBtn.addEventListener('click', actions.decrement);
    

    View Slide

72. React
    +
    

    View Slide

73. github.com/reactjs/react-redux
    npm install --save react-redux
    Official React bindings for Redux
    React Redux Library
    

    View Slide

74. Reducer
    State
    Actions
    React
    Redux
    

    View Slide

75. React
    Redux
    React
    Application
    

    View Slide

76. React
    Redux
    React
    Application
    Provider
    

    View Slide

77. Component
    React
    Redux
    React
    Application
    Provider
    connect
    State
    Action
    Creators
    

    View Slide

78. Component
    Child
    React
    Redux
    React
    Application
    Provider
    connect
    State
    Child
    Action
    Creators
    

    View Slide

79. const MyApp = () => (
    
    -
    0
    +
    
    );
    

    View Slide

80. import React from 'react';
    import { render } from 'react-dom';
    import { Provider } from 'react-redux';
    render((
    
    
    
    ), document.getElementById('main'));
    

    View Slide

81. import React from 'react';
    import { render } from 'react-dom';
    import { Provider } from 'react-redux';
    render((
    
    
    
    ), document.getElementById('main'));
    

    View Slide

82. import React from 'react';
    import { render } from 'react-dom';
    import { Provider } from 'react-redux';
    render((
    
    
    
    ), document.getElementById('main'));
    

    View Slide

83. import { connect } from 'react-redux';
    const mapStateToProps = counter => ({ counter });
    function mapDispatchToProps(dispatch) {
    return bindActionCreators({
    onIncrement: increment,
    onDecrement: decrement,
    }, dispatch);
    }
    const MyAppContainer = connect(
    mapStateToProps,
    mapDispatchToProps
    )(MyApp);
    

    View Slide

84. import { connect } from 'react-redux';
    const mapStateToProps = counter => ({ counter });
    function mapDispatchToProps(dispatch) {
    return bindActionCreators({
    onIncrement: increment,
    onDecrement: decrement,
    }, dispatch);
    }
    const MyAppContainer = connect(
    mapStateToProps,
    mapDispatchToProps
    )(MyApp);
    

    View Slide

85. import { connect } from 'react-redux';
    const mapStateToProps = counter => ({ counter });
    function mapDispatchToProps(dispatch) {
    return bindActionCreators({
    onIncrement: increment,
    onDecrement: decrement,
    }, dispatch);
    }
    const MyAppContainer = connect(
    mapStateToProps,
    mapDispatchToProps
    )(MyApp);
    

    View Slide

86. import { connect } from 'react-redux';
    const mapStateToProps = counter => ({ counter });
    function mapDispatchToProps(dispatch) {
    return bindActionCreators({
    onIncrement: increment,
    onDecrement: decrement,
    }, dispatch);
    }
    const MyAppContainer = connect(
    mapStateToProps,
    mapDispatchToProps
    )(MyApp);
    

    View Slide

87. import { connect } from 'react-redux';
    const mapStateToProps = counter => ({ counter });
    function mapDispatchToProps(dispatch) {
    return bindActionCreators({
    onIncrement: increment,
    onDecrement: decrement,
    }, dispatch);
    }
    const MyAppContainer = connect(
    mapStateToProps,
    mapDispatchToProps
    )(MyApp);
    

    View Slide

88. const MyApp = (props) => (
    
    
    -
    
    {props.counter}
    
    +
    
    
    );
    

    View Slide

89. const MyApp = (props) => (
    
    
    -
    
    {props.counter}
    
    +
    
    
    );
    Store state
    mapStateToProps
    

    View Slide

90. const MyApp = (props) => (
    
    
    -
    
    {props.counter}
    
    +
    
    
    );
    Bound action creators
    mapDispatchToProps
    

    View Slide

91. Immutable
    Object State
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

98. 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

99. 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

100. 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

101. 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

102. 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

103. 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

104. 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

105. 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

106. 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

107. function reducer(state = initialState, action) {
     }
     

     View Slide

108. Reducer
     Composition
     Create modular reducers for
     better organization and
     readability
     

     View Slide

109. Root
     Reducer
     Counter
     Reducer
     Car
     Reducer
     

     View Slide

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

     View Slide

111. const initialState = { color: 'red' };
     function carReducer(state = initialState, action) {
     switch (action.type) {
     case 'CHANGE_COLOR':
     return { ...state, color: action.payload };
     default:
     return state;
     }
     }
     

     View Slide

112. const initialState = { color: 'red' };
     function carReducer(state = initialState, action) {
     switch (action.type) {
     case 'CHANGE_COLOR':
     return { ...state, color: action.payload };
     default:
     return state;
     }
     }
     

     View Slide

113. const initialState = { color: 'red' };
     function carReducer(state = initialState, action) {
     switch (action.type) {
     case 'CHANGE_COLOR':
     return { ...state, color: action.payload };
     default:
     return state;
     }
     }
     

     View Slide

114. function reducer(state = {}, action) {
     return {
     counter: counterReducer(state.counter, action),
     car: carReducer(state.car, action),
     };
     }
     

     View Slide

115. function reducer(state = {}, action) {
     return {
     counter: counterReducer(state.counter, action),
     car: carReducer(state.car, action),
     };
     }
     

     View Slide

116. function reducer(state = {}, action) {
     return {
     counter: counterReducer(state.counter, action),
     car: carReducer(state.car, action),
     };
     }
     

     View Slide

117. function reducer(state = {}, action) {
     return {
     counter: counterReducer(state.counter, action),
     car: carReducer(state.car, action),
     };
     }
     

     View Slide

118. import { combineReducers } from 'redux';
     const reducer = combineReducers({
     counter: counterReducer,
     car: carReducer,
     });
     

     View Slide

119. import { combineReducers } from 'redux';
     const reducer = combineReducers({
     counter: counterReducer,
     car: carReducer,
     });
     

     View Slide

120. import { combineReducers } from 'redux';
     const reducer = combineReducers({
     counter: counterReducer,
     car: carReducer,
     });
     

     View Slide

121. Root
     Reducer
     Counter
     Reducer
     Car
     Reducer
     Engine
     Reducer
     Tire
     Reducer
     … …
     …
     

     View Slide

122. Root
     Reducer
     Counter
     Reducer
     Car
     Reducer
     Engine
     Reducer
     Tire
     Reducer
     … …
     …
     

     View Slide

123. Root
     Reducer
     Counter
     Reducer
     Car
     Reducer
     Engine
     Reducer
     Tire
     Reducer
     … …
     …
     

     View Slide

124. Interact
     with APIs?
     

     View Slide

125. Middleware
     Enhance Redux applications
     

     View Slide

126. • Logging
     Middleware
     Enhance Redux applications
     

     View Slide

127. • Logging
     • Debugging
     Middleware
     Enhance Redux applications
     

     View Slide

128. • Logging
     • Debugging
     • API interaction
     Middleware
     Enhance Redux applications
     

     View Slide

129. • Logging
     • Debugging
     • API interaction
     • Custom actions
     Middleware
     Enhance Redux applications
     

     View Slide

130. Reducer
     View
     State
     Actions
     Middleware
     

     View Slide

131. Reducer
     View
     State
     Actions
     Middleware
     Intercept
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

141. 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

142. 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

143. 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

144. 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

145. 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

146. const initialState = {
     status: 'READY',
     user: null,
     };
     

     View Slide

147. function reducer(state = initialState, action) {
     switch (action.type) {
     case 'REQUEST_USER':
     return { ...state, status: 'FETCHING' };
     case 'RECEIVE_USER':
     return {
     ...state,
     status: 'SUCCESS',
     user: action.payload,
     };
     default:
     return state;
     }
     }
     

     View Slide

148. function reducer(state = initialState, action) {
     switch (action.type) {
     case 'REQUEST_USER':
     return { ...state, status: 'FETCHING' };
     case 'RECEIVE_USER':
     return {
     ...state,
     status: 'SUCCESS',
     user: action.payload,
     };
     default:
     return state;
     }
     }
     

     View Slide

149. function reducer(state = initialState, action) {
     switch (action.type) {
     case 'REQUEST_USER':
     return { ...state, status: 'FETCHING' };
     case 'RECEIVE_USER':
     return {
     ...state,
     status: 'SUCCESS',
     user: action.payload,
     };
     default:
     return state;
     }
     }
     

     View Slide

150. const requestUser = id => ({
     type: 'REQUEST_USER',
     payload: id,
     });
     const receiveUser = user => ({
     type: 'RECEIVE_USER',
     payload: user,
     });
     

     View Slide

151. const store = createStore(reducer);
     function fetchUser(id) {
     store.dispatch(requestUser(id));
     axios.get(`/users/${id}`)
     .then(({ data: user }) => {
     store.dispatch(receiveUser(user));
     });
     }
     fetchUser(1);
     

     View Slide

152. const store = createStore(reducer);
     function fetchUser(id) {
     store.dispatch(requestUser(id));
     axios.get(`/users/${id}`)
     .then(({ data: user }) => {
     store.dispatch(receiveUser(user));
     });
     }
     fetchUser(1);
     

     View Slide

153. const store = createStore(reducer);
     function fetchUser(id) {
     store.dispatch(requestUser(id));
     axios.get(`/users/${id}`)
     .then(({ data: user }) => {
     store.dispatch(receiveUser(user));
     });
     }
     fetchUser(1);
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

158. function fetchUser(id) {
     return dispatch => {
     dispatch(requestUser(id));
     return axios.get(`/users/${id}`)
     .then(({ data: user }) => {
     dispatch(receiveUser(user));
     });
     };
     }
     store.dispatch(fetchUser(1));
     

     View Slide

159. function fetchUser(id) {
     return dispatch => {
     dispatch(requestUser(id));
     return axios.get(`/users/${id}`)
     .then(({ data: user }) => {
     dispatch(receiveUser(user));
     });
     };
     }
     store.dispatch(fetchUser(1));
     Action Creator
     

     View Slide

160. function fetchUser(id) {
     return dispatch => {
     dispatch(requestUser(id));
     return axios.get(`/users/${id}`)
     .then(({ data: user }) => {
     dispatch(receiveUser(user));
     });
     };
     }
     store.dispatch(fetchUser(1));
     Action
     

     View Slide

161. function fetchUser(id) {
     return dispatch => {
     dispatch(requestUser(id));
     return axios.get(`/users/${id}`)
     .then(({ data: user }) => {
     dispatch(receiveUser(user));
     });
     };
     }
     store.dispatch(fetchUser(1));
     

     View Slide

162. Alternative
     Async Middleware
     

     View Slide

163. redux-saga.js.org
     

     View Slide

164. • Uses ES6 generator functions
     redux-saga.js.org
     

     View Slide

165. • Uses ES6 generator functions
     • Write asynchronous code in synchronous manner
     redux-saga.js.org
     

     View Slide

166. • Uses ES6 generator functions
     • Write asynchronous code in synchronous manner
     • Great for coordinating multiple API calls
     redux-saga.js.org
     

     View Slide

167. • Uses ES6 generator functions
     • Write asynchronous code in synchronous manner
     • Great for coordinating multiple API calls
     • Great for forking background tasks
     redux-saga.js.org
     

     View Slide

168. redux-observable.js.org
     

     View Slide

169. redux-observable.js.org
     • Uses RxJS observables
     

     View Slide

170. redux-observable.js.org
     • Uses RxJS observables
     • Write asynchronous code with declarative observable chains
     

     View Slide

171. redux-observable.js.org
     • Uses RxJS observables
     • Write asynchronous code with declarative observable chains
     • Great for composing asynchronous operations
     

     View Slide

172. redux-observable.js.org
     • Uses RxJS observables
     • Write asynchronous code with declarative observable chains
     • Great for composing asynchronous operations
     • Very concise code
     

     View Slide

173. And plenty more options…
     

     View Slide

174. • redux-logic
     And plenty more options…
     

     View Slide

175. • redux-logic
     • redux-ship
     And plenty more options…
     

     View Slide

176. • redux-logic
     • redux-ship
     • redux-promise
     And plenty more options…
     

     View Slide

177. • redux-logic
     • redux-ship
     • redux-promise
     • redux-api-middleware
     And plenty more options…
     

     View Slide

178. ×
     ✓ Testing
     

     View Slide

179. const state = {
     counter: 0,
     car: { color: 'red' },
     };
     it('returns initial state', () => {
     expect(reducer(undefined, {})).toEqual(state);
     });
     it('increments the number', () => {
     const subject = reducer(state, increment()).counter;
     expect(subject).toBe(1);
     });
     it('changes the car color', () => {
     const subject = reducer(state, changeColor('green')).car.color;
     expect(subject).toBe('green');
     });
     Easy reducer
     unit tests!
     

     View Slide

180. it('creates an INCREMENT action', () => {
     expect(increment()).toEqual({ type: 'INCREMENT' });
     });
     it('creates a CHANGE_COLOR action', () => {
     expect(changeColor('blue')).toEqual({
     type: 'CHANGE_COLOR',
     payload: 'blue',
     });
     });
     You can test action creators, but
     not really necessary.
     

     View Slide

181. However, you should test async
     action creators.
     function fetchUser(id) {
     return dispatch => {
     dispatch(requestUser(id));
     return axios.get(`/users/${id}`)
     .then(({ data: user }) => {
     dispatch(receiveUser(user));
     });
     };
     }
     

     View Slide

182. import td from 'testdouble';
     const axios = td.replace('axios');
     it('fetches a user', () => {
     // Arrange
     const dispatch = td.function();
     td.when(axios.get('/users/1')).thenResolve({ data: 'fake user' });
     // Act
     return fetchUser(1)(dispatch).then(() => {
     const subject = td.matchers.captor();
     td.verify(dispatch(subject.capture()));
     // Assert
     expect(subject.values[0]).toEqual(requestUser(1));
     expect(subject.values[1]).toEqual(receiveUser('fake user’));
     });
     });
     Unit test with
     test doubles
     

     View Slide

183. import td from 'testdouble';
     const axios = td.replace('axios');
     it('fetches a user', () => {
     // Arrange
     const dispatch = td.function();
     td.when(axios.get('/users/1')).thenResolve({ data: 'fake user' });
     // Act
     return fetchUser(1)(dispatch).then(() => {
     const subject = td.matchers.captor();
     td.verify(dispatch(subject.capture()));
     // Assert
     expect(subject.values[0]).toEqual(requestUser(1));
     expect(subject.values[1]).toEqual(receiveUser('fake user’));
     });
     });
     

     View Slide

184. import td from 'testdouble';
     const axios = td.replace('axios');
     it('fetches a user', () => {
     // Arrange
     const dispatch = td.function();
     td.when(axios.get('/users/1')).thenResolve({ data: 'fake user' });
     // Act
     return fetchUser(1)(dispatch).then(() => {
     const subject = td.matchers.captor();
     td.verify(dispatch(subject.capture()));
     // Assert
     expect(subject.values[0]).toEqual(requestUser(1));
     expect(subject.values[1]).toEqual(receiveUser('fake user’));
     });
     });
     

     View Slide

185. import td from 'testdouble';
     const axios = td.replace('axios');
     it('fetches a user', () => {
     // Arrange
     const dispatch = td.function();
     td.when(axios.get('/users/1')).thenResolve({ data: 'fake user' });
     // Act
     return fetchUser(1)(dispatch).then(() => {
     const subject = td.matchers.captor();
     td.verify(dispatch(subject.capture()));
     // Assert
     expect(subject.values[0]).toEqual(requestUser(1));
     expect(subject.values[1]).toEqual(receiveUser('fake user’));
     });
     });
     

     View Slide

186. import td from 'testdouble';
     const axios = td.replace('axios');
     it('fetches a user', () => {
     // Arrange
     const dispatch = td.function();
     td.when(axios.get('/users/1')).thenResolve({ data: 'fake user' });
     // Act
     return fetchUser(1)(dispatch).then(() => {
     const subject = td.matchers.captor();
     td.verify(dispatch(subject.capture()));
     // Assert
     expect(subject.values[0]).toEqual(requestUser(1));
     expect(subject.values[1]).toEqual(receiveUser('fake user’));
     });
     });
     

     View Slide

187. import td from 'testdouble';
     const axios = td.replace('axios');
     it('fetches a user', () => {
     // Arrange
     const dispatch = td.function();
     td.when(axios.get('/users/1')).thenResolve({ data: 'fake user' });
     // Act
     return fetchUser(1)(dispatch).then(() => {
     const subject = td.matchers.captor();
     td.verify(dispatch(subject.capture()));
     // Assert
     expect(subject.values[0]).toEqual(requestUser(1));
     expect(subject.values[1]).toEqual(receiveUser('fake user’));
     });
     });
     

     View Slide

188. import td from 'testdouble';
     const axios = td.replace('axios');
     it('fetches a user', () => {
     // Arrange
     const dispatch = td.function();
     td.when(axios.get('/users/1')).thenResolve({ data: 'fake user' });
     // Act
     return fetchUser(1)(dispatch).then(() => {
     const subject = td.matchers.captor();
     td.verify(dispatch(subject.capture()));
     // Assert
     expect(subject.values[0]).toEqual(requestUser(1));
     expect(subject.values[1]).toEqual(receiveUser('fake user’));
     });
     });
     

     View Slide

189. import td from 'testdouble';
     const axios = td.replace('axios');
     it('fetches a user', () => {
     // Arrange
     const dispatch = td.function();
     td.when(axios.get('/users/1')).thenResolve({ data: 'fake user' });
     // Act
     return fetchUser(1)(dispatch).then(() => {
     const subject = td.matchers.captor();
     td.verify(dispatch(subject.capture()));
     // Assert
     expect(subject.values[0]).toEqual(requestUser(1));
     expect(subject.values[1]).toEqual(receiveUser('fake user’));
     });
     });
     

     View Slide

190. Use integration tests to ensure all
     pieces work together.
     Allow store, reducer, and
     actions to all interact .
     

     View Slide

191. it('fetches a user', () => {
     // Arrange
     const store = createStore(reducer, applyMiddleware(thunkMiddleware));
     td.replace(axios, 'get');
     td.when(axios.get('/users/1')).thenResolve({ data: 'fake user' });
     // Act
     const promise = store.dispatch(fetchUser(1));
     const subject = store.getState;
     // Assert
     expect(subject()).toEqual({ status: 'FETCHING', user: null });
     return promise.then(() => {
     expect(subject()).toEqual({ status: 'SUCCESS', user: 'fake user' });
     });
     });
     

     View Slide

192. it('fetches a user', () => {
     // Arrange
     const store = createStore(reducer, applyMiddleware(thunkMiddleware));
     td.replace(axios, 'get');
     td.when(axios.get('/users/1')).thenResolve({ data: 'fake user' });
     // Act
     const promise = store.dispatch(fetchUser(1));
     const subject = store.getState;
     // Assert
     expect(subject()).toEqual({ status: 'FETCHING', user: null });
     return promise.then(() => {
     expect(subject()).toEqual({ status: 'SUCCESS', user: 'fake user' });
     });
     });
     

     View Slide

193. it('fetches a user', () => {
     // Arrange
     const store = createStore(reducer, applyMiddleware(thunkMiddleware));
     td.replace(axios, 'get');
     td.when(axios.get('/users/1')).thenResolve({ data: 'fake user' });
     // Act
     const promise = store.dispatch(fetchUser(1));
     const subject = store.getState;
     // Assert
     expect(subject()).toEqual({ status: 'FETCHING', user: null });
     return promise.then(() => {
     expect(subject()).toEqual({ status: 'SUCCESS', user: 'fake user' });
     });
     });
     

     View Slide

194. it('fetches a user', () => {
     // Arrange
     const store = createStore(reducer, applyMiddleware(thunkMiddleware));
     td.replace(axios, 'get');
     td.when(axios.get('/users/1')).thenResolve({ data: 'fake user' });
     // Act
     const promise = store.dispatch(fetchUser(1));
     const subject = store.getState;
     // Assert
     expect(subject()).toEqual({ status: 'FETCHING', user: null });
     return promise.then(() => {
     expect(subject()).toEqual({ status: 'SUCCESS', user: 'fake user' });
     });
     });
     

     View Slide

195. it('fetches a user', () => {
     // Arrange
     const store = createStore(reducer, applyMiddleware(thunkMiddleware));
     td.replace(axios, 'get');
     td.when(axios.get('/users/1')).thenResolve({ data: 'fake user' });
     // Act
     const promise = store.dispatch(fetchUser(1));
     const subject = store.getState;
     // Assert
     expect(subject()).toEqual({ status: 'FETCHING', user: null });
     return promise.then(() => {
     expect(subject()).toEqual({ status: 'SUCCESS', user: 'fake user' });
     });
     });
     

     View Slide

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

     View Slide

197. Thanks!
     Slides: bit.ly/redux-connect
     Jeremy Fairbank
     @elpapapollo / jfairbank
     

     View Slide