Created
July 7, 2020 12:52
-
-
Save dmail/203a5e3893dcc012de756e3143327292 to your computer and use it in GitHub Desktop.
redux stuff
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Redux stuff</title> | |
| </head> | |
| <body> | |
| <main> | |
| <iframe src="./without-redux.html"></iframe> | |
| <iframe src="./with-redux.html"></iframe> | |
| </main> | |
| <style> | |
| main { | |
| display: flex; | |
| height: 100vh; | |
| } | |
| main iframe { | |
| border: none; | |
| width: 50%; | |
| height: 100%; | |
| } | |
| </style> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <body> | |
| <h1>With redux</h1> | |
| <div id="app"></div> | |
| <pre id="logs"></pre> | |
| <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> | |
| <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js" crossorigin></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.1.3/react-redux.min.js" crossorigin></script> | |
| <script src="https://unpkg.com/[email protected]" crossorigin></script> | |
| <script type="module"> | |
| const { createElement } = React; | |
| const render = ReactDOM.render; | |
| const html = htm.bind(createElement); | |
| const log = (message) => { | |
| document.querySelector('#logs').innerHTML += `${message}\n` | |
| } | |
| const store = Redux.createStore((state = { count: 0 }, action) => { | |
| if (action.type === 'increment') { | |
| return { | |
| ...state, | |
| count: state.count + 1, | |
| } | |
| } | |
| return state | |
| }) | |
| const App = class extends React.Component { | |
| constructor(props) { | |
| super(props) | |
| this.state = { count: 0 } | |
| this.increment = this.increment.bind(this) | |
| } | |
| increment() { | |
| this.setState((prevState) => ({ count: prevState.count + 1 })) | |
| } | |
| render() { | |
| log('render App') | |
| return html` | |
| <${ReactRedux.Provider} store=${store}> | |
| <${Count} /> | |
| <${ButtonIncrement} /> | |
| </${ReactRedux.Provider}> | |
| ` | |
| } | |
| } | |
| let ButtonIncrement = class extends React.Component { | |
| render() { | |
| log('render ButtonIncrement') | |
| return html`<button onClick=${this.props.increment}>+</button>` | |
| } | |
| } | |
| const mapDispatchToPropsForButton = { | |
| increment: () => { | |
| return { type: 'increment' } | |
| } | |
| } | |
| ButtonIncrement = ReactRedux.connect(null, mapDispatchToPropsForButton)(ButtonIncrement) | |
| let Count = class extends React.Component { | |
| render() { | |
| log('render Count') | |
| return html`<span>${this.props.count}</span>` | |
| } | |
| } | |
| const mapStateToPropsForCount = (state) => { | |
| return { count: state.count } | |
| } | |
| Count = ReactRedux.connect(mapStateToPropsForCount)(Count) | |
| const renderApp = () => { | |
| ReactDOM.render(html`<${App} />`, document.querySelector('#app')) | |
| } | |
| renderApp() | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <body> | |
| <h1>Without redux</h1> | |
| <div id="app"></div> | |
| <pre id="logs"></pre> | |
| <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> | |
| <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> | |
| <script src="https://unpkg.com/[email protected]" crossorigin></script> | |
| <script type="module"> | |
| const { createElement } = React; | |
| const render = ReactDOM.render; | |
| const html = htm.bind(createElement); | |
| const log = (message) => { | |
| document.querySelector('#logs').innerHTML += `${message}\n` | |
| } | |
| const App = class extends React.Component { | |
| constructor(props) { | |
| super(props) | |
| this.state = { count: 0 } | |
| this.increment = this.increment.bind(this) | |
| } | |
| increment() { | |
| this.setState((prevState) => ({ count: prevState.count + 1 })) | |
| } | |
| render() { | |
| log('render App') | |
| return html` | |
| <div> | |
| <${Count} count=${this.state.count} /> | |
| <${ButtonIncrement} increment=${this.increment} /> | |
| </div> | |
| ` | |
| } | |
| } | |
| const ButtonIncrement = class extends React.Component { | |
| shouldComponentUpdate() { | |
| return false | |
| } | |
| render() { | |
| log('render ButtonIncrement') | |
| return html`<button onClick=${this.props.increment}>+</button>` | |
| } | |
| } | |
| const Count = class extends React.Component { | |
| shouldComponentUpdate(nextProps) { | |
| return this.props.count !== nextProps.count | |
| } | |
| render() { | |
| log('render Count') | |
| return html`<span>${this.props.count}</span>` | |
| } | |
| } | |
| const renderApp = () => { | |
| ReactDOM.render(html`<${App} />`, document.querySelector('#app')) | |
| } | |
| renderApp() | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment