Untitled

<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
  <script src="https://npmcdn.com/react@15.6.2/dist/react-with-addons.js"></script>
  <script src="https://npmcdn.com/react-dom@15.6.2/dist/react-dom.js"></script>
  <script src="https://npmcdn.com/redux@3.7.2/dist/redux.js"></script>
  <!-- <script src="https://npmcdn.com/react-redux@4.4.4/dist/react-redux.js"></script> -->
  <script src="https://npmcdn.com/react-redux@4.4.4/dist/react-redux.js"></script>

  <style>
    body {
      background: #fff
    }
  </style>
</head>
<body>
  <div id="app"></div>
  <script type="text/babel">

class ControlledInside extends React.Component {
    render() {
        console.log('internal render', this.props.something);
        return <i>{this.props.something}</i>;
    }
}
const Inside = ReactRedux.connect(function mapStateProps(state) {
    console.log('internal mapStateProps');
    return {something: state.data};
})(ControlledInside);

class ControlledWrapper extends React.Component {
    render() {
        console.log('wrapper render', this.props.flag);
        return (<div>
            <button onClick={this.props.onClick} >Flip</button>
            {this.props.flag ? <Inside /> : null}
        </div>);
    }
}
const Wrapper = ReactRedux.connect(
    function mapStateProps(state) {
        console.log('wrapper mapStateProps');
        return {flag: state.flag};
    },
    {onClick: ()=> ({type: 'FLIP'})}
)(ControlledWrapper);


const store = Redux.createStore(function (state, action) {
    if (!state) return {flag: true, data: 'Inside'};
    if (action.type === 'FLIP') return {flag: false, data: null};
    return state;
});

ReactDOM.render(
  <ReactRedux.Provider store={store} >
    <Wrapper />
  </ReactRedux.Provider>,
  document.getElementById('app')
);


  </script>
</body>
</html>