Redux mapStateToProps and mapDispatchToProps Shorthand

November 6, 2017

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

Here’s a typical implementation of a container:

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

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
Software developer living in Toronto 🇨🇦 Thailand 🇹🇭.
Focused on Node | GraphQL | React | React Native.
Subscribed!
You should receive an email with a confirmation link!
Join my Newsletter
I'll send you an email when I have something interesting to show.
Or follow me on Twitter for more stuff like this.