React redux-saga how to pass prop down to nested child

Question

Using

• react 16.3.1
• redux
• react-redux
• redux-saga

i wonder is there anyway to pass prop down to nested child without declare prop tag each time in each child ? example index.js

<Provide store={store}>
    <App />
</Prodiver>

App.js

....
render(){
    return (
        <div>
            ....
            <App1 dog={this.props.dog}/>
            ...
        </div>
    );
}
const mapStateToProps = () => .....
export default connect(mapStateToProps)(App);

App1.js

export default function App1(props) {
    return <App2 dog={prop.dog}/>;
}

App2.js

export default function App2(props) {
    return (<div>{props.dog}</div>);
}

as u can see code above i have to pass prop tag in each child i has.is it possible to pass Props in App.js and get it in App2.js without passing from App1.js ? Thank in advanced.

Answer 1

Your component hierarchy is: App -> App1 -> App2

The dog prop of App comes from the redux store.

So you can also connect App2 to grab dog from the store. This way, you skip the props passing through App1 .