DEV Community

You've been doing mapDispatchToProps wrong this entire time

Matt Crowder on March 30, 2019

Do this: const mapDispatchToProps = { decrement: () => ({ type: "DECREMENT" }), increment: () => ({ type: "INCREMENT" }) }; ...

Read full post

Mark Erikson • Mar 30 '19

Yep! We recently rewrote the React-Redux docs from scratch, and as part of that, we explicitly encourage people to use the "object shorthand" form of mapDispatch.

Joey Clark • Oct 3 '19 • Edited

This is really a time-saver!

Especially if you import the decrement() and increment() action creator functions from the actions file. Then your example becomes even shorter:

import { decrement, increment } from '../redux/actions';

const mapDispatchToProps = {
  decrement,
  increment,
};

And if you use TypeScript, it is now trivial to define the types:

interface DispatchProps {
  decrement: typeof decrement;
  increment: typeof increment;
}

Hugo Pineda • Apr 1 '19

I never use mapDispatchToProps, I find cleaner to use this.props.dispatch(someAction()).
This way the code is explicitly saying it is dispatching an action

Matt Crowder • Apr 1 '19

That's true, and I feel like to someone new, it's more obvious what is going on, since it's explicit, dispatch is just injected into props, whereas using mapDispatchToProps... there's a lot of dependency injection going on behind the scenes that's hard to understand.

Anton Korzunov • Apr 1 '19

In this case actions you might emit would not a part of component’a public interface (aka props).
Giving ‘dispatch’ and letting component do whatever it wants - might not be a good idea.

Holy-Elie Scaïde • Oct 11 '19

I've started with that method (I was using the redux-actions library to create my action creators), but reverted to the old method while using rematch as the action creators will be children of dispatch. from

connect(null, {
  increment
})

it becomes this

connect(null, ({ Counter: { increment }}) => ({
  increment
}))

Doug McDonald • Mar 31 '19

I've been advocating this in all projects we have using Redux. Did discover a nasty issue the other day though where circular references in your modules can cause imported action creators / thunks to be undefined when passing to the shorthand. Using the older function syntax works around this problem.