Redux – avoid to pass props down component tree manually – 1. Pass the store down

In the basic example you can see props are passed down the compoent tree manually at every level. It’s very anoying.

A simple way to avoid this is to pass Redux store down at every level. It will simplify the code to some extent

function render(){
    ReactDOM.render(
        <AppComponent appName="React Demo Site"  store={rootStore}/>,
        document.getElementById('root'));
}




class AppComponent extends Component {
  render() {
    return (

      <div className="App">
        ...

        <CounterComponent store = {this.props.store}/>
        ...
      </div>

    );
  }
}



class CounterComponent extends Component {

    render(){
        return (

            <div>
                <h2>Counter</h2>
                <h3>{this.props.store.getState().counter.value}</h3>
                <div>
                    <button onClick={ e =>  this.props.store.dispatch({type: 'counterChange', amount:  1}) }> + </button>
                    <button onClick={ e =>  this.props.store.dispatch({type: 'counterChange', amount: -1}) }> - </button>
                </div>
            </div>
        );
    }

}

The problem is, you still have to pass down the store object everywhere. Still anoying.