Redux Containers Demystified

A look into react-redux's connect function and how it decides if your connected component should re-render or not.

Transcript

1. REDUX CONTAINERS DEMYSTIFIED
2. WHEN CONNECTED COMPONENTS RE-RENDER
3. AGENDA - Build an app that re-renders components when it shouldn't - Gain an understanding of when connected components re-render - Fix our bug!
4. TORSLA™
5. TASK > Build a car configurator > Able to customize anything about the car > Torsla is fun. Use lots of color!
6. IDENTIFY CONTAINERS
7. OPTION COMPONENT <Option heading="Wheels" count=... price=... />
8. CONTAINER function mapStateToProps(state) { return { count: state.wheels.get('count'), price: getPriceForWheels(state), } } export default connect(mapStateToProps)(Option);
9. GET PRICE FUNCTIONS function getPriceForWheels(state) { return { currency: state.currency.get('value'), total: state.wheels.get('count') * PRICE_PER_WHEEL, } }
10. LET'S SEE IT IN ACTION
11. WHY IS EVERY CONTAINER RE-RENDERING?
12. AGENDA - Build an app that re-renders components when it shouldn't - Gain an understanding of when connected components re-render - Fix our bug!
13. CONNECTED COMPONENT - Every time the redux store changes: - Check some stuff to see if we need to render
14. ! CONNECT SOURCE CODE
15. REACT-REDUX SOURCE CODE function handleSubsequentCalls(nextState, nextOwnProps) { const propsChanged = !areOwnPropsEqual(nextOwnProps, ownProps) const stateChanged = !areStatesEqual(nextState, state) state = nextState ownProps = nextOwnProps if (propsChanged && stateChanged) return handleNewPropsAndNewState() if (propsChanged) return handleNewProps() if (stateChanged) return handleNewState() return mergedProps }
16. REACT-REDUX SOURCE CODE function handleSubsequentCalls(nextState, nextOwnProps) { const propsChanged = !areOwnPropsEqual(nextOwnProps, ownProps) const stateChanged = !areStatesEqual(nextState, state) state = nextState ownProps = nextOwnProps if (propsChanged && stateChanged) return handleNewPropsAndNewState() if (propsChanged) return handleNewProps() if (stateChanged) return handleNewState() return mergedProps }
17. CONNECTED COMPONENT - Every time the store changes: - Run the selector - ownProps change: re-render
18. REACT-REDUX SOURCE CODE function handleSubsequentCalls(nextState, nextOwnProps) { const propsChanged = !areOwnPropsEqual(nextOwnProps, ownProps) const stateChanged = !areStatesEqual(nextState, state) state = nextState ownProps = nextOwnProps if (propsChanged && stateChanged) return handleNewPropsAndNewState() if (propsChanged) return handleNewProps() if (stateChanged) return handleNewState() return mergedProps }
19. REACT-REDUX SOURCE CODE function handleNewState() { const nextStateProps = mapStateToProps(state, ownProps) const statePropsChanged = !areStatePropsEqual(nextStateProps, stateProps) stateProps = nextStateProps if (statePropsChanged) mergedProps = mergeProps(stateProps, dispatchProps, ownProps) return mergedProps }
20. REACT-REDUX SOURCE CODE function handleNewState() { const nextStateProps = mapStateToProps(state, ownProps) const statePropsChanged = !areStatePropsEqual(nextStateProps, stateProps) stateProps = nextStateProps if (statePropsChanged) mergedProps = mergeProps(stateProps, dispatchProps, ownProps) return mergedProps }
21. OUR CONTAINER function mapStateToProps(state) { return { count: state.wheels.get('count'), price: getPriceForWheels(state), } }
22. REACT-REDUX SOURCE CODE function handleNewState() { const nextStateProps = mapStateToProps(state, ownProps) const statePropsChanged = !areStatePropsEqual(nextStateProps, stateProps) stateProps = nextStateProps if (statePropsChanged) mergedProps = mergeProps(stateProps, dispatchProps, ownProps) return mergedProps }
23. REACT-REDUX SOURCE CODE function handleNewState() { const nextStateProps = mapStateToProps(state, ownProps) const statePropsChanged = !areStatePropsEqual(nextStateProps, stateProps) stateProps = nextStateProps if (statePropsChanged) mergedProps = mergeProps(stateProps, dispatchProps, ownProps) return mergedProps }
24. REACT-REDUX SOURCE CODE function handleNewState() { const nextStateProps = mapStateToProps(state, ownProps) const statePropsChanged = !areStatePropsEqual(nextStateProps, stateProps) stateProps = nextStateProps if (statePropsChanged) mergedProps = mergeProps(stateProps, dispatchProps, ownProps) return mergedProps }
25. REACT-REDUX SOURCE CODE function handleNewState() { const nextStateProps = mapStateToProps(state, ownProps) const statePropsChanged = !areStatePropsEqual(nextStateProps, stateProps) stateProps = nextStateProps if (statePropsChanged) mergedProps = mergeProps(stateProps, dispatchProps, ownProps) return mergedProps }
26. CONNECTED COMPONENT - Every time the store changes: - Run the selector - ownProps change: re-render - stateProps change: re-render
27. CONNECTED COMPONENT - Every time the store changes: - Run the selector - ownProps change: re-render - !areStatePropsEqual(nextStateProps, stateProps)
28. areStatePropsEqual -> shallowEqual - Checks that each object has the same number of keys - Checks that each key is === to the previous value
29. === TRUE 'tacos' === 'tacos' 5 === 5 false === false
30. === FALSE { a: 'a' } === { a: 'a' } [1, 2, 3] === [1, 2, 3]
31. === For objects, === checks that the references are the same const a = { a: 'a' } a === { a: 'a' } // false a === a // true
32. OUR MAP STATE TO PROPS function mapStateToProps(state) { return { count: state.wheels.get('count'), price: getPriceForWheels(state), } }
33. OUR MAP STATE TO PROPS function mapStateToProps(state) { return { count: state.wheels.get('count'), price: getPriceForWheels(state), } }
34. OUR MAP STATE TO PROPS function mapStateToProps(state) { return { count: state.wheels.get('count'), price: getPriceForWheels(state), } } > returns an object! > shallow equal check in the connect function fails > component re-renders!
35. AGENDA - Build an app that re-renders components when it shouldn't - Gain an understanding of when connected components re-render - Fix our bug!
36. WE COULD ONLY RETURN PRIMITIVES function mapStateToProps(state) { const { price, currency } = getPriceForWheels(state); return { price, currency, count: state.seatbelts.get('count'), } }
37. LETS TRY THAT OUT
38. WE CAN MEMOIZE OBJECT REFERENCES > return the same object reference if it has not changed > Reselect can help with this > same reference returned, container does not re-render
39. TO SUMMARIZE when redux store changes, for each connected component: run mapStateToProps for that component, shallow compare it's return value to the last value if it changed: re-render
40. RESOURCES React-redux: Read the source episode React-redux docs
41. FIN mike.klemarewski@gmail.com