Recursive rendering of React component connected to Redux store

Question

Is it possible to recursive render React component connected to Redux store?

Example (in my case there is no chance to do infinite component rendering loop):

class Container extends Component {
    render (){
        return (
            <div>
                {this.props.data}
                {this.props.dataKey ? <Container dataKey={'123'} /> : null}
            </div>
    }
}

const mapStateToProps = (state, props) => {
    return {
        data: getDataFromStore(state, props.dataKey}
    }
}

export default connect(mapStateToProps)(Container)

I saw that i can render component in component, but nested component have not connection to the store and hance i do not have required this.props.data.

Is any chance to get nested component connected to the store?

Answer 1

Try to render already connected Container:

class Container extends Component {
    render (){
        return (
            <div>
                {this.props.data}
                {this.props.dataKey ? <ConnectedContainer dataKey={'123'} /> : null}
            </div>
        );
    }
}

const mapStateToProps = (state, props) => {
    return {
        data: getDataFromStore(state, props.dataKey}
    }
}

const ConnectedContainer = connect(mapStateToProps)(Container);

export default ConnectedContainer;