Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement