Redux mapStateToProps and mapDispatchToProps Shorthand

Dylan Vann
Nov 6, 2017 · 1 min read

This is a tip to reduce boilerplate when writing redux code.

Here’s a typical implementation of a container:

Very ES5.

This is how you can use shorthand and reselect to reduce the amount of code it takes (less code less problems):

Isn’t that better?

We use:

  • Selectors to grab our data out of reducers.
  • Reselect to combine our selectors into a single selector.
  • This single selector can be used directly in mapStateToProps.
  • Action creators and mapDispatchToProps shorthand.
  • We don’t declare functions for mapStateToProps and mapDispatchToProps since we know they’re the first arguments to connect.

You can see the code for this example on DylanVann/redux-shorthand-example.

Dylan Vann

Written by

I design and develop software.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade