What is the difference between `mapStateToProps()` and `mapDispatchToProps()`?

mapStateToProps() is a utility which helps your component get updated state (which is updated by some other components):

     const mapStateToProps = (state) => {
       return {
         todos: getVisibleTodos(state.todos, state.visibilityFilter),
       };
     };
     

mapDispatchToProps() is a utility which will help your component to fire an action event (dispatching action which may cause change of application state):

     const mapDispatchToProps = (dispatch) => {
       return {
         onTodoClick: (id) => {
           dispatch(toggleTodo(id));
         },
       };
     };
     

It is recommended to always use the “object shorthand” form for the mapDispatchToProps.

Redux wraps it in another function that looks like (…args) => dispatch(onTodoClick(…args)), and pass that wrapper function as a prop to your component.

     const mapDispatchToProps = {
       onTodoClick,
     };