[Redux] Using mapDispatchToProps() Shorthand Notation

时间:2024-08-15 18:04:08

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));