This is a recursive version of bindActionCreators
. It simplifies your mapDispatchToProps
and removes a significant amount of boilerplate by wrapping your action modules with the dispatch function. It takes an object that contains functions and returns those functions wrapped in the dispatch method. The object is traversed recursively. Non-functions are ignored.
The action wrapper is only used in the mapDispatchToProps function that you pass to redux's connect
.
import actionWrapper from 'redux-action-wrapper';
function mapDispatchToProps (dispatch) {
return actionWrapper({
userActions,
modalActions,
randomAction: () => ({type: 'MY_ACTION'})
}, dispatch);
}
Only one function is provided.
var actions = actionWrapper({an object of actions}, dispatch)
actionsObject
is an object, possibly nested, containing action functions.dispatch
is the dispatch method provided by react-redux.
The actions object returned can be returned from mapDispatchToProps
directly.
All functions on the object passed to actionWrapper
are wrapped in the dispatch
function provided by Redux. You access them through this.props
.
// for the root level
this.props.actionName();
// for nested objects
this.props.userActions.load();
// and deeply nested is the same
this.props.userActions.preferences.setCity('NYC');
import React from 'react';
import { connect } from 'react-redux';
import * as userActions from 'path/to/userActions';
import * as modalActions from 'path/to/modalActions';
import actionWrapper from 'redux-action-wrapper';
class MyComponent extends React.Component {
componentDidMount () {
if (!this.props.user) {
this.props.userActions.load(); // <---- ACTION USAGE
}
this.props.randomAction(); // <------------ ACTION USAGE
}
render () {
if (this.props.user) {
return (<span>{this.props.user.name}</span>);
} else {
return (<span>Loading...</span>);
}
}
}
function mapDispatchToProps (dispatch) {
return actionWrapper({ // <---------- ACTION WRAPPER IS HERE
userActions,
modalActions,
randomAction: () => ({type: 'MY_ACTION'})
}, dispatch);
}
function mapStoreToProps (store) {
return store;
}
export default connect(mapStoreToProps, mapDispatchToProps)(MyComponent);