5 Ways to Connect Redux Actions

At bene : studio we love knowledge sharing to help the community of professionals. With 10+ years and 100+ projects behind our backs we have experienced a lot. This is why we have launched a knowledge base on our blog with regular updates of tutorials, best practices, open source solutions.

These materials come from our internal workshops with our team of developers and engineers.

LET’S GO

With react-redux.connect we can connect our redux store to a component:

connect (mapStateToProps, mapDispatchToProps)(MyComponent)

This article provides 5 ways of defining mapDispatchToProps with explanations. At Bene Studio we usually use Redux to manage application data in large scale apps. We also had a workshop in 2018, discussing the usage of Redux Saga through a simple React application.

AN EXAMPLE, GIVE IT TO ME, NOW!

Let’s consider the following React component with simple Redux action creators that are sendMessage and deleteMessage.

import React, { Component } from ‘react’
import { connect } from ‘react-redux’
import { sendMessage, deleteMessage } from ‘./actions’
class ChatComponent extends Component {
handleSend = message => {
this.props.sendMessage(message)
}
handleDelete = id => {
this.props.deleteMessage(id)
}
render() {
// …
}
}
const mapStateToProps = state => state
// ▽ ▽ ▽ ▽ ▽ ▽ ▽ ▽ ▽ ▽
const mapDispatchToProps = /* this part is to be discussed */
// △ △ △ △ △ △ △ △ △ △
export default connect(
mapStateToProps,
mapDispatchToProps,
)(ChatComponent)

#1 WRAP INTO DISPATCH MANUALLY

const mapDispatchToProps = dispatch => ({
sendMessage: message => dispatch(sendMessage(message)),
deleteMessage: id => dispatch(deleteMessage(id)),
})

Pros: have full control and easy to understand.

Cons: have to write boilerplate, easy to mess up or forget to wrap. Syntactic noise.

#2 WRAP INTO DISPATCH AUTOMATICALLY WITH CONNECT

From connect’s docs:

mapDispatchToProps […] If an object is passed, each function inside it is assumed to be a Redux action creator. An object with the same function names, but with every action creator wrapped into a dispatch call so they may be invoked directly, will be merged into the component’s props.

It means that we don’t have to dispatch our actions, just need to pass an object to connect and we can call the wrapped actions from the props.

Example:

const mapDispatchToProps = {
sendMessage, // will be wrapped into a dispatch call
deleteMessage, // will be wrapped into a dispatch call
};

Pros: implicit wrapping, no need to write boilerplate.

Cons: all properties will be wrapped into a dispatch call, so no way to inject non-action functions into props from here.

#3 USE BINDACTIONCREATORS:

From redux’s docs:

bindActionCreators: Turns an object whose values are action creators, into an object with the same keys, but with every action creator wrapped into a dispatch call so they may be invoked directly.

import { bindActionCreators } from ‘redux’
// …
const mapDispatchToProps = dispatch => bindActionCreators(
{
sendMessage,
deleteMessage,
},
dispatch,
)

Pros: we have control over wrapping but no need to write boilerplate for all the action creators.

Cons: extra import and need to pass dispatch explicitly.

#4 USE BINDACTIONCREATORS AND EXTEND THE PROPSI’M GOING TO SHOW YOU, HOW TO CONNECT TO YOUR APP.

import { bindActionCreators } from ‘redux’
// …
const mapDispatchToProps = dispatch => ({
…bindActionCreators(
{
sendMessage,
deleteMessage,
},
dispatch,
),
otherService, // this is not to be wrapped into dispatch
})

Pros: you can extend the returned props object with functions which do not call dispatch() at all.

Cons: syntactic noise.

#5 WRAP INTO DISPATCH AUTOMATICALLY

It’s a variation of #2.

import * as messageActions from ‘./messageActions’
import * as userActions from ‘./userActions’
// …
const mapDispatchToProps = {
…messageActions,
…userActions,
};

Pros: minimal boilerplate, very low syntax noise. All the actions can be connected without listing them all. Connected actions will not shadow the imported ones when using destructuring.

Cons: it will import and connect all actions.

SUMMING UP

Modern JavaScript gives us really powerful tools to make our lives easier, like object spread operator, wildcard imports. They are very handy when it comes to the redux world. Enjoy!

Want to ask some questions? Share them with us via e-mail to partner@benestudio.co and we can set up a talk with our engineers.

Fancy working for the studio where you can work on international projects and write articles like this? Check out our open positions!

Looking for a partner for your next project? Check out our services page to see what we do and let’s set up a free consultation.