dmail/index.html

## index.html
<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>

## with-redux.html
<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/htm@2.2.1" 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>

## without-redux.html
<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/htm@2.2.1" 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>
	<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>
	<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/htm@2.2.1" 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>
	<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/htm@2.2.1" 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>