React/redux - passing actionCreators many levels deep - reactjs

Question

I'm wondering how other people are handling passing redux action creators from a smart top-level component down to many lower level dumb components without bloating their props definitions.
For example, following this excellent tutorial on redux, if I pass a list of action creators into the props like so
import Voting from './Voting';
import * as actionCreators from '../action_creators';
...
export const VotingContainer = connect(
mapStateToProps,
actionCreators
)(Voting);
then in my Voting component I have access to the actionCreators which is really cool.
But if I have say 20 actionCreators that are used in Voting and all of its child components, eg.
Voting -> VotingContainer -> VotingDetail -> VotingFoo -> VotingBar
then I end up with render functions that look like this
class Voting extends React.Component {
render(){
<VotingContainer
actionCreator1={this.props.actionCreator1}
.
.
.
actionCreator15={this.props.actionCreator15} />
}
}
class VotingContainer extends React.Component {
render(){
<VotingDetail
actionCreator1={this.props.actionCreator1}
.
.
.
actionCreator12={this.props.actionCreator12} />
}
}
.
.
.
class VotingFoo extends React.Component {
render(){
<VotingBar
actionCreator1={this.props.actionCreator1}
.
.
.
actionCreator6={this.props.actionCreator6} />
}
}
Is there a best practice for this situation, a way to group the actionCreators together somehow without a lot of boilerplate at each step ? I haven't seen anything in any of the tutorials/examples...

Answer 1

Just connect components below the tree to Redux too.
We over-emphasize “one container at the top” in the examples.
This makes sense when we’re talking about very simple apps.
For any complex app, as soon as passing props gets tedious, connect() components below.
I cover this in my free videos: see Extracting Container Components and the next several videos.

Answer 2

I find that in most cases where I have a lot of dumb wrappers around a core ui component, most of the props from the top container are needed in the most nested component.
Because of this, ES6 ... syntax helps a lot.
You can do this:
<VotingBar {...this.props} />
Which is equivalent to this:
<VotingBar
actionCreator1={this.props.actionCreator1}
.
.
.
actionCreator6={this.props.actionCreator6} />

Answer 3

To avoid passing propertied from level to level down to where those props are actually used, React Context could be used to wrap the top Child with context (some specific data).
Codepen Demo
Here's a simple use-case example, where more than one reducer is defined, each of the reducers is responsible for its own state (a counter in this example)
A <Button> is inside a <Modal> and two Modal components are inside App, each one should eventually "broadcast" the change made internally (in the deepest component) to the top component (App) which is actually listening to the changes and acting on them.
Only App cares about changes in Button but since there can be many Button components, the App must know which deep component did what action and dispatch the right data back to Redux.
The Modal is simply something in between which exists for representational purposes only. it doesn't care about any props or state. Button also doesn't care about anything except what is being sent to it directly via the Context. he listen to changes via the Consumer method from React.createContext
const { Provider:ContextProvider, Consumer:ContextConsumer } = React.createContext({});
const {connect, Provider } = ReactRedux;
const {createStore, compose, combineReducers} = Redux;
const {Component} = React;
//// REDUX STORE STUFF /////////////////////////////////////
function reducer_foo(state = {value:1}, action){
if( action.type == 'FOO__SET_VALUE') // type should be unique
return { ...state, value:action.value }
else return state
}
function reducer_bar(state = {value:1}, action){
if( action.type == 'BAR__SET_VALUE') // type should be unique
return { ...state, value:action.value }
else return state
}
const rootReducer = combineReducers({
foo: reducer_foo,
bar: reducer_bar
});
//// REACT STUFF /////////////////////////////////////
// 2nd depth-level
// This component's "job" is to simply take a value and return a manipulated value to
// whoever called it. This is a very simplifed component, but think of a datepicker instead.
const Button = () =>
<ContextConsumer>
{v => <button onClick={()=> v.action(v.value + 1, v.name)}>Click to INC: {v.value}</button>}
</ContextConsumer>
// 1st depth-level (in reality this level will be more complex)
const Modal = () => <p><Button /></p>
// top depth-level component
class App extends Component {
constructor(props) {
super(props);
this.state = {};
}
// The deepest component will pass the value and the name for which to dispatch to
updateValue = ( value, name ) => {
this.props.dispatch({type:`${name.toUpperCase()}__SET_VALUE`, value})
}
render(){
const {foo, bar} = this.props;
return (
<React.Fragment>
<ContextProvider value={{value:foo.value, action:this.updateValue, name:'foo'}}>
<Modal />
</ContextProvider>
<ContextProvider value={{value:bar.value, action:this.updateValue, name:'bar'}}>
<Modal />
</ContextProvider>
</React.Fragment>
)
}
}
function mapStateToProps(state){
return state // in this example let's just pass the whole state for simplicity
}
const ConnectedApp = connect(mapStateToProps)(App)
const store = createStore(rootReducer);
ReactDOM.render(
<Provider store={store}>
<ConnectedApp />
</Provider>,
document.getElementById('root')
)
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.0/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.7/react-redux.min.js"></script>
<div id="root"></div>

Answer 4

There are of course a variety of ways you can tackle this issue.
Recently, I've started skipping the whole passing of action creator functions down the chain in favor of just requiring the store and my action creators directly wherever they're needed and dispatching from there, e.g.
var store = require('../store');
var actions = require('../actions');
// Somewhere inside your component...
store.dispatch(actions.someAction(data));
Just make sure the result of your action creators (i.e. the new state) is passed down through your top level components. This keeps your data flow unidirectional and easy to understand.