What topics does "mapDispatchToProps: Cleaner Dispatch with connect()" cover?

This article covers: mapDispatchToProps, connect react-redux, dispatch props, bindActionCreators, react-redux object shorthand.

mapDispatchToProps: Cleaner Dispatch with connect()

Q: What is "mapDispatchToProps: Cleaner Dispatch with connect()" about?

mapDispatchToProps is the second argument to connect(). It turns action creator calls into simple function props on the component, removing verbose dispatch(actions.someCreator()) calls everywhere.

The connect() function without arguments gives the component props.dispatch, and every action call looks like dispatch(actions.fetchTasks()). That works, but it is verbose. Every dispatch call requires knowing both the dispatch function and the correct action creator.

mapDispatchToProps removes that noise.

What mapDispatchToProps Does

It is the second argument to connect(). You return a plain object from it. Each property on that object becomes a function prop on the component. Calling that prop dispatches the action internally.

JavaScript

function mapDispatchToProps(dispatch) {
  return {
    dispatchFetchTasks: () => dispatch(actions.fetchTasks()),
    dispatchCreateTask: (newTask) => dispatch(actions.createTask(newTask)),
    dispatchDeleteTask: (taskId) => dispatch(actions.deleteTask(taskId)),
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(Tasks);

Inside Tasks, instead of writing dispatch(actions.fetchTasks()), you call props.dispatchFetchTasks() directly.

When you pass mapDispatchToProps, React-Redux no longer injects raw dispatch as a prop. It replaces it with the functions you return. If you still need the raw dispatch for other actions, add it explicitly: dispatch: dispatch.

Arrow Function Shorthand

The same functions can be written as one-liners. The wrapping () turns the object literal into a return value rather than a function body:

JavaScript

function mapDispatchToProps(dispatch) {
  return {
    dispatchFetchTasks: () => dispatch(actions.fetchTasks()),
    dispatchCreateTask: (newTask) => dispatch(actions.createTask(newTask)),
    dispatchDeleteTask: (taskId) => dispatch(actions.deleteTask(taskId)),
  };
}

Parameters to the wrapper function are forwarded to the action creator automatically. dispatchCreateTask(newTask) receives newTask and passes it to actions.createTask(newTask) which builds the action object.

Using the Dispatch Functions in the Component

Destructure the three functions from props instead of holding a raw dispatch:

JSX

function Tasks(props) {
  const { tasks, dispatchFetchTasks, dispatchCreateTask, dispatchDeleteTask } = props;

  useEffect(() => {
    dispatchFetchTasks();
  }, [dispatchFetchTasks]);

  function onSaveClick() {
    const newTask = { id: Math.floor(Math.random() * 1_000_000), taskTitle, dateTime };
    dispatchCreateTask(newTask);
    setTaskTitle('');
    setDateTime('');
  }

  function onDeleteClick(task) {
    if (window.confirm('Delete this task?')) {
      dispatchDeleteTask(task.id);
    }
  }

  // ...
}

Cleaner than dispatch(actions.createTask(newTask)) at every call site. The action creator details stay in the dispatch functions, not scattered through the component.

The Object Shorthand (Shortcut Syntax)

React-Redux supports passing mapDispatchToProps as a plain object instead of a function. You set each property directly to the action creator. React-Redux wraps each one in dispatch() automatically:

JavaScript

const mapDispatchToProps = {
  dispatchFetchTasks: actions.fetchTasks,
  dispatchCreateTask: actions.createTask,
  dispatchDeleteTask: actions.deleteTask,
};

export default connect(mapStateToProps, mapDispatchToProps)(Tasks);

This is the shortcut. Any argument passed to dispatchCreateTask(newTask) in the component flows through to actions.createTask(newTask) then gets dispatched. The component API is identical. The boilerplate is half the size.

Use the object form unless you need to do something inside the dispatch function before calling the action creator. Most cases do not need that.

ExpandmapDispatchToProps turning action creators into direct props on the component

Destructuring Props in the Function Signature

Instead of reading props.tasks and props.dispatchFetchTasks inside the function body, destructure them in the parameter list:

JSX

function Tasks({ tasks, dispatchFetchTasks, dispatchCreateTask, dispatchDeleteTask }) {
  // use tasks, dispatchFetchTasks etc. directly
}

This works well with a small, known set of props. If the component receives many props from multiple sources, reading props.propName in the body is clearer about where each value comes from.

The Essentials

mapDispatchToProps(dispatch) returns an object whose properties become function props on the component. Calling props.dispatchFetchTasks() internally calls dispatch(actions.fetchTasks()).
Object shorthand: pass mapDispatchToProps as a plain object with action creators as values. React-Redux wraps each one in dispatch() automatically. Arguments pass through.
Raw dispatch is removed from props when mapDispatchToProps is provided. Re-add it explicitly if another action needs to be dispatched outside the three declared functions.

mapDispatchToProps: Cleaner Dispatch with connect()

What mapDispatchToProps Does

Arrow Function Shorthand

Using the Dispatch Functions in the Component

The Object Shorthand (Shortcut Syntax)

Destructuring Props in the Function Signature

The Essentials

Further Reading and Watching