daily pastebin goal
58%
SHARE
TWEET

Untitled

a guest Oct 12th, 2018 65 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html>
  2. <head>
  3.   <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
  4.   <script src="https://npmcdn.com/react@15.6.2/dist/react-with-addons.js"></script>
  5.   <script src="https://npmcdn.com/react-dom@15.6.2/dist/react-dom.js"></script>
  6.   <script src="https://npmcdn.com/redux@3.7.2/dist/redux.js"></script>
  7.   <!-- <script src="https://npmcdn.com/react-redux@4.4.3/dist/react-redux.js"></script> -->
  8.   <script src="https://npmcdn.com/react-redux@4.4.4/dist/react-redux.js"></script>
  9.  
  10.   <style>
  11.     body {
  12.       background: #fff
  13.     }
  14.   </style>
  15. </head>
  16. <body>
  17.   <div id="app"></div>
  18.   <script type="text/babel">
  19.  
  20. class ControlledInside extends React.Component {
  21.     render() {
  22.         console.log('internal render', this.props.something);
  23.         return <i>{this.props.something}</i>;
  24.     }
  25. }
  26. const Inside = ReactRedux.connect(function mapStateProps(state) {
  27.     console.log('internal mapStateProps');
  28.     return {something: state.data};
  29. })(ControlledInside);
  30.  
  31. class ControlledWrapper extends React.Component {
  32.     render() {
  33.         console.log('wrapper render', this.props.flag);
  34.         return (<div>
  35.             <button onClick={this.props.onClick} >Flip</button>
  36.             {this.props.flag ? <Inside /> : null}
  37.         </div>);
  38.     }
  39. }
  40. const Wrapper = ReactRedux.connect(
  41.     function mapStateProps(state) {
  42.         console.log('wrapper mapStateProps');
  43.         return {flag: state.flag};
  44.     },
  45.     {onClick: ()=> ({type: 'FLIP'})}
  46. )(ControlledWrapper);
  47.    
  48.  
  49. const store = Redux.createStore(function (state, action) {
  50.     if (!state) return {flag: true, data: 'Inside'};
  51.     if (action.type === 'FLIP') return {flag: false, data: null};
  52.     return state;
  53. });
  54.  
  55. ReactDOM.render(
  56.   <ReactRedux.Provider store={store} >
  57.     <Wrapper />
  58.   </ReactRedux.Provider>,
  59.   document.getElementById('app')
  60. );
  61.  
  62.  
  63.   </script>
  64. </body>
  65. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top