[Redux] Using mapDispatchToProps() Shorthand Notation

Posted 2020-07-21 Answer1215

We will learn how to avoid the boilerplate code in mapDispatchToProps() for the common case where action creator arguments match the callback prop arguments.

 

Current code:

// visibleTodoList.js

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

const VisibleTodoList = withRouter(connect(
    mapStateToProps,
    mapDispatchToProps
)(TodoList));

 

The id we pass from onTodoClick is the same as in toggleTodo, then we can use the shorthard notation to get rid of mapDispatchToProps function:

const VisibleTodoList = withRouter(connect(
    mapStateToProps,
    {onTodoClick: toggleTodo}
)(TodoList));