Step 2.7

Connect store to view with react-redux. connect() is used to turn Redux store and dispatch functions into props inside React components. The state and action dispatchers are passed along with a <Provider> component.

const NewComponent = function connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)(OldComponent);

The connect() function takes in a few functions that maps some portion of the state tree and dispatcher functions as props. It is a higher order function meaning that the return value of connect() is a function that decorates OldComponents into a NewComponent with all the mapped props.

This mapStateToProps function selects out portions of the state tree. This function informs the connected view when to re-render based on a shallow comparison from previous state.

Exercise

open up exercise/src/index.tsx and wrap <TodoApp> with <Provider> as instructed in the comment
open up exercise/src/components/TodoFooter.tsx and erase the "nullable" type modifier (i.e. the ?) in the interface definition of TodoFooterProps
uncomment the bottom bits of code and fill in the implementation for mapStateToProps() and mapDispatchToProps() - feel free to use TodoListItem.tsx as a guide
do steps 2 and 3 for the TodoHeader.tsx file