Skip to content
loading...

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" }) }; ins... [Read Full]
markdown guide
 
 

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

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

 

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.

 

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.

 

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

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.

 

Hah, the joke's on you, I've never done mapDispatchToWhateverItIs at all.

 

mapAToB seems imperative, while React prefer declarative coding style.

 

If you want to bind the action based on some logic then go with the later else go with the former one.

 

i'm not sure there was an argument here why one way is "right" and the other is "wrong"?

code of conduct - report abuse